@charset "UTF-8";
/* CSS Document */

body,html {
	margin: 0;
	background-color: #DDF0F8;
	width: 100%;
	max-width: 100%;
}

body {
	position: relative;
}

#loader {
	position: fixed;
	display: block;
	width: 100vw;
	height: 100vh;
	z-index: 10000;
	top: 0;
	left: 0;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

	#loader img {
    	animation:spin 4s linear infinite;
	}

	#loader h1 {
		display: block;
	}

#rocket {
	display: block;
	position: fixed;
	width: 10.4em;
	height: 17.2em;
	top: calc(calc(100% - 17.2em) - 1em);
	left: calc(50% - 5.2em);
	z-index: 1000;
	background: url('../svg/Rocket No Flames.svg');
	background-repeat: no-repeat;

	-webkit-transition: top 0.25s ease, left 0.25s ease;
	-moz-transition: top 0.25s ease, left 0.25s ease;
	-ms-transition: top 0.25s ease, left 0.25s ease;
	-o-transition: top 0.25s ease, left 0.25s ease;
	transition: top 0.25s ease, left 0.25s ease;
}

#rocket.gliding {
	z-index: 1000;
	width: 10.4em;
	height: 17.2em;
	top: calc(100% - 10.775em);
}

#rocket.flying {
	z-index: 1000;
	width: 10.4em;
	height: 21.55em;
	top: calc(65% - 10.775em);

    animation: flying 3s 0.25s infinite, flame 0.5s steps(1, end) infinite;
}

#grass {
	display: block;
	position: absolute;
    width: 100%;
    height: 210px;
    bottom: 0px;
	left: 0px;
	background: url(../svg/Grass.svg);
}

.space {
	position: relative;
	display: block;
	width: 100%;
	height: 150vh;
	overflow: hidden;

	display: flex;
	justify-content: center;
	align-items: center;
}

	.space > h1 {
		margin-top: 0;
		color: white;
	}

