@import url("https://use.typekit.net/acf7hpt.css");
body{
	font-family: lores-12, sans-serif;
	font-weight: 700;
	font-style: normal;
}

.console {
	border-radius: 3px;
    border: black solid 7px;
    width: max-content;
    padding: 10px;
    margin: auto;
    margin-top: 50px;
}

.how-to {
	margin: 55px 5px 15px 5px;
	font-size: 18px;
}

.button {
	padding: 10px;
    border: black solid 5px;
    border-radius: 5px;
    margin: 40px;
    font-size: 35px;
    text-decoration: none;
    color: black;
    background: red;
    box-shadow: 5px 4px 0px 2px;
}

h1{
	background-color: black;
	color: white;
	text-align: center;
    width: 42%;
    padding: 10px;
    margin: 40px;
    border: black solid 5px;
    border-radius: 5px;
	font-size: 30px;
}

.left {
	background-color: gray;
	position: fixed;
	width: 50%;
	height: 100%;
	top: 0;
	left: 0;
}

.right{
	background-color: #0076dd;
	position: fixed;
	width: 50%;
	height: 100%;
	top: 0;
	right: 0;
}
.ground{
	background: url('../img/ground.png') no-repeat center center;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 35px;
}

.rocket{
	position: absolute;
    left: 50%;
    bottom: -20px;
    width: 330px;
    height: 550px;
    margin-left: -165px;
    background: url(../img/rocket-state1.png);
	transition: bottom 5s;

}


/*Rocket bg image*/
body.body-state2 .rocket{
	background-image: url(../img/rocket-state2.png);
}
body.body-state3 .rocket,
body.body-state4 .rocket{
	background: url(../img/rocket-state3.png);
}
body.body-state5 .rocket{
	 background: url(../img/boom.png);
	 width: 500px;
	 height: 500px;
	 margin-left: -250px;
}

body.body-state1 .rocket{
	transition: none;
}


body.body-state3 .rocket,
body.body-state4 .rocket{
	bottom: 1000px;
}

.state1,
.state2,
.state3,
.state4,
.state5{
	display: none;
}

body.body-state1 .state1{display: block;}
body.body-state2 .state2{display: block;}
body.body-state3 .state3{display: block;}
body.body-state4 .state4{display: block;}
body.body-state5 .state5{display: block;}