/* ---- www.landleren.be ---- */

*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    
    
}

body {
    min-height: 1000px;
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    background: url(../img/achtergrond.webp);
    background-size: cover;
    background-repeat: repeat;
}

.shapes {
    overflow: hidden;
}

.shapes .rocket {
    z-index: 200 !important;
    
}

.shapes .rocket-holder {
    animation:up-down infinite ;    
    animation-direction: alternate;
    animation-duration: 200ms;
    z-index: 100 !important;
    position: absolute;
    top: 47%;
    left:30%;
}

 @keyframes up-down {
    100% {transform: translateY(0px);}
    0% {transform: translateY(2px);}
} 

/*
@keyframes rocket {
    0% {transform:translateX(0px)}
    100% {transform:translateX(-4000px)}
}
*/

.final {
    position: absolute;
    top: 45%;
    left: 50%;
    animation:final 15s normal ;
    z-index: 100;
}

.planetenreeksTwee {
    position: absolute;
    top: 50%;
    left: 10%;
    animation:final 15s normal ;
    z-index: 100;
}

.planetenreeksDrie {
    position: absolute;
    top: 50%;
    left: 30%;
    animation:final 15s normal ;
    z-index: 100;
}

.planetenreeksVier {
    position: absolute;
    top: 50%;
    left: 35%;
    animation:final 15s normal ;
    z-index: 100;
}

/*
@keyframes final {
    0% {transform:translateX(5000px)}
    100% {transform:translateX(0px)}
}
*/

@keyframes planetenreeksTwee {
    0% {transform:translateX(5000px)}
    50% {transform:translateX(0px)}
}

@keyframes planetenreeksDrie {
    0% {transform:translateX(5000px)}
    100% {transform:translateX(0px)}
}

@keyframes planetenreeksVier {
    0% {transform:translateX(5000px)}
    50% {transform:translateX(0px)}
}


.final img {
    position: absolute;
    
}

.planetenreeksTwee img {
    position: absolute;
} 

.planetenreeksDrie img {
    position: absolute;
}

.planetenreeksVier img {
    position: absolute;
}


a>img{
    transition: filter 0.5s ease;
}

 a>img:hover {
    filter: contrast(1.25);
}

.final .astronaut {
    width: 100px;
    top: 0px;
    animation:up-down-final  infinite ;    
    animation-direction: alternate;
    animation-duration: 1s;
    
}
.final .planet10 {
    animation:up-down-final  infinite ;    
    animation-direction: alternate;
    animation-duration: 2s;
    bottom: 10%;
}
.final .planet11 {
    animation:up-down-final  infinite ;    
    animation-direction: alternate;
    animation-duration: 2s;
    animation-delay: 2s;
   top: 10%;
}

.planetenreeksTwee .planet12 {
    position: absolute;
    animation:up-down-final  infinite ;    
    animation-direction: alternate;
    animation-duration: 2s;
    animation-delay: 2s;
    top: 50px;
}

.planetenreeksDrie .planet14 {
    position: absolute;
    animation:up-down-final  infinite ;    
    animation-direction: alternate;
    animation-duration: 2s;
    animation-delay: 2s;
    bottom: 20%;
}

.planetenreeksVier .planet15 {
    position: absolute;
    animation:up-down-final  infinite ;    
    animation-direction: alternate;
    animation-duration: 2s;
    animation-delay: 2s;
    top: 65px;
}

.planetenreeksTwee .planet13 {
    animation:up-down-final  infinite ;    
    animation-direction: alternate;
    animation-duration: 2s;
    bottom: 20%;
}

@keyframes up-down-final {
    100% {transform: translateY(0px);}
   0% {transform: translateY(10px);}
}