* {
    box-sizing: border-box;
}

body {
    text-align: center;
    /* https://www.pexels.com/photo/unpaved-road-surrounded-with-trees-2838476/ */
    background-image: url("../images/fall-leaves.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;

    /* NOTE: Apparently this prevents "position: fixed" from working */
    /* Add the background blur effect */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    margin: 0;

    font-family: "Arial", "Helvetica", sans-serif;

    /* padding-left: 15%;
    padding-right: 15%; */
    padding-bottom: 25px;
}

h4 {
    font-weight: normal;
}

#date-info {
    font-weight: bold;
}


#current-data {
    border: 3px solid black;
}




.table-text {}







.hourly-data-section {
    background-color: white;
    padding: 25px;
    border-radius: 25px;
    margin-left: 15%;
    margin-right: 15%;
}

.hourly-data-label {
    text-align: left;
    padding-bottom: 20px;
}

/* .hourly-data-label > * {
    vertical-align: middle;
} */

.hourly-data-label h2 {
    font-weight: bold;
    display: inline-block;
    margin-top: 0;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 0;
}

.hourly-data-label span {
    font-size: 1.1em;
}

table {
    width: 100%;
}

.hourly-data-section table,
.hourly-data-section th,
.hourly-data-section td {
    border: 1px solid lightgray;
    border-left: 0;
    border-right: 0;
    border-collapse: collapse;
}

.hourly-data-section th {
    padding: 10px;
    font-size: 1.1em;
}

.hourly-data-section table img {
    height: 50px;
    vertical-align: middle;
}

.hourly-subdata {
    color: #636363;
    font-style: italic;
    font-size: 0.8em;
}


#top-banner {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    /* #5F902E for secondary color? */
    background-color: #015C1F;
    padding: 25px;
    margin-bottom: 25px;
    overflow: hidden;
    color: white;
    padding-left: 15%;
    padding-right: 15%;
}

#top-banner__left-section {
    float: left;
    width: 30%;
}

#top-banner__right-section {
    float: left;
    width: 70%;
    border-radius: 25px;
    border: 1px solid white;
    padding: 10px;
    background-color: #5F902E;
}

#top-banner__right-section table {
    border-collapse: collapse;
}

#top-banner__right-section th {
    border-bottom: 1px solid white;
    padding-bottom: 10px;
}

#top-banner__right-section__table-row-1 {
    font-size: 1.8em;
}

#top-banner__right-section__table-row-1 img {
    height: 60px;
    vertical-align: middle;
    margin: -5px;
}

#top-banner__right-section__table-row-2 {
    font-style: italic;
}


.top-banner__subdata {
    font-style: italic;
    font-size: 0.8em;
}

.top-banner__unit-label {
    font-size: 0.8em;
}



@media only screen and (max-width: 1400px) {
    .hourly-data-section {
        margin-left: 1%;
        margin-right: 1%;
    }

    #top-banner {
        padding-left: 1%;
        padding-right: 1%;
    }
}

/* REGARDING overflow: hidden

It creates a block formatting context.

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

see also: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

It's correct that the overflow style is intended to control what happens to overflowing content.

The effect on the floating elements is a side effect of the overflow style creating a block formatting context for the element.

When you don't specify a size for the containing element, the block formatting context gets its size from the elements that it contains, so that is the size that the containing element gets. */