body {background-color: #000000; 
      
      color: #ffffff;
      font-family: Arial, Helvetica, sans-serif; }

#wrappper{ 
          background-image:linear-gradient(to bottom, #000000, #000000) ;
	  background-color: #90c7e3;
	  background-repeat: no-repeat;
	  }
header   {
background-color: #ffffff; 
background-image:url(logo.jpg);
      	  background-repeat: no-repeat;
      	  background-position: left;
	  height: 100px; 
	  padding-top: 15px;
      	  color:#000000;
	  text-align: center;


      	  
	 }
header a {text-decoration: none;
color: #000000;}

header a:link{color: white}
header a:visited {color: black;}
header a:hover {color:90c7e3; }

h1  {margin-bottom: 0;
     margin-top: 0;
     font-family: Georgia, "Times New Roman",serif; 
     letter-spacing: 0.25em;
     padding-top: 0.5em;
     padding-bottom: 0.5em;}

nav  { 
      font-weight: bold;
      font-size: 120%;
      padding: 0;
      text-align: center;
      }

nav a {text-decoration: none;
       padding-left: .5em
       padding-right: .5em }

nav ul{list-style: none;
       margin: 0;
       padding-left: 0;
       font-size: 1.2em;
       }
nav li{
       border-bottom: 1px solid black;
       }

nav a:link{
           color: #FFFFFF;
}

nav a:visited{
              color: #FFFFFF;}

nav a:hover{color: #FFFFFF;
           }

main  {
       padding:1px 20px 20px 30px;
       display: block;
       overflow:auto;
       background-color: #000000;
       }
main ul{
       list-style-image:url(marker.gif)}



h2   {color:#FFFFFF; font-family: Georgia, "Times New Roman",serif;
      text-shadow: 1px 1px 1px #cccccc; }

h3 {font-family: Georgia, "Times New Roman",serif; color:#FFFFFF;}
h4 {font-family: Georgia, "Times New Roman",serif; color:#FFFFFF;}

.scrollable {
font-weight: bold;
margin: 4px 4px;
padding: 4px;
background-color: #0096FF;
width: 330px;
height: 200px;
overflow-y: auto;
text-align: justify;
}

dt   {color:#000000; }


.resort {color:#1976D2; font-weight: bold;  }

.image-container{position: relative;}
.image-name{
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.5);
color:white;
text-align: center;
padding: 10px;
}

.quiz-container{
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
width: 600px
overflow:hidden;
}

.quiz-header{
padding: 4rem;
}

button{
background-color: #03cae4;
color:#fff;
border: none;
display: block;
width: 100%;
cursor: pointer;
font-size: 1.1rem;
font-family: inherit;
padding: 1.3rem;
}

button:hover {
background-color: #04adc4;
}

button:focus {
outline: none;
background-color: #44b927;
}
            
#stylehero {
           height: 300px;
           background-image: url(stylepic.jpg);
           background-size: 100% 100%; 
           background-repeat: no-repeat;
}
#makeuphero { 
             height: 300px;
             background-image: url(makeuppic.jpg);
             background-size: 100% 100%;
             background-repeat: no-repeat;


}

footer { 
        padding: 2em; 
        color: black;
        background-color: white;
        font-family: Georgia, "Times New Roman",serif; 
	font-size: 75%
	font-style: italic;
	text-align: center; 
}
table{
border-spacing: 0;
border: 2px solid #3399CC;
border-collapse: collapse;
}

td, th {
padding: 0.5em;
border: 2px solid #3399CC;
}

td {
text-align: center;}

.text{
text-align: left;
}

tr: nth-of-type(odd) {
background-color: #F5FAFC;

}




@media (min-width: 600px) {

nav ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;}

nav li {
border-bottom: none;}

section {
margin-left: 2em;
margin-right: 2em;
flex: 1;}

.flow {
display: flex;
flex-direction: row;}
}

@media (min-width: 1024px;) {
#wrapper {
margin: auto;
width: 80%;
border: 1px solid darkblue;
box-shadow: 3px 3px darkblue;}

nav {
text-align: left;
padding-left: 1em;}

@supports (display: grid) {

nav ul {
flex-direction: column;
padding-top: 1em;
text-align: left;}

header {grid-area: header;}
nav {grid-area: nav;}
main {grid-area: main;}
footer {grid-area: footer;}
.hero {grid-area: hero;}

#wrapper {
display: grid;
grid-template:
"header header"
"nav hero"
"nav main"
"nav footer" / 180px}
}
}