@charset "utf-8";


body {
    font-family: Verdana, Geneva, sans-serif;
    color: rgb(91, 91, 91);
    background-color: rgb(29, 147, 207);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    padding: 0

}

  ul {
    list-style-type: square;
}

header {
    text-align: center;
    padding: 20px;
    text-shadow: 4px 6px 5px gray;
}

a#navicon{
    display: none;
}

h1, h2 {
    font-size: 1.3em;
    text-shadow: 4px 6px 5px gray;
}

nav ul{
list-style:none;
margin: 0;
padding: 0;

}

nav a{
    text-decoration:none;
    display:block;
    background-color:rgb(150, 187, 245);
    line-height: 2.8em;
    text-decoration: none;
    text-align: center;
    color:rgb(24, 79, 230);
}
nav a:hover {
background-color: rgb(161, 245, 113);
color: ivory;
}

main > img {
    width: 25%;
    padding: 20px;
    float: right;
}

main {
  padding: 20px;
  margin-top: 35px;
}

header img {
    width: 100%;
}

body > footer{
background-color:rgba(134, 204, 232) ;
color: rgba(255,255,255,0.7);
font-weight: bold;
font-size: 0.9em; 
line-height: 3em;
text-align: center;
margin-top: 10px;
padding: 10px;
clear: both;
}

/*Flexbox styles for Vacation images*/
div.gallery{
    display: flex;
    flex-flow: wrap;
}

div.imgGallery{
    flex: 23%;
    max-width: 25%;
    padding: 0 4px;
}

div.imgGallery img{
    width: 100%;
}



/*Media Query for Styles for Tablets - screen sizes up to max-width 1100px*/  
@media only screen and (max-width:1100px){

    body {
    margin: 0;
    width: 100%;
} 

main > img{
    width: 90%;
    float: none;
}

nav li{
    display: block;
    width: 20%;
    float: left;
}

nav a{
    display: block;
    padding: 15px;
    border-bottom: 1px solid #444;
}

div.imgGallery{
flex: 48%;
max-width: 50%;
padding: 0 4px;
}



}

/* ==========================================================================
   1. GLOBAL STYLES (Applies to all screen sizes, including mobile)
   ========================================================================== */

   @media only screen and (max-width: 768px) {
main {
  padding: 20px;
  margin-top: 35px;
}


body {
    margin: 0;
    width: 100%;
}

h1, h2, h3 {
    color: #111111;
}

a {
    text-decoration: none;
    color: #0066cc;
}

nav li{
    display: block;
    width: 100%;
    float: none;
}


nav a{
    display: block;
    padding: 15px;
    border-bottom: 1px solid #444;
    flex-direction: column;
}

 
main > img{
    width: 90%;
    float: none;

}

div.imgGallery{
flex: 100%;
max-width: 100%;
padding: 0 4px;
}

a#navicon{
    display: block;
}

nav.horizontal ul{
    display: none;
}

a#navicon:hover+ul, nav.horizontal ul:hover{
    display: block;
}
}



/*Media Query for Styles for Desktops - screen sizes 769px and wider*/
@media only screen and (min-width: 769px){

html{
   background-color:rgb(27, 4, 205) center center / cover no-repeat fixed;
}
nav li{
    display: block;
    width: 20%;
    float: left;
}

}