  * {
    	margin: 0px;
    	padding: 0px;
    	border: 0px none;
    }
    
    body {
	    background-color: black;
    }
    
   #scene {
	   width: 100%;
	   overflow: hidden;
	   background-color: black;
	   position: absolute;
	   z-index: -2;
	   max-height: 14100px;
   }
   
   #scene img {
	   width: 100%;
   }
   
   #wrapper {
	   margin: 0px auto;
	   width: 100%;
	   height: auto;
	   overflow: hidden;
   }
   
/*    sun */
   
   #sun {
	   position: relative;
	   width: 100vw;
	   height: 140vh;
	   overflow: hidden;
	   background: transparent;
   }
   
   #sun img {
	   width: 250vw;
	   height: auto;
	   margin-top: -180%;
	   margin-left: -75%;
   }
   
   #sun_text {
	   position: absolute;
	   z-index: 2;
	   color: white;
	   background-color: #191919;
	   top: 0;
	   padding: 5%;
	   border-radius: 60px;
	   margin-left: 22.5%;
	   margin-top: 5%;
   }
   
   #sun_header {
	   font-family: boldbold, Arial, sans-serif;
	   font-size: 4vw;
	   margin-bottom: 6%;
   }
   
   #sun_paragraph {
	   font-family:  azo-sans-web, sans-serif;
	   font-size: 1.2vw;
	   width: 44vw;
   }
   
   #sun_paragraph a {
	   text-decoration: underline;
	   color: white;
	   cursor: pointer;
   }
   
   #sun_paragraph a:hover {
	   text-decoration: none;
	   background-color: #bcbcbc;
	   color: #191919;
	   cursor: pointer;
   }
   
/*    sun */
   
   
/*    mercury */

   #mercury_section {
	   margin-top: 30vh;
	   width: 100vw;
	   height: 100vh;
	   position: relative;
   }
   
   #satelite {
	   width: 10vw;
	   float: left;
	   transform: rotate(-24.86deg);
	   margin-left: 5vw;
	   margin-top: 35vh;
   }
   
   #satelite:hover {
	   border-radius: 20%;
	   background-color: #1f1f1f;
	   box-shadow:
        0 0 50px 50px #222222;
   }
   
   .satelite_animation {
	   animation-name: sat_click;
	   animation-direction: linear;
	   animation-iteration-count: 1;
	   animation-duration: 3s;
   }
   
   @keyframes sat_click {
	   0% {
		   width: 10vw;
		   float: left;
		   transform: rotate(-24.86deg);
		   margin-left: 5vw;
		   margin-top: 35vh; 
	   }
	   
	   100% {
		   width: 10vw;
		   float: left;
		   transform: rotate(-384.86deg);
		   margin-left: 5vw;
		   margin-top: 35vh;
	   }
   }
   
   .planet_one_content_off {
	   display: none;
	   position: absolute;
   }
   
   .planet_one_content_on {
	   display: inherit;
	   position: absolute;
	   
   }
   
   .mercury_position_one {
	   width: 15vw;
	   margin-left: 27vw;
	   margin-top: 10vh;
	   float: left;
   }
   
   .mercury_position_two {
	   width: 100%;
	   margin-top: -50vh;
	   float: left;
   }
   
   #mercury_title {
	   width: 12vw;
	   float: left;
	   margin-left: 2vw;
	   margin-top: 10vh;
   }
   
   #mercury_header {
	   color: white;
	   font-family: boldbold, Arial, sans-serif;
	   font-size: 4vw;
	   margin-bottom: -4px;
   }
   
   #mercury_section button {
	   font-family: boldbold, Arial, sans-serif;
	   color: #191919;
	   background-color: white;
	   font-size: 1vw;
	   padding: 5% 12% 5% 12%;
	   border-radius: 30px;
	   width: 13vw;
	   
   }
   
   
   
   .byebye {
	   display: none;
	   position: absolute;
   }
   
   #planet_one_content {
	  background-color: #191919;
	  border-radius: 30px;
	  width: 50vw;
	  padding-top: 3%;
	  padding-left: 5%;
	  padding-right: 5%;
	  margin-left: 20vw;
	  margin-top: 1vh;
   }
   
   #mercury_information_header {
	  font-family: boldbold, Arial, sans-serif;
	  font-size: 4vw;
	  margin-bottom: 6%;
	  color: white;
	  float: left;
   }
   
   #mercury_information_paragraph {
	  font-family:  azo-sans-web, sans-serif;
	  font-size: 1.2vw;
	  color: white;
	  float: left;
   }
   
   #mercury_facts {
	  background-color: #585858;
	  padding-left: 5%;
	  padding-right: 5%;
	  padding-top: 4%;
	  border-bottom-left-radius: 30px;
	  border-bottom-right-radius: 30px;
	  width: 55vw;
	  margin-left: -5vw;
	  height: 14vh;
	  margin-top: 65px;
	  text-align: center;
	  float: left;
   }
   
   .facts {
	   float: left;
   }
   
   .facts h3 {
	   font-family: boldbold, Arial, sans-serif;
	   color: white;
	   font-size: 2vw;
	   margin-bottom: 1vh;
   }
   
   .facts p {
	   font-family:  azo-sans-web, sans-serif;
	   color: white;
	   font-size: 1vw;
   }
   
   #mercury_fact_one {
	   margin-left: 2.7vw;
   }
   
   #mercury_fact_two {
	   margin: 0vw 8vw 0vw 8vw;
   }
   
   #mercury_fact_three {
	   
   }
   
   #close {
	   width: 2vw;
	   float: right;
	   margin-top: 1.5vh;
   }
   
   
