/* NAVIGATION --------- */

body {
    box-sizing:border-box;
    font: arial, helvetica, sans-serif;
    font-size: 100%;
    background-color: #F7F1DC;
    margin:auto;
    width:95%;
}
h1,h2,h3,h4{
    text-align:center;
}
h1 {
    background: #CEE3F6;
    border: .15rem solid #000000;
    padding: .5rem;
    font-size: 1rem;
}
h2 {
    color:#2E64FE;
    font-size:2em;
}
.nav li {
    border:.05em solid red;
}
ul.nav {
    overflow: hidden;
    padding: .25em 0em;
}
ul.submenu{
    overflow:visible;
}
.nav,
.submenu{
    background-color: #29088A;
    list-style: none;
    font-size: 1.5rem;
}
.nav li {
    float: left;
    padding: .25em .75em;
    text-align:center;
}
.nav a {
    color: #F2F5A9;
    font-weight: bold;
    display: block;
    text-decoration: none;
}
.nav a:hover{
    color: #aabadd;
}

/* Navigation Submenus (the dropdowns) */
.nav .submenu {
    margin-left: -.625em;
    padding: .625em .625em .625em .9375em;
    left: -999em; /* hide a submenu offscreen by default so visitors don't see it */
    position: absolute;
    z-index: 1000;
}
.nav li:hover .submenu {
    left: auto; /* show the submenu when user hovers over the parent li */
    width: auto;
    margin-left: -.3em;
}

.nav .submenu li {
    float: none;
    font-size: .875em;
    margin-top: .5em;
    width: auto;
    margin-left: -.3em;
}
@media only screen and (orientation:portrait){
    .nav li {
        width: 3.9em;
    }
}
@media only screen and (min-width:375px)and (min-height:667px) and (orientation:portrait){
    .nav li {
        width: 5em;
    }
}
@media only screen and (min-width:414px)and (min-height:736px) and (orientation:portrait){
    .nav li {
        width: 5.8em;
    }
}
@media only screen and (min-width:375px)and (min-height:812px) and (orientation:portrait){
    .nav li {
        width: 5em;
    }
}
@media only screen and (min-width:600px)and (min-height:800px) and (orientation:portrait){
    h1{
        font-size:2rem;
    }
    .nav li {
        width: 6.7em;
    }
    .nav,
    .submenu{
        font-size: 1em;
    }
}
@media only screen and (min-width:768px) and (min-height:1024px) and (orientation:portrait){
    .nav li {
        width: 9.2em;
    }
}
@media only screen and (min-width:1024px) and (min-height:1366px) and (orientation:portrait){
    .nav li {
        width: 5.6em;
    }
}
@media only screen and (min-width:1080px)and (min-height:1920px) and (orientation:portrait){
    .nav li {
        width: 6.2em;
    }
}
@media only screen and  (orientation:landscape){
    .nav li {
        width: 3.6em;
    }
}
@media only screen and (min-width:667px)and (min-height:375px) and (orientation:landscape){
    .nav li {
        width: 4.6em;
    }
}
@media only screen and (min-width:736px)and (min-height:414px) and (orientation:landscape){
    .nav li {
        width: 5.2em;
    }
}
@media only screen and (min-width:812px)and (min-height:375px) and (orientation:landscape){
    .nav li {
        width: 6em;
    }
}
@media only screen and (min-width:800px)and (min-height:600px) and (orientation:landscape){
    h1{
        font-size:2rem;
    }
    .nav li {
        width: 9.7em;
    }
    .nav,
    .submenu{
        font-size: 1em;
    }
}
@media only screen and (min-width:1024px)and (min-height:768px) and (orientation:landscape){
    .nav li {
        width: 5.6em;
    }
}
@media only screen and (min-width:1366px)and (min-height:1024px) and (orientation:landscape){
    .nav li {
        width: 8.3em;
    }
}
@media only screen and (min-width:1600px)and (min-height:900px) and (orientation:landscape){
    .nav li {
        width: 10.2em;
    }
}
@media only screen and (min-width:1920px)and (min-height:1080px) and (orientation:landscape){
    .nav li {
        width: 12.4em;
    }
}