/* 🎨 Shared page colors set the overall look. */
body{
    background-color:Whitesmoke;
    color: rgb(41, 5, 41);
}

/* 📦 The container gives content a framed panel. */
.container{
    width: 60%;
    margin: 20px auto;
    border: 2px solid goldenrod;
    background-color: rgb(246, 235, 209);
    color: rgb(33,3,3);
    padding: 20px;
}
caption{
    color:rgb(41, 5, 41);
    font-size:x-large;
    font-family: Arial, Helvetica, sans-serif;
}

/* 🧮 The table gets a fixed width and centered layout. */
table{
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
    background-color:whitesmoke;
    color: rgb(41, 5, 41);
}

/* 🏷️ Header cells stand out as column labels. */
th, .birthday{
    border: 2px solid whitesmoke;
    background-color: rgb(41, 5, 41);
    padding: 20px;
    font-size:larger;
    color: whitesmoke;
}

/* 🔲 Borders and padding make each table cell easy to read. */
td{
    border: 1px solid rgb(41, 5, 41);
    padding: 10px;
    text-align: right;
    vertical-align: top;
    height: 80px;
}

/* 🧭 Center the heading if one is added. */
h1{
    text-align: center;
    color: ivory;
}