* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
    font-family:sans-serif; 
}

.preload {
    width:100%;
    height:100vh;
    display:flex;
    background-color: #77b3d4;
    position:fixed;
    top:0;
    justify-content: center;
    align-items:center;
    transition:opacity 0.5s ease;
}

.cloud1, .cloud2, .cloud3 {
    height:100px;
    position: absolute;
    right:0%;
    z-index:-1;
}

.cloud1 {
    top:25%;
    transform:translate(100%, -25%);
    animation: cloud 3s ease infinite;
}

.cloud2 {
    top:50%;
    transform:translate(100%, -50%);
    animation: cloud 3s ease infinite 2s;
}

.cloud3 {
    top:75%;
    transform:translate(100%, -75%);   
    animation: cloud 3s ease infinite 1s;
}

.airplane {
    height:200px;
    animation: airplane 1s ease infinite alternate;
}

.preload h3{
    position: absolute;
    top:85%;
    transform:translateY(-75%);
    font-size:40px;
}

.preload-finish {
    opacity:0;
    pointer-events:none;
}


section img {
    width:100%;
}

@keyframes airplane {
    from{
        transform: translateY(0px);
    }
    to{
        transform: translateY(50px);
    }
}

@keyframes cloud {
    from {
        right:0%;
    }
    to {
        right:150%;
    }
}