/*    mercury */

/*    venus */
   
   #venus_section {
	   margin-top: 30vh;
	   width: 100vw;
	   height: 100vh;
	   position: relative;
   }
   
   .planet_two_content_off {
	   display: none;
	   position: absolute;
   }
   
   .planet_two_content_on {
	   display: inherit;
	   position: absolute;
   }
   
   .venus_one {
	   width: 23vw;
	   margin-left: 3vw;
	   margin-top: 10vh;
	   float: left;
   }
   
   .venus_two {
	   width: 100%;
	   margin-top: -40vh;
	   float: left;
   }
   
   #venus_title {
	   width: 12vw;
	   float: left;
	   margin-left: 23vw;
	   margin-top: 10vh;
   }
   
   #venus_header {
	   color: white;
	   font-family: boldbold, Arial, sans-serif;
	   font-size: 4vw;
	   margin-bottom: -4px;
   }
   
   #venus_section button {
	   font-family: boldbold, Arial, sans-serif;
	   color: #191919;
	   background-color: white;
	   font-size: 1vw;
	   padding: 5% 12% 5% 12%;
	   border-radius: 30px;
	   width: 13vw;
   }
   
   .byebye_venus {
	   display: none;
	   position: absolute;
   }
   
   #planet_two_content {
	  background-color: #191919;
	  border-radius: 30px;
	  width: 50vw;
	  padding-top: 3%;
	  padding-left: 5%;
	  padding-right: 5%;
	  margin-left: 20vw;
	  margin-top: 13vh;
   }
   
   #venus_information_header {
	  font-family: boldbold, Arial, sans-serif;
	  font-size: 4vw;
	  margin-bottom: 6%;
	  color: white;
	  float: left;
   }
   
   #venus_information_paragraph {
	  font-family:  azo-sans-web, sans-serif;
	  font-size: 1.2vw;
	  color: white;
	  float: left;
   }
   
   #venus_facts {
	  background-color: #585858;
	  padding-left: 5%;
	  padding-right: 5%;
	  padding-top: 4%;
	  border-bottom-left-radius: 30px;
	  border-bottom-right-radius: 30px;
	  width: 55vw;
	  margin-left: -5vw;
	  height: 14vh;
	  margin-top: 65px;
	  text-align: center;
	  float: left;
   }
   
   .facts {
	   float: left;
   }
   
   .facts h3 {
	   font-family: boldbold, Arial, sans-serif;
	   color: white;
	   font-size: 2vw;
	   margin-bottom: 1vh;
   }
   
   .facts p {
	   font-family:  azo-sans-web, sans-serif;
	   color: white;
	   font-size: 1vw;
   }
   
   #venus_fact_one {
	   margin-left: 2.7vw;
   }
   
   #venus_fact_two {
	   margin: 0vw 8vw 0vw 8vw;
   }
   
   #venus_fact_three {
	   
   }
   
   #close {
	   width: 2vw;
	   float: right;
	   margin-top: 1.5vh;
   }
   
   #walle {
	   transform: rotate(18.76deg);
	   width: 8vw;
	   margin-left: 10vw;
	   margin-top: -15vh;
	   float: left;
	   animation-name: walle_move;
	   animation-direction: linear;
	   animation-iteration-count: infinite;
	   animation-duration: 10s;
	   animation-timing-function: ease-in-out;
	   
   }
   
   @keyframes walle_move {
	   0% {
		   transform: rotate(18.76deg);
		   width: 8vw;
		   margin-left: 10vw;
		   margin-top: -15vh;
	   }
	   
	   20% {
		   transform: rotate(15deg);
		   width: 8vw;
		   margin-left: 9vw;
		   margin-top: -15vh;
	   }
	   
	   30% {
		   transform: rotate(10deg);
		   width: 8vw;
		   margin-left: 8vw;
		   margin-top: -12vh;
	   }
	   
	   40% {
		   transform: rotate(6deg);
		   width: 8vw;
		   margin-left: 8vw;
		   margin-top: -9vh;
	   }
	   
	   50% {
		   transform: rotate(4deg);
		   width: 8vw;
		   margin-left: 5vw;
		   margin-top: -13vh;
	   }
	   
	   60% {
		   transform: rotate(9deg);
		   width: 8vw;
		   margin-left: 7vw;
		   margin-top: -15vh;
	   }
	   
	   70% {
		   transform: rotate(15deg);
		   width: 8vw;
		   margin-left: 11vw;
		   margin-top: -17vh;
	   }
	   
	   80% {
		   transform: rotate(378.76deg);
		   width: 8vw;
		   margin-left: 13vw;
		   margin-top: -18vh;
	   }
	   
	   90% {
		   transform: rotate(200.76deg);
		   width: 8vw;
		   margin-left: 12vw;
		   margin-top: -16vh;
	   }
	   
	   100% {
		   transform: rotate(18.76deg);
		   width: 8vw;
		   margin-left: 10vw;
		   margin-top: -15vh;
	   }
   }
   
