:root{

    --duration: 16s;
}

html, body{

    position: relative;
    height: 100%;
    margin: 0;
}

main.sky{

    position: relative;
    background-color: #c2e6eb;
}

.full-width{
    
    width: 100%;
}

.full-height{

    height: 100%;
}

@media screen and ( min-width : 1440px  ) {

    #ground{
    
        position: fixed;
        width: 130%;
    }

    @keyframes ground-move {
        0% {
            right: -5%; 
            bottom: -100%;
        }
        40% {
            bottom: -100%;
        }
        48% {
            bottom: 0%;
        }
        51% {
            bottom: -2%;
        }
        90% {
            bottom: -2%;
        }
        100% {
            right: -25%;
            bottom: -100%;
        }
    }
    
    #ballon{
    
        position: fixed;
        bottom:30%;
        left:50%;
        transform: translateX(-50%);
    }

    @keyframes ballon-move {
        0% {
            bottom: -100%;
        }
        40% {
            bottom: -100%;
        }
        48% {
            bottom:30%;
        }
        51% {
            bottom: 28%;
        }
        90% {
            bottom: 28%;
        }
        95% {
            bottom: -100%;
        }
        100% {
            bottom: -100%;
        }
    }
}

@media screen and ( max-width : 1440px ) {

    #ground{
    
        position: fixed;
        width: 140%;
    }

    @keyframes ground-move {
        0% {
            right: -10%; 
            bottom: -100%;
        }
        40% {
            bottom: -100%;
        }
        48%{
            bottom: 0%;
        }
        51% {
            bottom: -2%;
        }
        90% {
            bottom: -2%;
        }
        100% {
            right: -30%;
            bottom: -100%;
        }
    }
    
    #ballon{
    
        position: fixed;
        bottom:30%;
        left:50%;
        transform: translateX(-50%);
    }

    @keyframes ballon-move {
        0% {
            bottom: -100%;
        }
        40% {
            bottom: -100%;
        }
        48% {
            bottom:30%;
        }
        51% {
            bottom: 28%;
        }
        90% {
            bottom: 28%;
        }
        95% {
            bottom: -100%;
        }
        100% {
            bottom: -100%;
        }
    }
}

@media screen and ( max-width : 900px ) {

    #ground{
    
        position: fixed;
        width: 150%;
    }

    @keyframes ground-move {
        0% {
            right: -10%; 
            bottom: -100%;
        }
        40% {
            bottom: -100%;
        }
        48% {
            bottom: 0%;
        }
        51% {
            bottom: -2%;
        }
        90% {
            bottom: -2%;
        }
        100% {
            right: -40%;
            bottom: -100%;
        }
    }
    
    #ballon{
    
        position: fixed;
        bottom:30%;
        left:50%;
        transform: translateX(-50%);
    }

    @keyframes ballon-move {
        0% {
            bottom: -100%;
        }
        40% {
            bottom: -100%;
        }
        48% {
            bottom:30%;
        }
        51% {
            bottom: 28%;
        }
        90% {
            bottom: 28%;
        }
        95% {
            bottom: -100%;
        }
        100% {
            bottom: -100%;
        }
    }
}

@media screen and ( max-width : 768px ) {

    #ground{
    
        position: fixed;
        width: 200%;
    }

    @keyframes ground-move {
        0% {
            right: -20%;
            bottom: -100%;
        }
        40% {
            bottom: -100%;
        }
        48% {
            bottom: 0%;
        }
        51% {
            bottom: -2%;
        }
        90% {
            bottom: -2%;
        }
        100% {
            right: -100%;
            bottom: -100%;
        }
    }
    
    #ballon{
    
        position: fixed;
        bottom:30%;
        left:50%;
        transform: translateX(-50%);
    }

    @keyframes ballon-move {
        0% {
            bottom: -100%;
        }
        40% {
            bottom: -100%;
        }
        48% {
            bottom:30%;
        }
        51% {
            bottom: 28%;
        }
        90% {
            bottom: 28%;
        }
        95% {
            bottom: -100%;
        }
        100% {
            bottom: -100%;
        }
    }
}

