*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    width: 100%;
    height: 100vh;
    background-color: lightgreen;
    display: grid;
    place-items: center;
}

.container {
    width: 150rem;
    height: 80rem;
    background: rgb(88, 179, 253) url(images/bg.png) repeat-x;
    background-size: 150rem auto;
    background-position: 0 100%;
    display: grid;
    place-items: center
    /*run the animation*/;
    animation: bgAnim 10s infinite linear;
    border-radius: .5rem 100rem;
}
/*animation for background*/
@keyframes bgAnim {
    0% {
        background-position: 0 100%;
    }

     100% {
        background-position: 150rem 100%;
    }
    
}

.helicopter {
    width: 80rem;
    height: 60rem;
    position: relative;
    /*creat a 3D environment*/
    perspective: 100rem;
    /*rotate the helicopter slightly*/
    transform: rotateY(-15deg);
}

.helicopter div {
    position: absolute;
}

.blade {
    width: 40rem;
    height: 2rem;
    background-color: #000;
    left: 20rem;
    top: 15rem;
    /*rotate the blade*/
    transform: rotateX(90deg);
     /*creat a 3D environment*/
     transform-style: preserve-3d;
     /*run the animation*/
     animation: bladeAnim .1s infinite linear;
}

@keyframes bladeAnim  {
    0% {
        transform: rotateX(90deg)
        rotateZ(0);
    }

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

.main-rotor {
    width: 5rem;
    height: 2rem;
    background-color: #000;
    left: 17.5rem;
     /*rotate the blade*/
    transform: rotateX(-90deg);
     /*creat a 3D environment*/
     transform-style: preserve-3d;
}

.main-rotor::before {
    contain: "";
    width: 100%;
    height: 100%;
    background-color:  #000;
    position: absolute;
    transform: rotateY(80deg);
}

.mast {
    width: 1rem;
    height: 2rem;
    background-color: #000;
    left: 39.5rem;
    top: 17rem;
}

.cockpit {
    width: 20rem;
    height: 10rem;
    top: 18.5rem;
    left: 30rem;
    background-color: #000;
    border-radius: 50% 40% 40% 40%;
}

/*create the #window*/
.cockpit::before {
    content: "";
    width: 8rem;
    height: 5rem;
    background-color: #ccc;
    position: absolute;
    top: 0.2rem;
    border-radius: 100% 0 40% 0;
}

.landing-skid {
    width: 23rem;
    height: 10rem;
    border-bottom: 1rem solid #000;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-radius: 0 0 2.5rem 5rem;
}

.landing-skid-1 {
    top: 22rem;
    left: 26rem;
}

.landing-skid-2 {
    top: 20.5rem;
    left: 26.5rem;
}

/*creats the parts to connect the landing skid to the cabin*/
.landing-skid::before, 
.landing-skid::after {
    content: "";
    width: 1rem;
    height: 5rem;
    background-color: #000;
    position: absolute;
    bottom: 0;
}
/*change the position and gets connected*/
.landing-skid::before {
    left: 8rem;
}
.landing-skid::after{
    left: 18rem;
}

.tail-cone {
    width: 25rem;
    height: 2rem;
    background-color: #000;
    top: 22rem;
    left: 47rem;
    border-radius: 0 100% 100% 0;
}

.tail-fin {
    width: 2rem;
    height: 8rem;
    background-color: #000;
    top: 19rem;
    right: 7.5rem;
    border-radius: 100% 0 0 100%;
}

.tail-rotor {
    width: 1rem;
    height: 9rem;
    background-color: #000;
    top: 18.5rem;
    right: 6.5rem;
    animation: tailRotorAnim .1s infinite linear;
}

@keyframes tailRotorAnim {
    0% {
        transform: rotateX(0);
    }
    
     100% {
        transform: rotateX(360deg);
    }
}