/*    VENUS */

/*    EARTH */
   
   #earth_section {
	   margin-top: 30vh;
	   width: 100vw;
	   height: 100vh;
	   position: relative;
   }
   
   .planet_three_content_off {
	   display: none;
	   position: absolute;
   }
   
   .planet_three_content_on {
	   display: inherit;
	   position: absolute;
   }
   
   .earth_one {
	   width: 26vw;
	   margin-left: 34.5vw;
	   margin-top: 10vh;
	   float: left;
   }
   
   .earth_two {
	   width: 100%;
	   margin-top: -35vh;
	   float: left;
   }
   
   #earth_title {
	   width: 12vw;
	   float: left;
	   margin-left: 10vw;
	   margin-top: 30vh;
   }
   
   #earth_header {
	   color: white;
	   font-family: boldbold, Arial, sans-serif;
	   font-size: 4vw;
	   margin-bottom: -4px;
   }
   
   #earth_section button {
	   font-family: boldbold, Arial, sans-serif;
	   color: #191919;
	   background-color: white;
	   font-size: 1vw;
	   padding: 5% 12% 5% 12%;
	   border-radius: 30px;
	   width: 13vw;
   }
   
   .byebye_earth {
	   display: none;
	   position: absolute;
   }
   
   #planet_three_content {
	  background-color: #191919;
	  border-radius: 30px;
	  width: 50vw;
	  padding-top: 3%;
	  padding-left: 5%;
	  padding-right: 5%;
	  margin-left: 20vw;
	  margin-top: 13vh;
   }
   
   #earth_information_header {
	  font-family: boldbold, Arial, sans-serif;
	  font-size: 4vw;
	  margin-bottom: 6%;
	  color: white;
	  float: left;
   }
   
   #earth_information_paragraph {
	  font-family:  azo-sans-web, sans-serif;
	  font-size: 1.2vw;
	  color: white;
	  float: left;
   }
   
   #earth_facts {
	  background-color: #585858;
	  padding-left: 5%;
	  padding-right: 5%;
	  padding-top: 4%;
	  border-bottom-left-radius: 30px;
	  border-bottom-right-radius: 30px;
	  width: 55vw;
	  margin-left: -5vw;
	  height: 14vh;
	  margin-top: 65px;
	  text-align: center;
	  float: left;
   }
   
   .facts {
	   float: left;
   }
   
   .facts h3 {
	   font-family: boldbold, Arial, sans-serif;
	   color: white;
	   font-size: 2vw;
	   margin-bottom: 1vh;
   }
   
   .facts p {
	   font-family:  azo-sans-web, sans-serif;
	   color: white;
	   font-size: 1vw;
   }
   
   #earth_fact_one {
	   margin-left: 2.7vw;
   }
   
   #earth_fact_two {
	   margin: 0vw 8vw 0vw 8vw;
   }
   
   #earth_fact_three {
	   
   }
   
   #close {
	   width: 2vw;
	   float: right;
	   margin-top: 1.5vh;
   }  
   
   #sputnik {
	   position: absolute;
	   width: 3vw;
	   left: 46vw;
	   top: 17vw;
	   animation: orbit 10s linear infinite;
   } 
   
   #moon {
	   position: absolute;
	   width: 4vw;
	   left: 46vw;
	   top: 17vw;
	   animation: orbit2 10s linear infinite;
   }
   
   @keyframes orbit {
		from { 	transform: rotate(0deg) translateX(-300px) rotate(-90deg); }
		to   {  transform: rotate(360deg) translateX(-300px) rotate(-90deg); }
	}
   
   @keyframes orbit2 {
		from { 	transform: rotate(0deg) translateX(300px) rotate(0deg); }
		to   {  transform: rotate(360deg) translateX(300px) rotate(-360deg); }
	}
/*    EARTH */

