/*----------------------------*/
body.show-outlines * {outline: 2px dotted black;}
#toggle-outlines {background-color: red;}
html {background-color:black;}
body {background-color:whitesmoke;}
footer span {color:rgb(255, 0, 0);}
:root {
    --wx-line: rgba(128, 128, 128, 0.4);
}
/*----------------------------*/
html, body {
    min-height: 100%;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
/*----------------------------*/
/*---0.nav------------------*/
nav {
    display:flex;
    flex-direction:row;
    gap:10px;
    height:auto;
}
/*---------*/
/*---1.content header------------------*/
.content-header {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:90%;
    height:auto;
}
    .content-header h1 {
        padding:0;
    }
.wx-context {
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:auto;
    padding:10px;
    border-radius:4px;
}
/*---------*/
.content {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
}
    .index-content,
    .weather-content,
    .water-content,
    .air-content {
        display:flex;
        flex-direction:column;
        align-items:center;
        min-height:100%;
        width:100%;
        max-width:1200px;
    }
/*---credit------------------*/
.credit {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    margin-bottom:10px;
    margin-top:10px;
    padding-left:10px;
    padding-right:10px;
}
/*----------------------------------*/      
footer {
    display:flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 50px;
    padding-left:10px;
}
    footer button {
        margin-left:20px;
    }
    footer span {
        font-size: 1em;
        font-weight: bold;
    }
/*----------------------------*/

/*--/content-------------------*/
/*--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:500px){
nav {
    justify-content:space-around;
    font-size:x-large;
    gap:20px;
}
}