/*-----------------------------*/
.air-content {
    gap:10px;
}
    .wind-air-qual {
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        flex-wrap:flex;
        height:auto;
        width:70%;
    }
    .reference-tables {
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        height:auto;
        width:90%;
    }
    .more-air-info {
        display:flex;
        flex-direction:column;
        align-items:center;
        height:auto;
        width:auto;
        gap:10px;
    }
/*-----------------------------*/
.wind, .air-qual, .pollutants,
.severe, .precip, .solar,
caption,
.atmosphere, .wind-profile, .vertical-profile {
    outline:2px solid black;
    padding:5px;
    border-radius:4px;
}
.beaufort-ref table caption,
.beaufort-ref table tr,
.beaufort-ref table tr th, 
.beaufort-ref table tr td,
.aqi-ref table caption,
.aqi-ref table tr,
.aqi-ref table tr th,
.aqi-ref table tr td {
    outline:2px solid black;
    padding:5px;
}
/*-----------------------------*/
/*first section*/
.wind {
    display:flex;
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
    height:auto;
    width:30%;
    outline:2px solid black;
}
    .wind-current {
        height:auto;
        width:48%;
    }
    .wind-gust {
        height:auto;
        width:48%;
    }
    .beaufort-scale {
        height:auto;
        width:100%;
    }
/*--*/
.air-qual {
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:auto;
    width:30%;
}
/*--*/
.pollutants {
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:auto;
    width:30%;
    max-width:300px;
}
    .pollutants div {
        display:flex;
        justify-content:space-between;
        align-items:baseline;
    }
/*--*/
/*--------------------------------*/
/*second section*/
.beaufort-ref {
    display:flex;
    justify-content:center;
    height:auto;
    width:30%;
}
/*--*/
.aqi-ref {
    height:auto;
    width:65%;
}
/*--*/
.aqi-table__now,
.beaufort-table__now
{
    background-color:rgba(204, 230, 8, 0.747);
}
.ingredient__reading 
{
    background-color:rgba(230, 160, 8, 0.747);
}


/*--------------------------------*/
/*third section*/
.air-table {
    width:95%;
    border-collapse:collapse;
}
    .air-table th,
    .air-table td {
        padding:6px 10px;
        border:1px solid #ccc;
        text-align:left;
        vertical-align:top;
    }
    .air-table thead th {
        border-bottom:2px solid #999;
    }
    .air-table tbody th,
    .air-table__value,
    .air-table__reading,
    .ingredient__number,
    .ingredient__reading {
        white-space:nowrap;
    }
    .air-table__reading {
        display:block;
        font-size:0.85em;
    }
    .ingredient__number,
    .air-table__value
    
    
    {
    background-color:rgba(204, 230, 8, 0.747);
    }
/*--*/
.more-air-info {
    width:95%;
}
.severe {
    height:auto;
    width:auto;
}
/*--*/
.precip {
    height:auto;
    width:auto;
}
/*--*/
.solar {
    height:auto;
    width:auto;
}
/*--*/
.atmosphere {
    height:auto;
    width:auto;
}
/*--*/
.wind-profile {
    height:auto;
    width:auto;
}
/*--*/
.vertical-profile {
    height:auto;
    width:auto;
}
/*--*/
/*---------------------------------*/
/*--RESPONSIVENESS-----------------*/
/*---------------------------------*/
/*---SMALLER THAN-------------------/
@media screen and (max-width:600px){

}
/*---IN BETWEEN---------------------/
@media screen and (min-width:601px) and (max-width:1024px){

}
/*---BIGGER THAN---------------------/
@media screen and (min-width:1025px){

}
-------------------------------------*/
/*---SMALLER THAN-------------------*/
@media screen and (max-width:600px){
.air-content {
    min-width:0;
}
.wind-air-qual {
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
    gap: 10px;
    width:90%;
}
    .wind {
        width:90%;
    }
        .wind-current, .wind-gust, .beaufort-scale {
            width:30%;
        }
    .air-qual {
        width:100%;
    }
    .pollutants {
        width:70%;
    }

.reference-tables {
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
}
    .aqi-ref {
        width:auto;
    }
    .beaufort-ref {
        width:80%;
    }
    .beaufort-ref table {
        width:100%;
    }



}
@media screen and (max-width:800px){
.more-air-info {
    width:100%;
}
    .more-air-info > section {
        width:90%;
        max-width:90%;
        box-sizing:border-box;
    }
    .ingredient-table,
    .ingredient-table tbody,
    .precip .air-table,
    .precip .air-table tbody,
    .solar .air-table,
    .solar .air-table tbody,
    .atmosphere .air-table,
    .atmosphere .air-table tbody {
        display:block;
        width:100%;
    }
    .ingredient-table thead,
    .precip .air-table thead,
    .solar .air-table thead,
    .atmosphere .air-table thead {
        display:none;
    }
    .ingredient-table tr,
    .precip .air-table tr,
    .solar .air-table tr,
    .atmosphere .air-table tr {
        display:grid;
        grid-template-columns:auto 1fr;
        column-gap:10px;
        padding:6px 0;
        border-bottom:1px solid #ccc;
    }
        .ingredient-table th,
        .ingredient-table td,
        .precip .air-table th,
        .precip .air-table td,
        .solar .air-table th,
        .solar .air-table td,
        .atmosphere .air-table th,
        .atmosphere .air-table td {
            padding:2px 0;
            border-bottom:none;
        }
        .ingredient-table tbody th,
        .ingredient-table .ingredient__note,
        .precip .air-table__note,
        .solar .air-table__note,
        .atmosphere .air-table__note {
            grid-column:1 / -1;
        }
        .ingredient-table .ingredient__reading {
            display:block;
            white-space:normal;
        }
}