/*    MARS */
   
   #mars_section {
	   margin-top: 30vh;
	   width: 100vw;
	   height: 100vh;
	   position: relative;
   }
   
   .planet_four_content_off {
	   display: none;
	   position: absolute;
   }
   
   .planet_four_content_on {
	   display: inherit;
	   position: absolute;
   }
   
   .mars_one {
	   width: 25vw;
	   margin-left: 2vw;
	   margin-top: 10vh;
	   float: left;
   }
   
   .mars_two {
	   width: 100%;
	   margin-top: -40vh;
	   float: left;
   }
   
   #mars_title {
	   width: 12vw;
	   float: left;
	   margin-left: 22vw;
	   margin-top: 10vh;
   }
   
   #mars_header {
	   color: white;
	   font-family: boldbold, Arial, sans-serif;
	   font-size: 4vw;
	   margin-bottom: -4px;
   }
   
   #mars_section button {
	   font-family: boldbold, Arial, sans-serif;
	   color: #191919;
	   background-color: white;
	   font-size: 1vw;
	   padding: 5% 12% 5% 12%;
	   border-radius: 30px;
	   width: 13vw;
   }
   
   .byebye_mars {
	   display: none;
	   position: absolute;
   }
   
   #planet_four_content {
	  background-color: #191919;
	  border-radius: 30px;
	  width: 50vw;
	  padding-top: 3%;
	  padding-left: 5%;
	  padding-right: 5%;
	  margin-left: 20vw;
	  margin-top: 13vh;
   }
   
   #mars_information_header {
	  font-family: boldbold, Arial, sans-serif;
	  font-size: 4vw;
	  margin-bottom: 6%;
	  color: white;
	  float: left;
   }
   
   #mars_information_paragraph {
	  font-family:  azo-sans-web, sans-serif;
	  font-size: 1.2vw;
	  color: white;
	  float: left;
   }
   
   #mars_facts {
	  background-color: #585858;
	  padding-left: 5%;
	  padding-right: 5%;
	  padding-top: 4%;
	  border-bottom-left-radius: 30px;
	  border-bottom-right-radius: 30px;
	  width: 55vw;
	  margin-left: -5vw;
	  height: 14vh;
	  margin-top: 65px;
	  text-align: center;
	  float: left;
   }
   
   .facts {
	   float: left;
   }
   
   .facts h3 {
	   font-family: boldbold, Arial, sans-serif;
	   color: white;
	   font-size: 2vw;
	   margin-bottom: 1vh;
   }
   
   .facts p {
	   font-family:  azo-sans-web, sans-serif;
	   color: white;
	   font-size: 1vw;
   }
   
   #mars_fact_one {
	   margin-left: 2.7vw;
   }
   
   #mars_fact_two {
	   margin: 0vw 8vw 0vw 8vw;
   }
   
   #mars_fact_three {
	   
   }
   
   #close {
	   width: 2vw;
	   float: right;
	   margin-top: 1.5vh;
   }   
   
   #rocket {
	   height: 5vh;
	   top: 50vh;
	   left: 0vh;
	   position: absolute;
	   animation-name: rocketzoom;
	   animation-direction: linear;
	   animation-duration: 5s;
	   animation-iteration-count: infinite;
	   
   }
   
      @keyframes rocketzoom {
	  from { 
		  left: -5px;
		  transform: rotate(0deg) translateX(25px) rotate(0deg); }
		  
		to   {  
			left: 1500px;
			transform: rotate(50deg) translateX(600px) rotate(-50deg); }
   }
/*    MARS */

/*    BELT OF ASTEROIDS */
   
   #belt_section {
	   margin-top: 30vh;
	   width: 100vw;
	   height: 120vh;
	   position: relative;
	   background-image: url("images/asteroid_belt.png");
	   background-repeat: no-repeat;
	   background-size: cover;
   }
   
   .belt_content_off {
	   display: none;
	   position: absolute;
   }
   
   .belt_content_on {
	   display: inherit;
	   position: absolute;
   }
   
   .belt_one {
	   width: 15vw;
	   margin-left: 41vw;
	   margin-top: 40vh;
	   float: left;
   }
   
   .belt_two {
	   width: 100%;
	   margin-top: -40vh;
	   float: left;
   }
   
   #belt_title {
	   width: 32vw;
	   float: left;
	   margin-left: 32.5vw;
	   margin-top: 3vh;
	   margin-bottom: 2vh;
	   text-align: center;
   }
   
   #belt_header {
	   color: white;
	   font-family: boldbold, Arial, sans-serif;
	   font-size: 4vw;
	   margin-bottom: -4px;
   }
   
   #belt_section button {
	   font-family: boldbold, Arial, sans-serif;
	   color: #191919;
	   background-color: white;
	   font-size: 1vw;
	   padding: 2% 2% 2% 2%;
	   border-radius: 30px;
	   width: 21vw;
   }
   
   .byebye_belt {
	   display: none;
	   position: absolute;
   }
   
   #belt_content {
	  background-color: #191919;
	  border-radius: 30px;
	  width: 50vw;
	  padding-top: 3%;
	  padding-left: 5%;
	  padding-right: 5%;
	  margin-left: 20vw;
	  margin-top: 37vh;
   }
   
   #belt_information_header {
	  font-family: boldbold, Arial, sans-serif;
	  font-size: 4vw;
	  margin-bottom: 6%;
	  color: white;
	  float: left;
   }
   
   #belt_information_paragraph {
	  font-family:  azo-sans-web, sans-serif;
	  font-size: 1.2vw;
	  color: white;
	  float: left;
   }
   
   #belt_facts {
	  background-color: #585858;
	  padding-left: 5%;
	  padding-right: 5%;
	  padding-top: 4%;
	  border-bottom-left-radius: 30px;
	  border-bottom-right-radius: 30px;
	  width: 55vw;
	  margin-left: -5vw;
	  height: 14vh;
	  margin-top: 65px;
	  text-align: center;
	  float: left;
   }
   
   .facts {
	   float: left;
   }
   
   .facts h3 {
	   font-family: boldbold, Arial, sans-serif;
	   color: white;
	   font-size: 2vw;
	   margin-bottom: 1vh;
   }
   
   .facts p {
	   font-family:  azo-sans-web, sans-serif;
	   color: white;
	   font-size: 1vw;
   }
   
   #belt_fact_one {
	   margin-left: 2.7vw;
   }
   
   #belt_fact_two {
	   margin: 0vw 11vw 0vw 11vw;
   }
   
   #belt_fact_three {
	   
   }
   
   #close {
	   width: 2vw;
	   float: right;
	   margin-top: 1.5vh;
   }   