#part1.space {
	background: #000000; /* Old browsers */
	background: linear-gradient(to bottom, #000000 75%,#1b2631 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#part2.space {
	background: #1b2631; /* Old browsers */
	background: linear-gradient(to bottom, #1b2631 75%,#22313f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#part3.space {
	background: #22313f; /* Old browsers */
	background: linear-gradient(to bottom, #22313f 75%,#34495e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#part4.space {
	background: #34495e; /* Old browsers */
	background: linear-gradient(to bottom, #34495e 75%,#596E83 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#part5.space {
	background: #A2B8CC; /* Old browsers */
	background: linear-gradient(to bottom, #596E83 75%,#a2b8cc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#part6.space {
	background: #DDF0F8; /* Old browsers */
	background: linear-gradient(to bottom, #A2B8CC 75%,#DDF0F8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


@keyframes flying {
	0% { top: calc(65% - 10.681em); left: calc(50% - 5.353em); }
	5% { top: calc(65% - 11.234em); left: calc(50% - 4.926em); }
	10% { top: calc(65% - 11.211em); left: calc(50% - 5.222em); }
	15% { top: calc(65% - 10.897em); left: calc(50% - 5.304em); }
	20% { top: calc(65% - 10.683em); left: calc(50% - 5.162em); }
	25% { top: calc(65% - 11.108em); left: calc(50% - 4.805em); }
	30% { top: calc(65% - 10.698em); left: calc(50% - 4.948em); }
	35% { top: calc(65% - 10.412em); left: calc(50% - 5.244em); }
	40% { top: calc(65% - 11.191em); left: calc(50% - 5.7em); }
	45% { top: calc(65% - 10.679em); left: calc(50% - 4.998em); }
	50% { top: calc(65% - 10.957em); left: calc(50% - 5.211em); }
	55% { top: calc(65% - 11.012em); left: calc(50% - 5.169em); }
	60% { top: calc(65% - 10.62em); left: calc(50% - 5.093em); }
	65% { top: calc(65% - 10.856em); left: calc(50% - 5.642em); }
	70% { top: calc(65% - 11.165em); left: calc(50% - 5.543em); }
	75% { top: calc(65% - 10.884em); left: calc(50% - 4.807em); }
	80% { top: calc(65% - 11.257em); left: calc(50% - 5.148em); }
	85% { top: calc(65% - 10.331em); left: calc(50% - 5.416em); }
	90% { top: calc(65% - 10.495em); left: calc(50% - 5.669em); }
	95% { top: calc(65% - 11.204em); left: calc(50% - 5.142em); }
	100% { top: calc(65% - 10.775em); left: calc(50% - 5.2em); }
}

@keyframes flame {
	0% { background: url('../svg/Rocket.svg')  no-repeat top center; }
	25% { background: url('../svg/Rocket 2.svg')  no-repeat top center; }
	50% { background: url('../svg/Rocket 3.svg')  no-repeat top center; }
	75% { background: url('../svg/Rocket 2.svg')  no-repeat top center; }
	100% { background: url('../svg/Rocket.svg')  no-repeat top center; }
}

.star {
  display: block;
  width: 16px;
  height: 16px;
  margin-left: 0px;
  margin-top: 0px;
  position: absolute;
  opacity: 0;

  background-image: url('../svg/Star.svg');
  background-size: cover;
  
  animation-name: twinkle;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

@keyframes twinkle {
  0%, 5% {opacity: 0; width: 0px; height: 0px; margin-left: 8px; margin-top: 8px;}
  40%, 60% {opacity: 1; width: 16px; height: 16px; margin-left: 0px; margin-top: 0px;}
  95%, 100% {opacity: 0; width: 0px; height: 0px; margin-left: 8px; margin-top: 8px;}
}

.shootingstar {
	position: absolute;
	display: block;
	height: 64px;
	width: 64px;
	left: -5%;
	bottom: -5%;

	background-image: url('../svg/Shooting Star.svg');
	background-size: cover;
  
	animation-name: shooting1;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	-webkit-animation-delay: 0.25s;
	animation-delay: 0.25s;
}

.shootingstar.two {
	animation-name: shooting2;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

.desc {
	font-family: sans-serif;
	color: white;
	height: 256px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: fixed;
	z-index: 101;
	left: 138px;
}

.desc * {
	margin: 0;
}

.desc.right {
	text-align: right;
	right: 138px;
}

.planet {
	display: block;
	width: 256px;
	height: 256px;
	position: fixed;
	z-index: 100;
	left: -128px;
	background-repeat: no-repeat;
	background-size: cover;
}

.planet.right {
	right: -128px;
	left: auto;
}

#moon {
	background-image: url(../svg/Moon.svg);
}

#moondesc {
	color: black;
}

#venus {
	background-image: url(../svg/Venus.svg);
}

#mars {
	background-image: url(../svg/Mars.svg);
}

#mercury {
	background-image: url(../svg/Mercury.svg);
}

#sun {
	background-image: url(../svg/Sun.svg);
}

#jupiter {
	background-image: url(../svg/Jupiter.svg);
}

#saturn {
	background-image: url(../svg/Saturn.svg);
}

#uranus {
	background-image: url(../svg/Uranus.svg);
}

#neptune {
	background-image: url(../svg/Neptune.svg);
}

#pluto {
	background-image: url(../svg/Pluto.svg);
}

.desc.right.saturn {
	right: 148px;
}

#earthdesc {
	position: absolute;
	bottom: 200px;
	color: black;
}

#starfield {
	display: block;
	width: 100vw;
	height: 250vh;
	overflow: hidden;

	position: fixed;

	z-index: 99;
}

.ribbon {
	z-index: 1000;
	position: absolute;
	top: 100px;
	width: 590.5px;
	height: 131.25px;
	display: block;
	background-image: url(../svg/Ribbon.svg);
	background-repeat: no-repeat;
	background-size: cover;
}

@keyframes shooting1 {
	0% {left: -5%; bottom: -5%;}
	50%, 100% {left: 105%; bottom: 95%;}
}

@keyframes shooting2 {
	0% {left: -5%; bottom: -5%;}
	50%, 100% {left: 105%; bottom: 80%;}
}

@keyframes spin {
	100% { -webkit-transform: rotate(360deg); transform:rotate(360deg);}
}