/*reset rule*/

* {
    margin:0; padding:0;
    border:0; box-sizing: border-box;

}

/*======================================================*/
/*basic page styles*/

body {
    background-color: rgb(17, 188, 255); color:#234;
    font-family:'Oxygen',verdana,sans-serif;
    min-height: 100vh;
} 


#container {
    border: 4px solid black;
    min-height: 200vh;
    margin-top:130px;
    padding:1em;
}
    header{
        position: fixed; top:0px; left:0px;
        width:100%; min-height: 100px; background-color:#EEE; color: #222;
        box-shadow: 0px 3px 2px  #222;
    }
    
    h1 {
        font-family:'Boogaloo', cursive; text-align: center;
        letter-spacing: .2em; padding:.5em .2em; font-size:3em;
        font-weight:normal;
        text-shadow: 0px 0px 4px sandybrown;
    
    }
    header p {
        position:absolute; bottom:-60px; left:50%;
        border: 4px solid Smoke; padding: 8px;
        transform: translateX(-50%);
        padding: 16px 40px;
        background-color: #222; color:#FFC;
        outline:4px solid #FFC;
        outline-offset: -8px;
    }
    /*=====================================================*/
    /*Styles for navigation menu 1*/
    
    nav#nav1 {
        border: 8px solid darkred;
        margin:4px; padding:4px;
    }
    
    nav#nav1 ul {
        list-style-type: none; /* gets rid of bullets*/
        overflow: hidden;
        display: flex;/*makes the box flexbox parent*/
        justify-content: center;/*center the flex children*/
    
    }
    
    nav#nav1 li {
    
        border: 2px solid blue;
        margin: 4px;
       /* display: inline-block; /* one method of getting blocks side by side*/
    
    }
    
    nav#nav1 a {
        display: inline-block;/*allows block styling to my inline anchors */    
        padding: 24px 32px;
        text-decoration: none; /*get rid of default underline*/
        color: #234; font-weight: bold;
        transition: all 400ms linear;
    
    }
    
    nav#nav1 a:hover {
        background-color: green; color:black;
    }
    /*style the active pages*/
    
    #page1 #mi1, #page2 #mi2, #page3 #mi3, #page4 #mi4 {
        background-color: #070; color: #EEE;
    }
    
    
    
    
    /*=====================================================*/
    /*Styles for navigation menu 2*/
    #nav2 {
        border: 8px solid green; margin:8px; padding:8px;
        overflow: hidden;/*helps set the height if children are floating*/
    }
    
    #nav2 ul {
        list-style: none;/* gets rid of the bullets*/
        border:3px solid #007;padding: 8px;
        float:left;
    }
    #nav2 li{
        background-color:orangered
    
    
    }
    
    #nav2 a{
        display:block; width:200px; height:50px;
        background-color: #456; color:orange;
        margin-bottom:8px;
        text-align: center; 
        list-height:50px;
        text-decoration: none;
        border:4px solid #456;
        border-radius: 25px;
    }
    
    #nav2 a:hover{
        border: 4px solid darkred;
    
    }
    
    
    
    
    
    
    /*=====================================================*/
    /*Styles for navigation menu 3*/
    
    #nav3 {
        border: 8px solid orangered; 
        width: 400px; margin:8px auto; /*centers the block element*/
        height:400px;
    }
    #nav3 ul {
        background-color:pink;
        list-style:none;
        width:100%; height: 100%;
        display: flex; flex-flow:row wrap;
    }
    #nav3 li{
        flex: 1 0 50%;border:4px solid darkcyan;
      
    }
    #nav3 a{
        display: block; width:100%; height:100%;
        text-align: center; padding-top: 85px;
        text-decoration: none;
        background-image: url(../images/babes.jpg);
        background-size: 190px 200px;
        transition: background-position 500ms ease-in-out;
        color: #288;
        text-shadow: #222;
    }
    #nav3 a:hover {
        background-position: 0px -200px;
    }
    
    .bigarrow {
        display:block; width: 200px; height: 80px;
        background-image: url(../images/arrow.jpg); 
        background-size: cover;
    
    }
    .arrow{
        display:block; width: 200px; height: 100px;
        background-color: #288;
        background-image: url(../images/bigarrow.png); 
        background-size: cover;
        
    }
    
    
    /*=====================================================*/
    /*Styles for navigation menu 4*/