.body{
    font-family: 'helvetica', 'arial', sans-serif;
}

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

.interface{
    text-align: center;
    padding: 20px;
}

a.button{
    display: inline-block;
    background-color: ghostwhite;
    color: black;
    padding: 20px 40px;
    text-decoration: none;
    border-radius: 10px;
    text-transform: uppercase;
    transition: color 300ms;
}

a:hover{
    background-color: skyblue;
    
}

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

.ground{
    background: url('../img/ground.png');
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
}

.rocket{
    position: absolute;
    left: 50%;
    bottom: -60px;
    width: 143px;
    height: 272px; 
    margin-left: -71.5px;
    background: url('../img/rocket.png') no-repeat 0 0;
    transition: bottom 10000ms;
}

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

body.body-state2 .rocket{
    background-image: url('../img/rocket-state2.png')
}

body.body-state3 .rocket,
body.body-state4 .rocket{
    background-image: url('../img/rocket.state3.png')
}

body.body-state5 .rocket{
    background-image: url('../img/boom.png');
    width: 209px;
    height: 160px;
    margin-left: -104.5px;
}


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;}

a{
    
}

a.button{
    
}