body {
    font-family: sans-serif;
}
body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 2rem;
}

.col1 {
    grid-column: 1;
}
.col2 {
    grid-column: 2;
}


header#time {
    font-size: 6rem;
}
header#date {
    font-size: 4rem;
}
#weather {
    font-size: 5rem;
    border: 5px solid darkcyan;
    background-color: cyan;
    padding: 1rem;
    width: 20rem;
}
#calendar {
    font-size: 2rem;
}
#dinner {
    font-size: 2rem;
}
header {
    font-size: 1.5rem;
    padding: 1rem 0;
}

abbr {
    font-size: 80%;
    border: 5px solid darkcyan;
    border-radius: 0.5rem;
    padding: 0.25rem;
    background-color: cyan;
}
abbr[data-name="jude"] {
    border: 5px solid #11d3ed;
    background-color: #4cf8f3;
}
abbr[data-name="evie"] {
    border: 5px solid purple;
    background-color: #ff89ef;
}
abbr[data-name="jesse"] {
    border: 5px solid #a84602;
    background-color: #fdab4e;
}
abbr[data-name="papa"] {
    border: 5px solid #bfb119;
    background-color: #fff772;
}

#calendar {
    list-style: none;
    padding: 0;
    li {
        display: flex;
        flex-direction: row;
        border: 0px solid red;
        padding: 0.5rem 0;

        .description {
            margin-left: 1rem;
        }

        .spacer {
            flex: 1
        }
    }
}

#dinner {
    padding-top: 2rem;
    div.time {
        font-size: 5rem;
    }
    .description {
        padding: 2rem 0;
    }
}