/*reset rule*/

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

}

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

body {
    background-color: tan; 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*/

#container1 {
  /* border: 4px solid red;*/
}

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*/