* { box-sizing: border-box; }
body{ background-color: #90C7E3; color: #666666; margin: 0;  
    font-family: Verdana, Arial, sans-serif; 
    }
header {background-color: #002171; 
        color: #FFFFFF;
        font-family: Georgia, 'Times New Roman', Paltino, serif;
        padding: 1em;
        }
    header a{text-decoration: none ;}
    header a:link{color: #FFFFFF;}
    header a:visited{color:#FFFFFF}
    header a:hover{color:#90c7e3;}
    
h1{text-align: center;  font-size:1.5em; color: #d2191d; }
h2{color:#1976D2;font-family: Georgia, 'Times New Roman', Paltino, serif; }
h3{font-family: Georgia, 'Times New Roman', Paltino, serif;  }

nav ul {display: flex; flex-direction: column; margin: 0; padding-left: 0;}
nav li {padding: .5em 1em .5em 1em; 
        width: 100%; border:solid 1px;} 
nav a{text-decoration:none;} 
nav a:link{color:#5c7fa3;}
nav a:visited{color:#344873;}
nav a:hover{color:#A52A2A;}
nav{  background-color: #ffffff;
    text-align: center;
       font-size: 1.2em;  
        }

main{display:block;  padding: 0em 1em 0em 1em;}
section{ padding: 0 0.5em 0 0.5em; } 
dt{color:#1976d2;font-weight: bold;}
footer{font-size: .7em;font-style: italic;text-align: center;padding: 1em;background-color: #FFFFFF;}

.resort{color:#1976d2; font-size: 1.2em;}
.float{float: left; background-color: #DDC3A2;font-family: Verdana, sans-serif; padding:20px;}

#homehero{ height: 300px; background-image: url(images/coast.jpg);background-size: 200%,100%;background-repeat:
         no-repeat;}
#yurthero{ height: 300px; background-image: url(images/yurt.jpg);background-size: 200%,100%;background-repeat:
            no-repeat;}
#trailhero{ height: 300px; background-image: url(images/trail.jpg);background-size: 200%,100%;background-repeat:
                no-repeat;}
#wrapper{ 
            background-color: #FFFFFF;
         /*   min-width: 960px; max-width: 2048px;
            margin-left: auto; margin-right: auto; */
        }

@media (width < 481px) 
    {
    #mobile{display: inline}
    #desktop{display: none}
    .resort{color:#d2191d;}
    } 
@media (width > 480px) 
    {
    #mobile{display: none}
    #desktop{display: inline}
    .resort{color:#19d288e2;}  
    }


@media (width > 599px)
    {
    h1{ font-size:4em; letter-spacing: .25em;}
    nav ul {display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        padding: 0 2em 0 0;
        list-style: none;  }
    nav li{ width: 12em;
        border-bottom: none;}
    section{ padding: 0, 2em, 0, 2em}
    #flow {display: flex; flex-direction: row;}
    /* #mobile{display: none}
    #desktop{display: inline}
    does the entire id recode or just the change */
    #homehero{background-size: 100%,100%;}
    #yurthero{background-size: 100%,100%;}
    #trailhero{background-size: 100%,100%;}
    }
@media (width > 1023px)
    {
    body{background-image:linear-gradient(to bottom, #FFFFFF 20%, #90C7E3 60%, #FFFFFF 100%) ;}
    nav ul{padding: 0 10% 0 10%;}
    #wrapper{width:80%; margin:0 auto}
    .resort{color:#ecd318;}
    }