body {
	font-family: 'Inter', sans-serif;
	background: black;
	color: #222;
}

h1 {
	color: orange;
	font-size: 100px;
	position: relative;
	text-transform: uppercase;  
}


h2{

	color: white;

}

section {
	position: fixed;
	width: span;
	height: 920px;
}


.trans {
	opacity: 0;
}

.container {
	position: absolute;
	text-align: center;
	margin: auto;
	left: 40%;
	top: 12%;
}

.LA {
	position: absolute;
	text-align: center;
	left: 10%;
	top: 2.5%;
}

.NYC {

	position: absolute;
	text-align: center;
	left: 35%;
	top: 2.5%;

}

.AMS {

	position: absolute;
	text-align: center;
	left: 65%;
	top: 2.5%;

}

.LONDON {

	position: absolute;
	text-align: center;
	left: 85%;
	top: 2.5%;

}

.semiCircle {

	background: orange;
	position: absolute;
  width: 1600px;
  height: 400px;
  border-radius: 50% / 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  top: 57.25%;
  left: 10%;
}

.earthButton {

	position: absolute;
	top: 20%;
	left: 95%;
	
	animation: spin 5s linear infinite;
	
}

.moonButton {

	position: absolute;
	top: 30%;
	left: 95%;
	
	animation: spin 5s linear infinite;
	
}

.saturnButton {

	position: absolute;
	top: 50%;
	left: 94.15%;
	
	animation: spin 5s linear infinite;
	
}

.jupiterButton {

	position: absolute;
	top: 59%;
	left: 93.55%;
	
	animation: spin 5s linear infinite;
	
}

.marsButton {

	position: absolute;
	top: 40%;
	left: 95%;
	
	animation: spin 5s linear;
	
}

#shootingStar {
	position: absolute;
	top: 10px;
	left: -300px;
	animation: 20000ms infinite shootingStarAnimate;

}

#spaceship {
	position: absolute;
	top: 10px;
	left: -300px;
	animation: 10000ms infinite spaceshipAnimate;

}

#asteroid {
	position: absolute;
	top: 10px;
	left: -300px;
	animation: 150000ms infinite asteroidAnimate;

}

#death {
	position: absolute;
	top: 10%;
	left: 40%;
	animation: 60s infinite deathStar;

}

.trans {
	opacity: 0;
}

.backgroundCrack {
	position: absolute;
animation: 60s infinite backCrack;
}

.alert {
animation: 60s infinite alert;
}

.posAlert {
	position: absolute;
	top: 45%;
	left: 42%;
}

.posH1 {
	position: absolute;
	top: 25%;
	left: 20%;
}

h5 {
	color: red;
	font-size: 50px;
	position: relative;
	text-transform: uppercase;  
}

@keyframes alert {

0% {
	visibility: hidden;
}

92% {
	visibility: hidden;
}

93% {
	visibility: visible;
}

95% {
	visibility: visible;
}

96% {
	visibility: hidden;
}

100% {
	visibility: hidden;
}

}


@keyframes spin {

		0% {
			transform: rotateZ(0);
		}
		100% {
			transform: rotateZ(360deg);
		}
}

@keyframes backCrack {

0% {
visibility: hidden;
}

96% {
visibility: hidden;
}
97% {
visibility: visible;
}

100% {
visibility: visible;
}
}

@keyframes spaceshipAnimate {
 
	0% {top: 10px; left: -300px; opacity: 1;}
	50% {top: 1400px; left: 2400px; opacity: 1;}
	75% { transform: translateY(0px); opacity: 0;}
    100% { transform: translateY(0px); opacity: 0;}
}

@keyframes asteroidAnimate {
 
	0% {top: -100; left: 2000px; opacity: 1;}
	50% {top: 920px; left: -300px; opacity: 1;}
	75% { transform: translateY(0px); opacity: 0;}
    100% { transform: translateY(0px); opacity: 0;}
}

@keyframes shootingStarAnimate {
 
	0% {top: 500px; left: 2000px; opacity: 1;}
	50% {top: 900px; left: -300; opacity: 1;}
	75% { transform: translateY(50px); opacity: 0;}
    100% { transform: translateY(50px); opacity: 0;}
}

@keyframes deathStar {
 
	0% {height: 0px; width: 0px;}
	50% {height: 10px; width: 30px;}
	75% {height: 20px; width: 60px;}
    100% {height: 750px; width: 2000px;}
}