/*    BELT OF ASTEROIDS */

/*    JUUUUUPITER */
   
   #jupiter_section {
	   margin-top: 30vh;
	   width: 100vw;
	   height: 100vh;
	   position: relative;
   }
   
   .planet_five_content_off {
	   display: none;
	   position: absolute;
   }
   
   .planet_five_content_on {
	   display: inherit;
	   position: absolute;
   }
   
   .jupiter_one {
	   width: 50vw;
	   margin-left: 5vw;
	   margin-top: 10vh;
	   float: left;
   }
   
   .jupiter_two {
	   width: 100%;
	   margin-top: -40vh;
	   float: left;
   }
   
   #jupiter_title {
	   width: 12vw;
	   float: left;
	   margin-left: 7vw;
	   margin-top: 25vh;
   }
   
   #jupiter_header {
	   color: white;
	   font-family: boldbold, Arial, sans-serif;
	   font-size: 4vw;
	   margin-bottom: -4px;
   }
   
   #jupiter_section button {
	   font-family: boldbold, Arial, sans-serif;
	   color: #191919;
	   background-color: white;
	   font-size: 1vw;
	   padding: 5% 12% 5% 12%;
	   border-radius: 30px;
	   width: 13vw;
   }
   
   .byebye_jupiter {
	   display: none;
	   position: absolute;
   }
   
   #planet_five_content {
	  background-color: #191919;
	  border-radius: 30px;
	  width: 50vw;
	  padding-top: 3%;
	  padding-left: 5%;
	  padding-right: 5%;
	  margin-left: 20vw;
	  margin-top: 60vh;
   }
   
   #jupiter_information_header {
	  font-family: boldbold, Arial, sans-serif;
	  font-size: 4vw;
	  margin-bottom: 6%;
	  color: white;
	  float: left;
   }
   
   #jupiter_information_paragraph {
	  font-family:  azo-sans-web, sans-serif;
	  font-size: 1.2vw;
	  color: white;
	  float: left;
   }
   
   #jupiter_facts {
	  background-color: #585858;
	  padding-left: 5%;
	  padding-right: 5%;
	  padding-top: 4%;
	  border-bottom-left-radius: 30px;
	  border-bottom-right-radius: 30px;
	  width: 55vw;
	  margin-left: -5vw;
	  height: 14vh;
	  margin-top: 65px;
	  text-align: center;
	  float: left;
   }
   
   .facts {
	   float: left;
   }
   
   .facts h3 {
	   font-family: boldbold, Arial, sans-serif;
	   color: white;
	   font-size: 2vw;
	   margin-bottom: 1vh;
   }
   
   .facts p {
	   font-family:  azo-sans-web, sans-serif;
	   color: white;
	   font-size: 1vw;
   }
   
   #jupiter_fact_one {
	   margin-left: 2.7vw;
   }
   
   #jupiter_fact_two {
	   margin: 0vw 8vw 0vw 8vw;
   }
   
   #jupiter_fact_three {
	   
   }
   
   #close {
	   width: 2vw;
	   float: right;
	   margin-top: 1.5vh;
   }   
   
   .animationtwo {
	   height: 30vh;
	   width: 100vw;
	   position: relative;
	   overflow: hidden;
   }
   
   .ufo {
	   width: 4vw;
	   float: left;
	   top: 10vh;
	   left: 0vw;
	   animation: zoomies;
	   position: absolute;
	   z-index: -1;
	   animation-direction: linear;
	   animation-duration: 5s;
	   animation-iteration-count: infinite;
   }
   
   @keyframes zoomies {
	  from { 
		  left: -20px;
		  transform: rotate(0deg) translateX(25px) rotate(0deg); }
		  
		to   {  
			left: 2000px;
			transform: rotate(50deg) translateX(300px) rotate(-100deg); }
   }
   
   .spaceman {
	   height: 12vh;
	   float: left;
	   margin-top: 50vh;
	   margin-left: 20vw;
	   transform: rotate(-40deg);
	   position: relative;
	   width: 40px;
   }
   
   #spaceman_body {
	   position: absolute;
	   transform: rotate(38deg);
	   top: 20px;
	   width: 70px;
	   left: -9px;
   }
   
   #spaceman_arm {
	   position: absolute;
	   transform: rotate(38deg);
	   top: 45px;
	   width: 70px;
	   left: -30px;
	   animation-name: wave;
	   animation-direction: alternate;
	   animation-duration: 2s;
	   animation-iteration-count: infinite;
   }
   
   @keyframes wave {
	   0% {
		   position: absolute;
		   transform: rotate(38deg);
		   top: 45px;
		   width: 70px;
		   left: -30px;
	   }
	   
	   100% {
		   position: absolute;
		   transform: rotate(10deg);
		   top: 45px;
		   width: 70px;
		   left: -30px;
	   }
   }
   
/*    JUUUUUPITER */

