body {
 
    color: white;
    overflow: hidden;
    margin: 0;
    background-color: darkgreen;
    font-family: 'Play', sans-serif;
    width: 100vw;
    max-height: 100vh;
}
a {
    color: grey;
    font-size: 4vmin;

}
@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeinGameOver {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.75;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
@keyframes flug {
0% {left: 100vw; /* 2000px */
    top: -200px;}
40% {left: 50vw; /* 600px*/
    top: 10vh;}
60% {left: 50vw; /* 600px */
    top: 40vh;}
100% {left: 0vw; /* -200px */
top: -200px;}
    
}
#helianim {
    position: absolute;
    top: 150px;
animation: flug 30s infinite;
}

#endscreen {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    padding: 20px;
    background-color: aliceblue;
    z-index: 3;
    text-align: center;
    align-content: center;
    line-height: 100%;
    color: red;
    opacity: 60%;
}


#steuerung {
    display: grid;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 5vmax;
    z-index: 2;
    grid-template: auto 1fr auto / auto 1fr auto;
    opacity: 0;
}

#links,
#rechts {
    width: 25vw;
    background-color: rgb(22, 22, 22);
    color: green;
    border: solid 10px;
    border-color: darkgreen;
    padding-top: 10%;
}

#links {
    grid-column: 1 / 2;
}

#rechts {
    grid-column: 3 / 4;
}

#hoch,
#runter {
    color: green;
    background-color: rgb(22, 22, 22);
    height: 15vh;
    border: solid 10px;
    border-color: darkgreen;
    padding-top: 3%;
}

#hoch {
    grid-column: 1 / 4;
}

#runter {
    grid-column: 1 / 4;
}

#leertaste {
    background-color: rgb(22, 22, 22);
    grid-column: 2 / 3;
    border: solid 10px;
    border-color: darkgreen;
    padding-top: 5%;
}



#spielbildschirm {
    width: 100vw;
    height: 100vh;
    cursor: none;
    animation: fadein 1s;
}

canvas {
    width: 80vw;
    height: 100vh;
}


h1 {
    font-size: 6vmin;
}

h2 {
    font-size: 3vmin;
}

#levelauswahl {
    cursor: pointer;
    animation: fadein 1s;
}

#leveltabelle {
    width: 100vw;
    height: 100vh;
    text-align: center;
    font-size: 1vmax;
}

.minilevel {
    border: 2px solid;
    width: 30%;
    height: 30%;
}

.smallImg {
    width: 100%;
    height: auto;
}

#startbildschirm {
    background: url(img/luftbild.jpg);
    background-size: cover;
    background-attachment: fixed;
    text-align: center;
    padding: 5px;
    cursor: none;
    height: 100vh;
    width: 100vw;
    animation: fadein 1s;
}

#starttext {
    font-size: 4vmin;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.rahmen {
    background-color: darkgreen;
    margin: 15px;
    padding: 5px;
    border-style: solid;
    border-color: aliceblue;
}

/*#blackscreen {
    height: 100vh;
    width: 100vw;
    background-color: black;
    text-align: center;
    font-size: 6vmin;
    animation: fadein 1s;
}*/

#history {
    font-size: 4vmin;
    ;
    color: green;
}

#seitenleiste {
    background-color: rgb(0, 70, 0);
    text-align: center;
    width: 20vw;
    height: 100vh;
    font-size: 1.5vmax;
}

#auftrag {
    display: grid;
    place-items: center;
    min-height: 20%;
}

#anleitung {
    display: block;
    width: 100%;
    max-height: 100vh;
    text-align: center;
    cursor: none;
}

#split {
    display: flex;
}

#anleitunglinks {
    color: black;
    background-color: lightgrey;
    width: 50%;
}

#anleitungrechts {
    margin: 2px;
    padding: 2%;
    text-align: center;
    background-color: darkgreen;
    width: 50%;
    border: 2px;
    border-style: solid;
    border-radius: 5%;
    font-size: 2vmin;
}

#endscreen,
button {
    font-size: 4vmin;

}

.tastenbild {
    height: 5vmin;
    width: auto;
}

#landingbild {
    height: 1vmin;
    width: auto;
}

#blocksatz {
    text-align: justify;
}

#zeitung {
    width: 100%;
}

#F {
    color: black;
    /*    font-family: 'Anton', sans-serif;   Aktivieren, falls es Frankenpost heissen darf
    font-style: italic; */
    font-family: 'UnifrakturMaguntia', cursive;
    font-size: 7vmin;
    /* alt = 5vmin */
    letter-spacing: 0.3vmax;
}

#rankenpost {
    color: black;
    /*    font-family: 'Anton', sans-serif;   Aktivieren, falls es Frankenpost heissen darf
    font-style: italic; */
    font-family: 'UnifrakturMaguntia', cursive;
    font-size: 4.5vmin;
    /* alt = 3.5vmin */
    letter-spacing: 0.3vmax;
}

#roterBalken {
    background-color: red;
    color: white;
    height: fit-content;
    width: 100%;
    text-align: left;
    font-size: 1.8vmin;
    position: relative;
    top: -2.5em;
}

.zeitungsspalten {
    border: 1;
    text-align: justify;
    width: 50%;
    color: black;
    padding: 2%;
    font-size: 2.1vmin;
}


#gameover {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 25%;
    background-color: darkgreen;
    z-index: 3;
    text-align: center;
    font-size: 10vmin;
    color: aliceblue;
    animation: fadeinGameOver 2s normal backwards;
}

#blackscreen {
    display: grid;
    place-items: center;
    height: 100vh;
    width: 100vw;
    background-color: black;
    color: aliceblue;
    font-size: 4vmin;
    overflow: hidden;
    text-align: center;
}


.LOGOname {
    opacity: 0;
    width: 0vw;
    background-color: rgb(20, 20, 20);
    border: 1vmin;
    border-style: solid;
    border-color: darkred;
    border-radius: 0%;
    padding: 0%;
    text-align: center;
    animation: anim2 2s;
    animation-fill-mode: forwards;
}

.LOGOa {
    color: grey;
    animation: anim3 3s;
}
.LOGOp{
    animation: anim3 3s;
}

.LOGOspiel {
    opacity: 0;
    font-size: 0vmin;
    animation: anim1 1s;
    animation-fill-mode: forwards;
}

@keyframes anim2 {
    from {
        opacity: 0;
        width: 0vw;
        font-size: 0vmin;
        padding: 0%;
    }

    to {
        opacity: 1;
        width: 60vw;
        font-size: 4vmin;
        padding: 5%;
    }
}

@keyframes anim1 {

    from {
        opacity: 0;
        font-size: 0vmin;
    }

    to {
        opacity: 1;
        font-size: 8vmin;
    }

}

@keyframes anim3 {

    from {
        opacity: 0;
        font-size: 0vmin;
    }

    to {
        opacity: 1;
        font-size: 4vmin;
    }

}