/*global*/
nav,
.right-now,
.weather-content .wind-air-qual,
.weather-content .air-qual-more,
.right-now-pt2,
.forecast-24hr,
.forecast-7day,
.credit {
    display:flex;
}

.right-now,
.weather-content .wind-air-qual,
.weather-content .air-qual-more,
.right-now-pt2,
.forecast-24hr,
.forecast-7day {
    margin-bottom:15px;
}

nav,
.content-header p,
.right-now,
.weather-content .wind,
.weather-content .air-qual,
.weather-content .air-qual-more,
.right-now-pt2 div,
.forecast-24hr,
.forecast-7day,
.credit,
footer {
    outline: 2px solid black;
}

.weather-content .wind,
.weather-content .air-qual,
.weather-content .air-qual-more,
.right-now,
.right-now-pt2 div,
.forecast-24hr,
.forecast-7day {
    border-radius: 4px;
}
/**/

/*---layout/style----*/


/*--2.right now-------------------*/
.right-now {
    flex-direction:row;
    flex-wrap:wrap;
    height:100px;
    width:100%;
    max-width:450px;
}
    /*place, feels like*/
    .right-now-1 {
        display:flex;
        flex-direction:column;
        justify-content: space-between;
        align-items:center;
        height:80%;
        width:70%;
    }
        .right-now-1 div {
            display:flex;
            flex-direction:row;
            justify-content:center;
            align-items:center;
            height: 48%;
            width:98%;
        }
        .right-now-1 p {
            text-align:center;
        }
    /*weather icon, temp, desc*/
    .right-now-2 {
        height:80%;
        width:30%;
    }
        .right-now-2 div {
            display:flex;
            flex-direction:row;
            justify-content:space-around;
            align-items:center;
            height:50%;
            width:100%;
        }
            .weather-now__icon  {
                transform: scale(2);
            }
            .weather-now__temp {
                font-size:1.5em;
            }
    /*as of*/
    .right-now-3 {
        display:flex;
        flex-direction:row;
        justify-content:center;
        align-items:center;
        height:20%;
        width:100%;
    }
        .weather-now__asof {
            font-size:0.9em;
        }
/*---------*/
/*---3. right now pt2------------------*/
.right-now-pt2 {
    flex-direction:row;
    justify-content:space-around;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    padding-bottom:20px;
    padding-left:10px;
    padding-right:10px;
    width:90%;
}
    .right-now-pt2 div {
        display:flex;
        align-items:center;
        flex-direction:column;
        height:auto;
        min-height:30%;
        width:35%;
        padding:2px;
    }
    .right_now-pt2 span {
        height:33%;
        width:100%;
    }
    .metric__label {
        text-decoration:underline;
        font-weight:bold;
        text-align:center;
    }
/*---------*/
/*---4. wind/5. air qual------------------*/
.weather-content .wind-air-qual {
    flex-direction:row;
    justify-content:center;   
    gap:20px;
    align-items:center;
    width:90%;
}
.weather-content .wind, .weather-content .air-qual {
    display:flex;
    height:98%;
    width:48%;
    max-width:300px;
}
/*4.  wind*/
.weather-content .wind {
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    height:auto;
    cursor:pointer;
}
    /*4.  wind*/
.weather-content .wind-current, /*4.  wind*/
.weather-content .wind-gust {
        display:flex;
        flex-direction:column;
        justify-content:space-around;
        align-items:center;
        height:70%;
        width:45%;
    }
        /*4.  wind*/
.weather-content .wind-current div, /*4.  wind*/
.weather-content .wind-gust div {
            display:flex;
            flex-direction:row;
            justify-content:center;
            align-items:center;
            height:45%;
            width:100%;
        }
            .wind-current__label, .wind-gust__label, .beaufort-scale__label {
                text-decoration:underline;
                font-size:1.2em;
                font-weight:bold;
                margin-bottom:5px;
                margin-top:5px;
                padding:0;
            }
            .wind-current__label p, .wind-gust__label p, .beaufort-scale__label p {
                margin:0;
                padding:0;
            }
            .wind-current__value, .wind-gust__value, .beaufort-scale__value {
                font-size:1em;
                margin-top:0;
                padding:0;
            }
    .weather-content .beaufort-scale {
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }
        .weather-content .beaufort-scale div {
            display:flex;
            flex-direction:row;
            justify-content:center;
            align-items:center;
            height:45%;
            width:100%;
        }
/*5. air qual*/
.air-qual {
    flex-direction:column;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    height:auto;
}
    .air-qual div {
        display:flex;
        flex-direction:row;
        justify-content:center;
        align-items:center;
        height:auto;
        min-height:15%;
        width:90%;
    }
    .air-qual h2 {
        text-decoration:underline;
        margin-bottom:5px;
        margin-top:5px;
    }
        .air-meaning {
            font-size:0.9em;
            text-align:center;
            margin:4px 0;
        }
            .air-qual--good {
                background-color:#00e400;
                color:#1a1a1a;
            }
            .air-qual--moderate {
                background-color:#ffff00;
                color:#1a1a1a;
            }
            .air-qual--sensitive {
                background-color:#ff7e00;
                color:#1a1a1a;
            }
            .air-qual--unhealthy {
                background-color:#ff0000;
                color:#ffffff;
            }
            .air-qual--very-unhealthy {
                background-color:#8f3f97;
                color:#ffffff;
            }
            .air-qual--hazardous {
                background-color:#7e0023;
                color:#ffffff;
            }
            .air-qual--unknown {
                background-color:#9e9e9e;
                color:#1a1a1a;
            }
/*---------*/


/*---6+7.  forecast strips: 24hr and 7day------------------*/
.forecast-24hr {
    --strip-gap:5px;
    --card-width:80px;
    --icon-scale:1.5;
}
.forecast-7day {
    --strip-gap:8px;
    --card-width:120px;
    --icon-scale:3;
}

.forecast-24hr,
.forecast-7day {
    flex-direction:column;
    align-items:center;
    height:auto;
    width:95%;
}
.forecast-24hr h2,
.forecast-7day h2 {
    margin-top:8px;
    margin-bottom:8px;
}
.forecast-24hr p,
.forecast-7day p {
    margin-top:0;
    margin-bottom:5px;
}
    .hourly-row,
    .forecast-row {
        display:flex;
        flex-direction:row;
        gap:var(--strip-gap);
        width:95%;
        overflow-x:auto;
        margin-bottom:10px;
    }
        .hourly-slot,
        .forecast-day {
            display:flex;
            flex-direction:column;
            align-items:center;
            flex:1 0 var(--card-width);
        }
        .hourly-slot__icon,
        .forecast-day__icon {
            transform: scale(var(--icon-scale));
            padding:10px;
        }
/*---------*/

/*--STYLE-------------------*/
.metric-grid,
.forecast-day__stats {
    margin: 0;
}
    .metric-grid dd,
    .forecast-day__stats dd {
        margin-left: 0;
    }
    .metric {
        border-bottom: 1px solid var(--wx-line);
        padding: 6px 0;
    }
    .forecast-day__stats dd {
        border-bottom: 1px solid var(--wx-line);
        padding-bottom: 4px;
        margin-bottom: 4px;
    }
.forecast-day,
.hourly-slot {
    border: 1px solid var(--wx-line);
    padding: 8px;
}
/*--RESPONSIVENESS------*/
@media screen and (min-width:750px){
.right-now-pt2 {
    flex-direction:row;
    flex-wrap:nowrap;
}
}