@media screen and ( max-width : 540px ) {

    #ground{
    
        position: fixed;
        width: 400%;
    }

    @keyframes ground-move {
        0% {
            right: -250%;
            bottom: -100%;
        }
        40% {
            bottom: -100%;
        }
        48% {
            bottom: 0%;
        }
        51% {
            bottom: -2%;
        }
        90% {
            bottom: -2%;
        }
        95% {
            right: -300%;
            bottom: -100%;
        }
        100% {
            right: -300%;
            bottom: -100%;
        }
    }
    
    #ballon{
    
        position: fixed;
        bottom:30%;
        left:50%;
        transform: translateX(-50%);
    }

    @keyframes ballon-move {
        0% {
            bottom: -100%;
        }
        40% {
            bottom: -100%;
        }
        48% {
            bottom:30%;
        }
        51% {
            bottom: 28%;
        }
        90% {
            bottom: 28%;
        }
        95% {
            bottom: -100%;
        }
        100% {
            bottom: -100%;
        }
    }
}

#airplane {
    position: fixed;
    left: 50%;
    height: 35vh;
    max-width: 100%;
    object-fit: contain;
    transform: translateX( -45% );

    animation-name: airplane-move;
    animation-duration: var( --duration );
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite
}

@keyframes airplane-move {
    0% {
        top: 30vh;
    }
    40% {
        top: 30vh;
    }
    43% {
        top: 33vh;
    }
    48% {
        top: -40vh;
    }
    90% {
        top: -40vh;
    }
    98%{
        top: 33vh;
    }
    100% {
        top: 30vh;
    }
}

#logo {
    position: fixed;
    left: 50%;
    height: 25vh;
    max-width: 100%;
    object-fit: contain;
    transform: translateX( -50% );

    animation-name: logo-move;
    animation-duration: var( --duration );
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite
}

@keyframes logo-move {
    0% {
        top: 10vh;
    }
    40% {
        top: 10vh;
    }
    43% {
        top: 13vh;
    }
    48% {
        top: -25vh;
    }
    90% {
        top: -25vh;
    }
    98%{
        top: 13vh;
    }
    100% {
        top: 10vh;
    }
}

#ground {

    animation-name: ground-move;
    animation-duration: var( --duration );
    animation-timing-function: ease-in;
    animation-iteration-count: infinite
}

#ballon {
    
    max-height: 55vh;
    animation-name: ballon-move;
    animation-duration: var( --duration );
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite
}

#clouds {

    position: fixed;
    height: 50vh;
    animation: cloud-move var( --duration ) ease-in-out infinite, cloud-long-move calc( var( --duration ) * 8 ) linear infinite;
}

@keyframes cloud-long-move {
    0% {
        left: -50%;
        opacity: 0;
    }
    2%{
        opacity: 1;
    }
    98%{        
        opacity: 1;
    }
    100% {
        left: 200%;
        opacity: 0;
    }
}

@keyframes cloud-move {
    0% {
        top: 100%;
        transform: translateY( -100% ) translateX( -50% );
    }
    45% {
        top: 100%;
        transform: translateY( -100% ) translateX( -50% );
    }
    48% {
        top:0%;
        transform: translateY( 0% ) translateX( -50% );
    }
    51% {
        top: 5%;
        transform: translateY( 0% ) translateX( -50% );
    }
    90% {
        top: 5%;
        transform: translateY( 0% ) translateX( -50% );
    }
    95% {
        top: 105%;
        transform: translateY( -100% ) translateX( -50% );
    }
    100% {
        top: 100%;
        transform: translateY( -100% ) translateX( -50% );
    }
}

#contanct{
    display: flex;
    flex-direction: column;
    position: fixed;
    left: calc( 100% - 3em );
    bottom: 10vh;
    width: 15em;
    background-color: #fdd9c9;
    border: 3px solid white;
    border-radius: 1em;
    padding: 1em .5em;
    transition: all 1s ease-in-out;
    row-gap: 1em;
    font-size: larger;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#contanct:hover {
    left: calc( 100% - 15em );
    transition: all 1s ease-in-out;
}

i{
    margin-right: 1em;
    margin-left: .5em;
}

a{
    color: black;
    text-decoration: none;
}

#contanct .icon {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

#contanct .icon i::before{
    vertical-align: middle;
    line-height: 1.5em;
}

#contanct .icon p{
    margin: 0;
    padding-right: .75em;
}

.fa-brands, .fab {
    font-weight: 900!important;
}