html {
    max-width: 80ch;
    margin: auto;
    padding: 3em 1em;
}

body {
    font-family: Arial, sans-serif;
}

table {
    font-size: larger;
}

#container {
    display: grid;
    grid-template-areas:
        "header   header"
        "temp     temp"
        "snapshot status";
    grid-template-columns: 1fr 1fr;
    gap: 3em;
}

#header {
    grid-area: header;
}

#timestamp {
    float: right;
}

#snapshot {
    grid-area: snapshot;
}

#status {
    grid-area: status;
}

#temp {
    grid-area: temp;
    font-size: xx-large;
    font-weight: bold;
    text-align: center;
}

@media screen and (max-width: 500px) {

    #container {
        grid-template-areas:
            "header"
            "temp"
            "snapshot"
            "status";
        grid-template-columns: 1fr;
        gap: 1em;
    }
}