* {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome and Opera */

}

#picpreload {
    display: none;
}

body {
    background-color: black;
    background-image: url(img/bg1.jpg);
    background-size: cover;
    margin: 0;
    color: white;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
}

#startklick {
    width: 100vw;
    height: 100vh;
    text-align: center;
    background-color: black;
}

#klicktostart {
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    color: red;
    background-color: white;
    border-radius: 20px;
    border: 4px solid black;
    font-size: 2vw;
    text-align: center;
    padding: 20px;
}

#ladybird {
    width: 90vw;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);
}

#anleitungscreen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-items: center;
    border: 3px solid white;
    border-radius: 20px;
    /*     font-size: 4vmin;
 */
    padding: 2%;
    background-color: darkgreen;
    box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.045),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.065),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.08),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.095),
        41.8px 41.8px 33.4px rgba(0, 0, 0, 0.115),
        100px 100px 80px rgba(0, 0, 0, 0.16);
}

.middle {
    display: grid;
    place-items: center;
}

#select {
    width: 90vw;
    position: absolute;
    bottom: 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

}

.select {
    box-shadow: 0px 0px 28px 14px #a4e271;
    background: linear-gradient(to bottom, #89c403 5%, #77a809 100%);
    background-color: #89c403;
    border-radius: 42px;
    border: 3px solid #74b807;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 2vw;
    font-weight: bold;
    font-style: italic;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 8px #528009;
    margin: 2%;
    width: fit-content;
}

.select:hover {
    background: linear-gradient(to bottom, #77a809 5%, #89c403 100%);
    background-color: #77a809;
}

h1 {
    width: 100vw;
    color: white;
    text-align: center;
    font-size: 5rem;
}

#auswahlscreen {
    background-image: url(img/bg1.jpg);
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

.levelbutton {
    line-height: 100px;
    text-align: center;
    opacity: 0.6;
    flex-wrap: wrap;
    background-color: #ffffff;
    color: black;
    font-size: 40px;
    width: 18vw;
    height: 100px;
    border-radius: 10px;
    margin: 5px;
    box-shadow:
        1.4px 1.4px 2.2px rgba(0, 0, 0, 0.09),
        3.3px 3.3px 5.3px rgba(0, 0, 0, 0.129),
        6.3px 6.3px 10px rgba(0, 0, 0, 0.16),
        11.2px 11.2px 17.9px rgba(0, 0, 0, 0.191),
        20.9px 20.9px 33.4px rgba(0, 0, 0, 0.23),
        50px 50px 80px rgba(0, 0, 0, 0.32);
}

.levelbutton50 {
    line-height: 100px;
    text-align: center;
    opacity: 0.4;
    flex-wrap: wrap;
    background-color: #ff0000;
    color: white;
    font-size: 40px;
    width: 18vw;
    height: 100px;
    border-radius: 10px;
    margin: 5px;
    box-shadow:
        1.4px 1.4px 2.2px rgba(0, 0, 0, 0.09),
        3.3px 3.3px 5.3px rgba(0, 0, 0, 0.129),
        6.3px 6.3px 10px rgba(0, 0, 0, 0.16),
        11.2px 11.2px 17.9px rgba(0, 0, 0, 0.191),
        20.9px 20.9px 33.4px rgba(0, 0, 0, 0.23),
        50px 50px 80px rgba(0, 0, 0, 0.32);
}

.levelbutton:hover {
    opacity: 1;
cursor: pointer;

}

#gestorbenscreen,
#textDone,
#gameover {
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    color: red;
    background-color: white;
    opacity: 0.0;
    border-radius: 20px;
    border: 4px solid black;
    font-size: 2vw;
    text-align: center;
    padding: 20px;
    width: fit-content;
    animation: gestorbenAnim 3s linear normal;
}

/* #textDone {
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    color: red;
    background-color: white;
    opacity: 0.0;
    border-radius: 20px;
    border: 4px solid black;
    font-size: 2vw;
    text-align: center;
    padding: 20px;
    width: fit-content;
    animation: textDone 2s linear normal;
} */

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

    10% {
        opacity: 0.5;
    }

    90% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

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

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#spielscreen {
    height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#direction1,
#direction2 {
    max-width: 75%;
}

canvas {
    max-width: 80vw;
    max-height: 95%;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 20px;
    box-shadow:
        0px 0px 1.6px rgba(0, 0, 0, 0.101),
        0px 0px 3.5px rgba(0, 0, 0, 0.149),
        0px 0px 5.9px rgba(0, 0, 0, 0.184),
        0px 0px 8.9px rgba(0, 0, 0, 0.213),
        0px 0px 12.8px rgba(0, 0, 0, 0.24),
        0px 0px 18.1px rgba(0, 0, 0, 0.267),
        0px 0px 25.6px rgba(0, 0, 0, 0.296),
        0px 0px 37.2px rgba(0, 0, 0, 0.331),
        0px 0px 57.4px rgba(0, 0, 0, 0.379),
        0px 0px 102px rgba(0, 0, 0, 0.48);
}

#rechts,
#links {
    display: grid;
    place-items: center;
    text-align: center;
    background-color: darkgreen;
    color: white;
    font-size: 2vmax;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 20px;
    opacity: 0.9;
    width: 20vw;
    height: 70vh;
cursor: pointer;

}

#restleben {
    max-width: 100%;
    height: auto;
}

#kaeferrest {
    max-width: 100%;
    height: auto;

}

.einblenden {
    animation: einblenden 0.4s;
    -moz-animation: einblenden 0.4s;
    /* Für Firefox */
    -webkit-animation: einblenden 0.4s;
    /* Für Safari und Chrome */
    -o-animation: einblenden 0.4s;
    /* Für Opera */
}

@keyframes einblenden {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes einblenden {

    /* Für Firefox */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes einblenden {

    /* Für Safari und Chrome */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-o-keyframes einblenden {

    /* Für Opera */
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#blackscreen {
    cursor: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-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: 10vmin;
    }

}

@keyframes anim3 {

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

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