/*    SATURN */
   
   #saturn_section {
	   margin-top: 100vh;
	   width: 100vw;
	   height: 100vh;
	   position: relative;
   }
   
   .planet_six_content_off {
	   display: none;
	   position: absolute;
   }
   
   .planet_six_content_on {
	   display: inherit;
	   position: absolute;
   }
   
   .saturn_one {
	   width: 70vw;
	   margin-left: 15vw;
	   margin-top: 10vh;
	   float: left;
	   transform: rotate(70deg);
   }
   
   .saturn_two {
	   width: 150%;
	   margin-top: -50vh;
	   float: left;
	   transform: rotate(70deg);
	   margin-left: -25vw;
   }
   
   #saturn_title {
	   width: 12vw;
	   float: left;
	   margin-left: -15vw;
	   margin-top: 25vh;
   }
   
   #saturn_header {
	   color: white;
	   font-family: boldbold, Arial, sans-serif;
	   font-size: 4vw;
	   margin-bottom: -4px;
   }
   
   #saturn_section button {
	   font-family: boldbold, Arial, sans-serif;
	   color: #191919;
	   background-color: white;
	   font-size: 1vw;
	   padding: 5% 12% 5% 12%;
	   border-radius: 30px;
	   width: 13vw;
   }
   
   .byebye_saturn {
	   display: none;
	   position: absolute;
   }
   
   #planet_six_content {
	  background-color: #191919;
	  border-radius: 30px;
	  width: 50vw;
	  padding-top: 3%;
	  padding-left: 5%;
	  padding-right: 5%;
	  margin-left: 20vw;
	  margin-top: 20vh;
	  z-index: 2;
   }
   
   #saturn_information_header {
	  font-family: boldbold, Arial, sans-serif;
	  font-size: 4vw;
	  margin-bottom: 6%;
	  color: white;
	  float: left;
   }
   
   #saturn_information_paragraph {
	  font-family:  azo-sans-web, sans-serif;
	  font-size: 1.2vw;
	  color: white;
	  float: left;
   }
   
   #saturn_facts {
	  background-color: #585858;
	  padding-left: 5%;
	  padding-right: 5%;
	  padding-top: 4%;
	  border-bottom-left-radius: 30px;
	  border-bottom-right-radius: 30px;
	  width: 55vw;
	  margin-left: -5vw;
	  height: 14vh;
	  margin-top: 65px;
	  text-align: center;
	  float: left;
   }
   
   .facts {
	   float: left;
   }
   
   .facts h3 {
	   font-family: boldbold, Arial, sans-serif;
	   color: white;
	   font-size: 2vw;
	   margin-bottom: 1vh;
   }
   
   .facts p {
	   font-family:  azo-sans-web, sans-serif;
	   color: white;
	   font-size: 1vw;
   }
   
   #saturn_fact_one {
	   margin-left: 2.7vw;
   }
   
   #saturn_fact_two {
	   margin: 0vw 8vw 0vw 8vw;
   }
   
   #saturn_fact_three {
	   
   }
   
   #close {
	   width: 2vw;
	   float: right;
	   margin-top: 1.5vh;
   }   
   
   #lightsaber_on {
	   width: 14vw;
	   float: left;
	   clear: both;
	   margin-left: 10vw;
	   margin-top: -11.2vh;
   }
   
   #lightsaber_off {
	   width: 4vw;
	   float: left;
	   clear: both;
	   margin-left: 20vw;
	   margin-top: -10vh;
   }
   
   .lightsaber_display {
	   display: none;
	   position: absolute;
   }
   
   .lightsaberhover:hover {
	   border-radius: 20%;
	   background-color: #1f1f1f;
	   box-shadow:
        0 0 50px 50px #222222;
   }
   
      
/*    SATURN */

