/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
	html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	
	margin: 0;	
	padding: 0;	
	border: 0;	
	font-size: 100%;	
	font: inherit;	
	vertical-align: baseline;}
	
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	
	display: block;}
	
	body {	
	line-height: 1.5;
	}
	
	ol, ul {	
	list-style: none;
	}
	
	blockquote, q {	
	quotes: none;
	}
	
	blockquote:before, blockquote:after,q:before, q:after {	
	content: '';	
	content: none;
	}
	
	table {	
	border-collapse: collapse;	border-spacing: 0;
	}	
	
	/* end reset*/
	
	
	
	
	/* default styles*/
	/*	Double Split Complementary (Adobe; color wheel)
			#6CFA00 (main) Green
			#0CFA3F (darker) Green
			#FAF10C Yellow	
			#FA1934 (light comp) Red		
			#7019FA (dark comp)Purple	*/



	body {
			/* cursor: url(img/mouse1.jpg), default;*/
			font-family: Helvetica, Verdana, sans-serif;
			font-size: 20px;
			color:white;
		}

	#inspace {

		background: url(img/solarsystem.jpg) fixed no-repeat; 
		background-size: cover;
	}
	
	#earth {

		background: url(img/earthinspace.jpg) fixed no-repeat; 
		background-size: cover;
	}

	#mars {

		background: url(img/marsinspace.jpg) fixed no-repeat; 
		background-size: cover;
	}

	#jupiter {

		background: url(img/jupiterinspace.jpg) fixed no-repeat; 
		background-size: cover;
	}

	#saturn {

		background: url(img/saturninspace.jpg) fixed no-repeat; 
		background-size: cover;
	}

	#neptune {

		background: url(img/neptuneinspace.jpg) fixed no-repeat; 
		background-size: cover;
	}

	#wrapper {
			width: 90%;
			max-width: 1000px;
			margin:5% auto;
	}

	header {
			text-align: center;
		}
		
	#background {
		width: 100%;
	}	

	h1  {
		color: #6CFA00;
		font-family: 'Press Start 2P', cursive;
		font-size: 1.5em;
		font-weight: bold;
		text-shadow: 3px 3px #7019FA;
		}
	
	a.main:link {
		color: #6CFA00;
		text-decoration: none;
	}
	a.main:visited {
		color: #6CFA00;
	}
	a.main:hover {
		color: #FAF10C;
		text-decoration: underline;
	}

	main {
		text-align: center;
	}

	h2 {
		color: #6CFA00;
		font-family: 'Press Start 2P', cursive;
		font-size: 1em;
		text-align: center;
		text-shadow: 2px 2px #7019FA;
	}

	#alien {
		justify-content: center;
		width: 25%; 
		height: 25%;
	}
	
	img.alien:hover {
  		animation: shake 0.5s;
  		animation-iteration-count: infinite;
	}

	@keyframes shake {
	  0% { transform: translate(1px, 1px) rotate(0deg); }
	  10% { transform: translate(-1px, -2px) rotate(-1deg); }
	  20% { transform: translate(-3px, 0px) rotate(1deg); }
	  30% { transform: translate(3px, 2px) rotate(0deg); }
	  40% { transform: translate(1px, -1px) rotate(1deg); }
	  50% { transform: translate(-1px, 2px) rotate(-1deg); }
	  60% { transform: translate(-3px, 1px) rotate(0deg); }
	  70% { transform: translate(3px, 1px) rotate(-1deg); }
	  80% { transform: translate(-1px, -1px) rotate(1deg); }
	  90% { transform: translate(1px, 2px) rotate(0deg); }
	  100% { transform: translate(1px, -2px) rotate(-1deg); }
	}
	
	#truth {
		font-style: italic;
	}

	span {
		font-size: .8em;
		font-family: 'Roboto Mono', monospace;
		text-shadow: 1px 1px #7019FA;
	}

	p {
		text-align: left;
		font-size: .7em;
		font-family: 'Roboto Mono', monospace;
		text-shadow: 1px 1px #7019FA;
	}

	nav {
			font-family: 'Press Start 2P', cursive;
			display: none;
			width: auto;
			padding:1%;
			margin: 1% auto;
			border: 1px dashed #FA1934;
		}

   #ham-icon  {
    	display: block;
    	font-size: 2.5em;
    	width: auto;
    	margin: 0 auto;
    }

   #close-icon  {
    	display: block;
        border: 1px solid #FA1934;
    	font-size: 1.5em;
    	width: auto;
    	margin: 0 auto;
    }

    a.menu-icon:link, a.menu-icon:visited {
       color: #6CFA00;
       text-decoration: none;
    }

    a.menu-icon:hover, a.menu-icon:focus {
       color: #FAF10C;
    }

	nav ul {
			border: 1px dotted #FA1934;
			display: grid;
			grid-template-columns: 1fr;
			grid-gap: 1%;
		}
		
	nav li {
		display: block;
		border: 1px solid #FA1934;
		}

	
	nav li a {
			display: block;
			text-align: center;
			text-decoration: none;
			padding:1%;
			border: 1px solid #FA1934;
		}
	
	
	nav li a:link, nav li a:visited  {
			color: #000;
			background: #0CFA3F;
			border: 2px solid #FA1934;
		}
	
	nav li a:hover, nav li a:focus {
			color: #000;
			background: #FAF10C;
			border: 2px solid #FA1934;
		}

		
	.clear {
			clear: both;
			}

	footer {
		color: #6CFA00;
			text-align: center;
			position: fixed;
			bottom: 0px;
			left: 0px;
			width: 100%;
			font-size: .7em;
			font-family: 'Roboto Mono', monospace;
			text-shadow: 1px 1px #7019FA;
			padding-bottom: 1%;
			}	
	
	/* tablet styles */
	@media only screen and (min-width: 600px) and (max-width: 700px) {
	

	#wrapper {
		width:90%;
		}
			
		nav ul {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		}	

	  	nav {
			display: block !important;
		}

		#ham-icon  {
	    	display: none !important;
	    }

	    #close-icon  {
    		display: none;
          }
	
	
	}
	
	
	/* desktop styles */
	@media only screen and (min-width: 701px) {
	
		 #wrapper {
				width:80%;
			}

				
		 nav ul {
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			}

		nav {
			display: block !important;
		}

	    #ham-icon  {
	    	display: none !important;
	    }

	    #close-icon  {
    		display: none;
          }

	}