#clock {
    font-size: 2em;
    padding-top: 1em;
    text-align: center;
}

.frosted {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(78, 86, 106, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.125);
}

.page-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1.4fr 0.6fr;
    gap: 2em 0em;
    grid-auto-flow: row;
    grid-template-areas:
        "currentForecast"
        "hourlyReport"
        "weeklyReport";
    max-width: 72em;
    margin: 0 auto;
    padding: 1.5em 0 2.5em;
}

.currentForecast {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "forecast secondaryInfo";
    grid-area: currentForecast;
}

.forecast {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, max-content);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "shortDescription"
        "longDescription"
        "currentTemp"
        "waterConditions";
    grid-area: forecast;
}

.shortDescription {
    font-size: 3em;
    grid-area: shortDescription;
}

.longDescription {
    font-size: 1.35em;
    grid-area: longDescription;
}

.currentTemp { grid-area: currentTemp; }
.currentTemp > .temperature { font-size: 6em; }
.currentTemp > .unit { font-size: 2em; }

.waterConditions { grid-area: waterConditions; }

.secondaryInfo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2em 0;
    grid-auto-flow: row;
    grid-template-areas:
        "windContainer"
        "solarClock";
    grid-area: secondaryInfo;
}

.windContainer { grid-area: windContainer; }

.solarClock { grid-area: solarClock; }

.hourlyReport { grid-area: hourlyReport; }

.weeklyReport {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". . . . . .";
    grid-area: weeklyReport;
}