#fcstDisc {
    background-color: rgb(0, 61, 0);
    white-space:pre-line;
    text-align: left;
    border-radius: 30px;
    padding-left: 0.5em;
    padding-right: 0.5em;
    overflow: hidden;
    font-family: monospace;
}

.WWAdisplay {
    background-color: rgb(0, 61, 0);
    white-space:pre-line;
    text-align: left;
    border-radius: 30px;
    padding-left: 0.5em;
    padding-right: 0.5em;
    overflow: hidden;
    font-family: monospace;
}

.butFcstDisc, .butDaily {
    width: 80vw;
    height: 3em;
}

/* Hourly grid for NWS forecasts */
.hourlyDisplay {
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    display: grid;
    grid-template-columns: 30vw 70vw;
    grid-template-rows: 7em 1.5em 1.5em 1.5em 6em;

    grid-template-areas:
    "wxicon dtg"
    "temp tempvalue"
    "dewpoint dewpointvalue"
    "wind windvalue"
    "wx wxvalue";
}

/* Daily grid for NWS forecasts */
.dailyDisplay {
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    display: grid;
    grid-template-columns: 30vw 70vw;
    grid-template-rows: 7em 1.5em 1.5em 1.5em 15em;

    grid-template-areas:
    "wxicon dtg"
    "temp tempvalue"
    "dewpoint dewpointvalue"
    "wind windvalue"
    "fcst fcst";
}

.wxicon {
    grid-area: wxicon;
    border-radius: 10px;
    width:5em;
    height:5em;
    border: 1px solid white;
    margin: auto;
}

.dtg {
    grid-area: dtg;
    font-size: 1.2em;
    font-weight: bold;
    margin: auto;
}

.temp {
    grid-area: temp;
    color: #ff7700;
    font-weight: bold;
    text-align: right;
}

.tempvalue {
    grid-area: tempvalue;
    text-align: left;
    padding-left: 1em;
    padding-right: 1em;
}

.dewpoint {
    grid-area: dewpoint;
    color: #ff7700;
    font-weight: bold;
    text-align: right;
}

.dewpointvalue {
    grid-area: dewpointvalue;
    text-align: left;
    padding-left: 1em;
    padding-right: 1em;
}

.wind {
    grid-area: wind;
    color: #ff7700;
    font-weight: bold;
    text-align: right;
}

.windvalue {
    grid-area: windvalue;
    text-align: left;
    padding-left: 1em;
    padding-right: 1em;
}

.wx {
    grid-area: wx;
    color: #ff7700;
    font-weight: bold;
    text-align: right;
}

.wxvalue {
    grid-area: wxvalue;
    text-align: left;
    padding-left: 1em;
    padding-right: 1em;
}

.fcst {
    grid-area:fcst;
    text-align: left;
    padding-left: 1em;
    padding-right: 2em;
    padding-top: 1em;
}