* {
    box-sizing: border-box;
}

html {
    height: 100vh;
}

body {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0, 162, 255);
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    background-image: url('img/ls1.png');
    background-position-y: bottom;
}

.abs {
    position: absolute;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
}

@keyframes animcloud1 {
    from {
        top: 0;
        left: -300px;
    }

    to {
        top: 0;
        left: 105%;
    }
}

.cloud1 {
    top: 0;
    left: 105%;
    width: 512px;
    height: 279px;
    background-image: url('img/c3.png');
    transform: scale(0.3) translate(0, -100%);;
    opacity: .8;
    animation: animcloud1 120s infinite linear;
}


@keyframes animcloud2 {
    from {
        top: 0;
        left: -1500px;
    }

    to {
        top: 0;
        left: 105%;
    }
}

.cloud2 {
    top: 0;
    left: 105%;
    width: 1988px;
    height: 1290px;
    background-image: url('img/c2.png');
    transform: scale(0.2) translate(0, -200%);;
    opacity: .8;
    animation: animcloud2 100s infinite linear;
}

@keyframes animplane1 {
    from {
        top: 20px;
        left: -900px;
    }

    to {
        top: 150px;
        left: 105%;
    }
}

.plane1 {
    top: 150px;
    left: 105%;
    width: 960px;
    height: 570px;
    background-image: url('img/p1.webp');
    transform: scale(0.6);
    animation: animplane1 10s 1 ease-out;
}