*{margin: 0;
    box-sizing: border-box;
    text-align: center;}

body{background-color: ivory;}

{font-size: calc(2px + 1.5vw);
    font-family: 'Arial', sans-serif;
    color: #0e0e0e}


/*added by sky*/
header{
    text-align: center;
    background-color: orange;
    padding-top: 1.5vh;


}
nav{
    display: block;
    background-color:orangered;
    padding: 1.5vw;
    border-style: outset;
    border-width: 1vw;
    border-color: #64BDB3;
    text-align: center

}


/*end of sky*/

@media screen and (max-width: 768px) {nav ul{
    padding-left: 0;
    flex-direction: column;
    display: flex;
    justify-content: space-around;
    list-style: block;
}
    nav ul{
        padding-left: 0;
        flex-direction: column;
        display: flex;
        justify-content: space-around;
        list-style: none;}
 }
/*He's back!*/
nav li{
    display: inline;
    padding: 1.5vw;
    margin: 3.5vw;
    border-style: inset;
    border-width: 0.5vw;
    border-color: ghostwhite;
}
/*end of sky*/
.hide{display: none;}
.obscure{display: none;}
.turbidify{display: none;}
.cloud{display: none;}

.w:hover + .hide{display: block;}
.x:hover + .obscure{display: block;}
.y:hover + .turbidify{display: block;}
.z:hover + .cloud{display: block;}

#tips{font-size: calc(2px+ 4.5vw);
color: red;}