footer {
background: #006116;
border-top: 5px solid #006116;
box-shadow: 0px -2px 5px #004d0f;
}
body {
background: #22215f;
}
main {
    background: transparent;
}
.content {
opacity: 90%;
}
#spawn-fenster {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.fenster {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 1;
    pointer-events: none;
}

#erstesfenster {
    display: none;
}

main {
    position: relative;
    z-index: 0;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#pyleyalive {
    position: absolute;
    width: 80px;
    left: 2.5%;
    animation: jump 1.5s infinite ease-in-out;
}

#tramp1 {
    position: absolute;
    left: 2%;
    bottom: 0;
    width: 100px;
}

@keyframes jump {
    0%, 100% {
        bottom: 75px;
    }
    50% {
        bottom: var(--jump-height, 300px);
    }
}

@keyframes pyleyFlip {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#pyleyalive {
    transition: transform 0.8s ease-in, opacity 0.8s ease-in;
}



#hintergrundmusik, #jumpsound {
display: none;
}


#bombe {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    z-index: 1000;
    top: -100px;
    transition: width 0.5s ease-out, top 0.1s linear;
}

#gameover-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: black;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#gameover-img {
    width: 100vw;
    height: auto;
    max-width: none !important;
    object-fit: cover;
    display: block;
}