.paperplane {
    position: absolute;
    overflow: hidden;

    width: calc(100vw - 6px);
    height: 300px;
    background-color: #1c1a27;
    transform-origin: 0 0;
    box-shadow: 0 0 10px #1c1a27 inset;
}

.plane {
    position: absolute;
    left: 100px;
    top: 100px;
    animation: move 3s linear infinite;
    z-index: 2;
}

@keyframes move {
    0% {
        transform: translateY(0) rotateX(0) scale(0.5);
    }

    25% {
        transform: translateY(-30px) rotateX(40deg) scale(0.5);
    }

    50% {
        transform: rotateX(0) translateY(0) scale(0.5);
    }

    75% {
        transform: rotateX(-40deg) translateY(30px) scale(0.5);
    }

    100% {
        transform: rotateX(0) translateY(0) scale(0.5);
    }
}

.wingRight {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 22.5px solid transparent;
    border-right: 12.5px solid transparent;
    border-bottom: 115px solid #fff;
    transform: rotate(61deg);
    z-index: 4;
}

.bottom {
    position: relative;
    width: 0;
    height: 0;
    border-left: 12.5px solid transparent;
    border-right: 12.5px solid transparent;
    border-bottom: 25.5px solid rgb(183, 183, 183);
    top: 71px;
    transform: rotate(-5deg);
    left: -52.5px;
    z-index: 3;
}

.top {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 30px solid rgb(227, 227, 227);
    top: 65px;
    transform: rotate(5deg);
    left: -60px;
    z-index: 1;
}

.middle {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 135px solid rgb(227, 227, 227);
    top: -13.5px;
    transform: rotate(72deg);
    left: -7.5px;
    z-index: 2;
}

.wingLeft {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-bottom: 135px solid #fff;
    transform: rotate(78deg) skewY(-35deg);
    left: -18.5px;
    z-index: 3;
    top: -30px;
}

.clouds {
    position: absolute;
    top: 50px;
    left: 100px;
}

@keyframes cloud {
    0% {
        left: -150px;

    }



    100% {
        left: 100vw;
    }
}

.cloudOne,
.cloudTwo,
.cloudThree {
    position: absolute;
    width: 50px;
    height: 25px;
    background-color: #fff;
    border-radius: 100px 100px 0 0;
    transform: scale(0.5);
}

.cloudOne {
    top: 0;
    left: 0;
    animation: cloud 5s linear infinite reverse;
}

.cloudTwo {
    top: 50px;
    left: 100px;
    animation: cloud 9s linear infinite reverse;
}

.cloudThree {
    top: 150px;
    left: 50px;
    animation: cloud 7s linear infinite reverse;
}

.cloudOne:before,
.cloudTwo:before,
.cloudThree:before {
    content: "";
    position: absolute;
    width: 25px;
    height: 12.5px;
    background-color: #fff;
    border-radius: 100px 100px 0 0;
    left: -20px;
    top: 12.5px;
    box-shadow: 6;
}