/*    URANUS TEE HEE */
   
   #uranus_section {
	   margin-top: 60vh;
	   width: 100vw;
	   height: 100vh;
	   position: relative;
   }
   
   .planet_seven_content_off {
	   display: none;
	   position: absolute;
   }
   
   .planet_seven_content_on {
	   display: inherit;
	   position: absolute;
   }
   
   .uranus_one {
	   width: 30vw;
	   margin-left: 5vw;
	   margin-top: 10vh;
	   float: left;
   }
   
   .uranus_two {
	   width: 100%;
	   margin-top: -50vh;
	   float: left;
   }
   
   #uranus_title {
	   width: 12vw;
	   float: left;
	   margin-left: 18.5vw;
	   margin-top: 15vh;
   }
   
   #uranus_header {
	   color: white;
	   font-family: boldbold, Arial, sans-serif;
	   font-size: 4vw;
	   margin-bottom: -4px;
   }
   
   #uranus_section button {
	   font-family: boldbold, Arial, sans-serif;
	   color: #191919;
	   background-color: white;
	   font-size: 1vw;
	   padding: 5% 12% 5% 12%;
	   border-radius: 30px;
	   width: 13vw;
   }
   
   .byebye_uranus {
	   display: none;
	   position: absolute;
   }
   
   #planet_seven_content {
	  background-color: #191919;
	  border-radius: 30px;
	  width: 50vw;
	  padding-top: 3%;
	  padding-left: 5%;
	  padding-right: 5%;
	  margin-left: 18vw;
	  z-index: 2;
   }
   
   #uranus_information_header {
	  font-family: boldbold, Arial, sans-serif;
	  font-size: 4vw;
	  margin-bottom: 6%;
	  color: white;
	  float: left;
   }
   
   #uranus_information_paragraph {
	  font-family:  azo-sans-web, sans-serif;
	  font-size: 1.2vw;
	  color: white;
	  float: left;
   }
   
   #uranus_facts {
	  background-color: #585858;
	  padding-left: 5%;
	  padding-right: 5%;
	  padding-top: 4%;
	  border-bottom-left-radius: 30px;
	  border-bottom-right-radius: 30px;
	  width: 55vw;
	  margin-left: -5vw;
	  height: 14vh;
	  margin-top: 65px;
	  text-align: center;
	  float: left;
   }
   
   .facts {
	   float: left;
   }
   
   .facts h3 {
	   font-family: boldbold, Arial, sans-serif;
	   color: white;
	   font-size: 2vw;
	   margin-bottom: 1vh;
   }
   
   .facts p {
	   font-family:  azo-sans-web, sans-serif;
	   color: white;
	   font-size: 1vw;
   }
   
   #uranus_fact_one {
	   margin-left: 2.7vw;
   }
   
   #uranus_fact_two {
	   margin: 0vw 8vw 0vw 8vw;
   }
   
   #uranus_fact_three {
	   
   }
   
   #close {
	   width: 2vw;
	   float: right;
	   margin-top: 1.5vh;
   } 
   
   #deathstar {
	   width: 8vw;
	   float: left;
	   margin-left: -2vw;
   } 
   
   #deathstar:hover {
	   animation-name: spin;
	   animation-direction: linear;
	   animation-iteration-count: infinite;
	   animation-duration: 2s;
   } 
   
   @keyframes spin {
	   100% {
	   width: 8vw;
	   float: left;
	   margin-left: -2vw; 
	   transform: rotate(360deg);
	   }
	   
	   
   }
      
/*    URANUS TEE HEE */

/*    NEPTUNE THE GOD OF THE SEA */
   
   #neptune_section {
	   margin-top: 40vh;
	   width: 100vw;
	   height: 100vh;
	   position: relative;
   }
   
   .planet_eight_content_off {
	   display: none;
	   position: absolute;
   }
   
   .planet_eight_content_on {
	   display: inherit;
	   position: absolute;
   }
   
   .neptune_one {
	   width: 30vw;
	   margin-left: 34.2vw;
	   float: left;
	   clear: both;
   }
   
   .neptune_two {
	   width: 100%;
	   margin-top: -50vh;
	   float: left;
   }
   
   #neptune_title {
	   width: 12vw;
	   float: left;
	   margin-left: 1vw;
	   margin-top: 15vh;
   }
   
   #neptune_header {
	   color: white;
	   font-family: boldbold, Arial, sans-serif;
	   font-size: 4vw;
	   margin-bottom: -4px;
   }
   
   #neptune_section button {
	   font-family: boldbold, Arial, sans-serif;
	   color: #191919;
	   background-color: white;
	   font-size: 1vw;
	   padding: 5% 12% 5% 12%;
	   border-radius: 30px;
	   width: 13vw;
   }
   
   .byebye_neptune {
	   display: none;
	   position: absolute;
   }
   
   #planet_eight_content {
	  background-color: #191919;
	  border-radius: 30px;
	  width: 50vw;
	  padding-top: 3%;
	  padding-left: 5%;
	  padding-right: 5%;
	  margin-left: 18vw;
	  z-index: 2;
   }
   
   #neptune_information_header {
	  font-family: boldbold, Arial, sans-serif;
	  font-size: 4vw;
	  margin-bottom: 6%;
	  color: white;
	  float: left;
   }
   
   #neptune_information_paragraph {
	  font-family:  azo-sans-web, sans-serif;
	  font-size: 1.2vw;
	  color: white;
	  float: left;
   }
   
   #neptune_facts {
	  background-color: #585858;
	  padding-left: 5%;
	  padding-right: 5%;
	  padding-top: 4%;
	  border-bottom-left-radius: 30px;
	  border-bottom-right-radius: 30px;
	  width: 55vw;
	  margin-left: -5vw;
	  height: 14vh;
	  margin-top: 65px;
	  text-align: center;
	  float: left;
   }
   
   .facts {
	   float: left;
   }
   
   .facts h3 {
	   font-family: boldbold, Arial, sans-serif;
	   color: white;
	   font-size: 2vw;
	   margin-bottom: 1vh;
   }
   
   .facts p {
	   font-family:  azo-sans-web, sans-serif;
	   color: white;
	   font-size: 1vw;
   }
   
   #neptune_fact_one {
	   margin-left: 2.7vw;
   }
   
   #neptune_fact_two {
	   margin: 0vw 8vw 0vw 8vw;
   }
   
   #neptune_fact_three {
	   
   }
   
   #close {
	   width: 2vw;
	   float: right;
	   margin-top: 1.5vh;
   } 
   
   #asteroid {
	   width: 8vw;
	   float: left;
   }  
   
   #starlord_unlit {
	   width: 4vw;
	   float: left;
	   margin-left: 70vw;
	   clear: both;
	   transform: rotate(20deg);
   }
   
   #starlord_lit {
	   width: 5vw;
	   float: left;
	   margin-left: 69.59vw;
	   clear: both;
	   transform: rotate(20deg);
   }
   
   
   
   .starlord_display {
	   display: none;
	   position: absolute;
   }
   
   #starlord_unlit:hover {
	   border-radius: 40%;
	   background-color: #1f1f1f;
	   box-shadow:
        0 0 60px 60px #222222;
   }
   
   #starlord_lit:hover {
	   border-radius: 40%;
	   background-color: #1f1f1f;
	   box-shadow:
        0 0 50px 50px #222222;
   }
   
   #asteroid_png {
	   width: 4vw;
	   float: left;
	   margin-left: 0vw;
	   animation: zoom;
	   position: absolute;
	   z-index: -1;
	   animation-direction: linear;
	   animation-duration: 5s;
	   animation-iteration-count: infinite;
   }
   
   @keyframes zoom {
	  from { 	
		  left: -30px;
		  transform: rotate(0deg) }
		  
		to   {  
			left: 2000px;
			transform: rotate(720deg) }
   }
      
