@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html, body{
	width: 100%;
	height: 100%;
	min-height: 100%;
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 100%;
	background-color: Skyblue;
	overflow: hidden;
}
.text{
  position: absolute;
  z-index: 10;
  bottom: 3%;
  left: 3%;
}
.text h1{
  font-size: 1.5em;
  color: #000;
}
.text p{
  font-size: 1em;
  color: #000;
}
.text p span{
  color: #000;
}
@keyframes animationRocket {
	0%{
		transform: rotate(90deg);
		left: -40%;
		top: calc(50% - 200px);
		opacity: 1;
	}
	49%{
		transform: rotate(90deg);
		left: 120%;
		top: calc(50% - 200px);
		opacity: 1;
	}
	50%{
		transform: rotate(90deg);
		left: 120%;
		opacity: 0;
	}
	51%{
		opacity: 0;
		top: 100%;
		left: calc(50% - 130px);
		transform: rotate(0deg);
	}
	52%{
		opacity: 1;
		top: 100%;
		left: calc(50% - 130px);
		transform: rotate(0deg);
	}
	99%{
		opacity: 1;
		top: -100%;
		left: calc(50% - 130px);
		transform: rotate(0deg);
	}
	100%{
		opacity: 1;
		top: -100%;
		left: calc(50% - 130px);
		transform: rotate(0deg);
	}
}
.container{
	width: 260px;
	height: 400px;
	position: absolute;
	top: calc(50% - 200px);
	left: calc(50% - 130px);
	transform: rotate(90deg);
	animation: animationRocket 8s linear infinite;
}
.body{
	width: 80px;
	height: 200px;
	top: 50px;
	left: 70px;
	position: absolute;
	z-index: 2;
	background-color: #d03543;
	border-radius: 100px 0 200px 0;
	transform: rotate(-0deg);
}
.rocket:before{
	content: "";
	border-top: 47px solid #d03543;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	width: 83px;
	position: absolute;
	bottom: 20px;
	left: -8px;
	transform: rotate(45deg);
}
.wing-left{
	width: 0;
	height: 0;
	position: absolute;
	z-index: 1;
	bottom: 150px;
	left: -100px;
  border-left: 80px solid transparent;
	border-right: 90px solid #97282b;
	border-top: 100px solid transparent;
	border-bottom: 120px solid transparent;
	transform: rotate(50deg);
}
.wing-right{
	width: 0;
	height: 0;
	position: absolute;
	z-index: 0;
	bottom: 150px;
	left: 20px;
	border-right: 50px solid #97282b;
	border-top: 100px solid transparent;
	border-bottom: 70px solid transparent;
	transform: rotate(50deg);
}
.feet{
	width: 0;
	height: 0;
	position: absolute;
	z-index: 1;
	bottom: 90px;
	right: 80px;
	border-left: 60px solid #97282b;
	border-top: 90px solid transparent;
	border-bottom: 10px solid transparent;
	transform: rotate(140deg);
}
.crest {
	width: 0;
	height: 0;
	position: absolute;
	z-index: 2;
	top: -10px;
	left: 20px;
  border-left: 16px solid transparent;
	border-right: 50px solid #97282b;
	border-top: 10px solid transparent;
	border-bottom: 70px solid transparent;
	transform: rotate(70deg);
}
.head {
	width: 0;
	height: 0;
	position: absolute;
	z-index: 2;
	top: -30px;
  left: 30px;
	border-left: 100px solid #97282b;
	border-top: 35px solid transparent;
	border-bottom: 30px solid transparent;
	transform: rotate(-90deg);
}

/*A red border is shown when the button changes the
border-width value > 0*/
.show-div{
  border-style: solid;
  border-width: 0px;
  border-color: yellow;
}

/*Changes the button's font size*/
.btn{
  font-size:20px;
 	background-color: black;
  color: white;
  padding: 10px;
}