@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

.water{
    position: absolute;
    top: 0%;
    width: 100%;
    height: 100%;
    z-index: 1;
    rotate: 180deg;

} 
.shipü{
    color: white;
    font-size: 7vmin;
    z-index: 2;
    font-family:'Source Sans Pro', sans-serif;
    position: absolute;
    width: 50%;
    right: 25%;
    top: 20%;
    padding: 2%;
    animation: überschrift4 2s ease-in;
    animation-timing-function: linear;
}
.ship1{
    position: absolute;
    z-index: 3;
    animation: überschrift3 2s ease-in;
    animation-timing-function: linear;
    top: 48%;
    width: 50%;
    right: 26%;
}
@keyframes überschrift3{
    10%{
        right: 100%;
    }
    100%{
        right: 25.5%;  
    }
}
@keyframes überschrift4{
    10%{
        right: 100%;
    }
    100%{
        right: 25%;  
    }
}
.ship2{
    position: absolute;
    z-index: 3;
    animation: überschrift5 2s ease-in;
    animation-timing-function: linear;
    top: 43%;
    width: 5%;
    right: 50%;
    transform: rotate(-90deg);
    height: 50%;
}
@keyframes überschrift5{
    10%{
        right: 100%;
    }
    100%{
        right: 50%;  
    }
}
@keyframes überschrift6{
    10%{
        right: 100%;
    }
    100%{
        right: 20%;  
    }
}
.einleitung_ship{
    color: white;
    font-size: 3vmin;
    z-index: 2;
    font-family:'Source Sans Pro', sans-serif;
    position: absolute;
    width: 50%;
    right: 25%;
    top: 73%;
    padding: 1%;
    animation: überschrift7 2s ease-in;
    animation-timing-function: linear;
    text-align: center;
}
@keyframes überschrift7{
    10%{
        right: 110%;
    }
    100%{
        right: 25%;  
    }
}
.aufgabe{
    z-index: 5;
    position: absolute;
    top: 120%;
    left: 5%;
    font-size: 3vmin;
    color: white;
    font-family:'Source Sans Pro', sans-serif;
    right: 5%;
    text-align: center;
}
h4{
    color: turquoise;
    font-size: 5vmin;
}
.roboter{
    z-index: 5;
    position: absolute;
    top: 170%;
    left: 5%;
    font-size: 3vmin;
    color: white;
    font-family:'Source Sans Pro', sans-serif;
    right: 5%; 
    text-align: center;
}
.ende{
    top: 3000px;
}
.schiffbau{
    z-index: 5;
    position: absolute;
    top: 220%;
    left: 5%;
    font-size: 3vmin;
    color: white;
    font-family:'Source Sans Pro', sans-serif;
    right: 5%;
    text-align: center;
}
.ship3{
    position: absolute;
    z-index: 2;
    right: 65%;
    top: 88%;
    animation: ship3 2s ease-in;
    animation-timing-function: linear;
}
.ship4{
    position: absolute;
    z-index: 4;
    right: 10%;
    top: 18%;
    animation: ship4 2s ease-in;
    animation-timing-function: linear;
}
@keyframes ship3{
    10%{
        right: -100%;
    }
    100%{
        right: 65%;  
    }
}
@keyframes ship4{
    10%{
        right: -100%;
    }
    100%{
        right: 10%;  
    }
}