* { box-sizing: border-box; }
body {font-family: Verdana, Arial, sans-serif;
      background-color: #0C97A4;
	  background-image: linear-gradient(to bottom, #99CCFF, #9966CC);
}
#wrapper {  background-color: #CCFFFF; 
            color: #330066; 
}

h1, h2 { color: #9966CC; }

header { background-image: url(sparkle2.jpg);
         background-repeat: no-repeat;  
         background-size: cover;	
         padding-top: 1px;		 
}
h1 { text-align: center;
	 color: #660099;
	 font-size: 300%;
	 padding-bottom: 1em;
	 text-shadow: 1px 1px #FFFFFF
}
nav {   font-size: 120%; }

nav ul { padding-left: 0;
         display: flex; 
	     flex-direction: row; 
	     flex-wrap: wrap; 
	     justify-content: space-around; }	  
nav ul { list-style-type: none; }
nav li { width: 20%;
		 min-width: 6em;
	     font-size: 110%;
		 text-align: center;
		 background-color: #9933CC; 
		 margin: .5em;
		 padding: .5em; }
nav a { text-decoration: none;}
nav a:link { color: #F7F1E3; }
nav a:visited { color: #FFB142; }
nav a:hover { color: #2C2C54; }

aside {  display: none; padding: 1em;}

main {   padding: 0 1em 1em;    }

footer { text-align: center;
		 font-style: italic;
		 padding: 1em; }
img { max-width: 100%; height: auto; }
@media (min-width: 38em) {
        #wrapper { display: grid;
            grid-template-columns: 70% 30%;
		    grid-template-rows: auto; }
	     aside { display: block; }
         header { grid-row: 1 / 2; grid-column: 1 / 3; }
         nav    { grid-row: 2 / 3; grid-column: 1 / 3; }
         main   { grid-row: 3 / 4; grid-column: 1 / 2; }
         aside  { grid-row: 3 / 4; grid-column: 2 / 3; }
         footer { grid-row: 4 / 5; grid-column: 1 / 3; }
}
@media (min-width: 65em) {
          body { margin: 0; padding: 0; } 
		  nav ul { display: flex; 
	           flex-direction: column; 
	           flex-wrap: nowrap; }
          #wrapper { display: grid;
		    width: 80%;
			margin: auto;
            grid-template-columns: 150px 1fr 30%;
		    grid-template-rows: auto; }
		  aside { display: block; }
          header { grid-row: 1 / 2; grid-column: 1 / 4; }
          nav    { grid-row: 2 / 3; grid-column: 1 / 2; }
          main   { grid-row: 2 / 3; grid-column: 2 / 3; }
          aside  { grid-row: 2 / 3; grid-column: 3 / 4; }
          footer { grid-row: 3 / 4; grid-column: 1 / 4; }
}