body {
    padding: 0;
    margin: 0;
}

a {
    position: absolute;
    text-decoration: none;
    border: solid black 1px;
    padding: 5px 15px 5px 15px;
    margin: 15px 0 0 15px;
    color: black;
    z-index: 20;
    font-family: Thasadith;
}

a:hover {
    color: white;
    background-color: black;
}

#avion {
    animation: mover 6s ease-in infinite;
    transform: translateX(-350px);
}

@-webkit-keyframes mover {
    0% {
        -webkit-transform: translateX(-350px);
    }
    100% {
        -webkit-transform: translateX(1280px);
    }
}

@-moz-keyframes mover {
    0% {
        -moz-transform: translateX(-350px);
    }
    100% {
        -moz-transform: translateX(1280px);
    }
}

@-o-keyframes mover {
    0% {
        -o-transform: translateX(-350px);
    }
    100% {
        -o-transform: translateX(1280px);
    }
}

@keyframes mover {
    0% {
        transform: translateX(-350px);
    }
    100% {
        transform: translateX(1280px);
    }
}

#utbm {
    -webkit-animation: slide-in-left .5s cubic-bezier(.25, .46, .45, .94) both;
    animation: slide-in-left .5s cubic-bezier(.25, .46, .45, .94) both
}

@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

#trottoir, #route {
    -webkit-animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) both;
    animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) both
}

@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

#ciel {
    -webkit-animation: slide-in-top .5s cubic-bezier(.25, .46, .45, .94) both;
    animation: slide-in-top .5s cubic-bezier(.25, .46, .45, .94) both
}

@-webkit-keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

#perso-fenetre {
    animation: opacity 2s ease both 1s;
}

#perso-fenetre2 {
    animation: opacity 2s ease both 2s;
}

#perso-fenetre3 {
    animation: opacity 2s ease both 1.4s;
}

@keyframes opacity {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0.6;
    }
}

#sun {
    -webkit-animation: slide-in-blurred-top .5s cubic-bezier(.23, 1.000, .32, 1.000) both;
    animation: slide-in-blurred-top .7s cubic-bezier(.23, 1.000, .32, 1.000) both 1.6s;
}

@-webkit-keyframes slide-in-blurred-top {
    0% {
        -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
        transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
        transform: translateY(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1
    }
}

@keyframes slide-in-blurred-top {
    0% {
        -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
        transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
        transform: translateY(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1
    }
}