/*    NEPTUNE THE GOD OF THE SEA */

/*    KUIPER BELT */
   
 #kuiper_section {
	   margin-top: 30vh;
	   width: 100vw;
	   height: 120vh;
	   position: relative;
	   background-image: url("images/asteroid_belt.png");
	   background-repeat: no-repeat;
	   background-size: cover;
   }
   
   .kuiper_content_off {
	   display: none;
	   position: absolute;
   }
   
   .kuiper_content_on {
	   display: inherit;
	   position: absolute;
   }
   
    .kuiper_two {
	   width: 70%;
	   margin-top: -10vh;
	   float: left;
	   margin-left: 15vw;
   }
   
   .kuiper_one {
	   width: 2vw;
	   float: left;
   }
   
   .kuiper_one:hover {
	   border-radius: 40%;
	   background-color: #1f1f1f;
	   box-shadow:
        0 0 50px 50px #222222;
   }
   
   #kuiper_title {
	   width: 32vw;
	   float: left;
	   margin-left: 40vw;
	   margin-top: 63vh;
	   text-align: center;
   }
   
   #kuiper_header {
	   color: white;
	   font-family: boldbold, Arial, sans-serif;
	   font-size: 4vw;
	   margin-bottom: -4px;
   }
   
   #kuiper_section button {
	   width: 10vw;
	   background: none;
	   color: inherit;
	   border: none;
	   padding: 0;
	   font: inherit;
	   cursor: pointer;
	   outline: inherit;
   }
   
   .byebye_kuiper {
	   display: none;
	   position: absolute;
   }
   
   #kuiper_content {
	  background-color: #191919;
	  border-radius: 30px;
	  width: 50vw;
	  padding-top: 3%;
	  padding-left: 5%;
	  padding-right: 5%;
	  margin-left: 20vw;
	  margin-top: 37vh;
   }
   
   #kuiper_information_header {
	  font-family: boldbold, Arial, sans-serif;
	  font-size: 4vw;
	  margin-bottom: 6%;
	  color: white;
	  float: left;
   }
   
   #kuiper_information_paragraph {
	  font-family:  azo-sans-web, sans-serif;
	  font-size: 1.2vw;
	  color: white;
	  float: left;
	  clear: both;
   }
   
   #kuiper_facts {
	  background-color: #585858;
	  padding-left: 5%;
	  padding-right: 5%;
	  padding-top: 4%;
	  border-bottom-left-radius: 30px;
	  border-bottom-right-radius: 30px;
	  width: 55vw;
	  margin-left: -5vw;
	  height: 14vh;
	  margin-top: 65px;
	  text-align: center;
	  float: left;
   }
   
   .facts {
	   float: left;
   }
   
   .facts h3 {
	   font-family: boldbold, Arial, sans-serif;
	   color: white;
	   font-size: 2vw;
	   margin-bottom: 1vh;
   }
   
   .facts p {
	   font-family:  azo-sans-web, sans-serif;
	   color: white;
	   font-size: 1vw;
   }
   
   #kuiper_fact_one {
	   margin-left: 2.7vw;
   }
   
   #kuiper_fact_two {
	   margin: 0vw 10.3vw 0vw 10vw;
   }
   
   #kuiper_fact_three {
	   
   }
   
   #close {
	   width: 2vw;
	   float: right;
	   margin-top: 1.5vh;
	  }

/*
		 border-radius: 40%;
	   background-color: #1f1f1f;
	   box-shadow:
        0 0 60px 60px #222222;
*/

   
/*    KUIPER BELT */

	#lemon {
		font-family: boldbold, Arial, sans-serif;
		font-size: 0.7vw;
		float: right;
		margin-right: 3vw;
		margin-top: 2vh;
		margin-bottom: 2vh;
		color: white;
		position: relative;
		z-index: 10;
	}
	
	button {
		transition: all .5s ease-in-out;
		cursor: pointer;
		
	}
	
	button:hover {
	   border-radius: 20%;
	   background-color:  #ffa30f;
	   box-shadow: 0 0 5px 5px #ffa30f;
   }














































