@keyframes bg {
    0%  {opacity: 1;}
    80%  {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes bgaus {
    0%  {opacity: 0;}
    40%  {opacity: 0;}
    60% {opacity: 1;}
}

@keyframes birne {
    0%  {opacity: 0;}
    40%  {opacity: 0;}
    42%  {opacity: 0.1;}
    44%  {opacity: 0;}
    46%  {opacity: 0.1;}
    48%  {opacity: 0;}
    50%  {opacity: 1;}
    52%  {opacity: 0;}
    80%  {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes birneaus {
    0%  {opacity: 1;}
    0%  {opacity: 1;}
    2%  {opacity: 0.6;}
    4%  {opacity: 1;}
    6%  {opacity: 0.6;}
    8%  {opacity: 1;}
    10%  {opacity: 0;}
    12%  {opacity: 1;}
    40%  {opacity: 1;}
    60% {opacity: 0;}
}

@keyframes birnenausr {
    0% {height: 100%}
    75% {height: 100%}
    100% {height: 50%}
}

@keyframes fadein {
    0% {opacity: 0;
        margin-bottom: -25vw;
        background: none;
    }
    75% {opacity: 0;
        margin-bottom: -25vw;
            background: none;
}
    
    100% {opacity: 1;
        margin-bottom: 0;}
}

@keyframes buttonfadein {
    0% {opacity: 0;
    }
    70% {opacity: 0;
}
    
    100% {opacity: 1;
        margin-bottom: 0;}
}

*{
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: meins;
	src: url("cyka.ttf");
}


#schwarz {
    opacity: 0;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: black;
    z-index: 200;
    animation: 5s bg;
}


#birnenausrichter {
    position: fixed;
    height: 50%;
    width: 100%;
    
    display: flex; 
    align-items: center;
    justify-content: center;
    text-align: center;
    
    z-index: 300;
    animation: 7s birnenausr;
    animation-timing-function: ease;
}

#birne {
    opacity: 1;
    height: 36vh;
    width: 30vh;
    max-height: 337px;
    max-width: 280px;
    background: url(birne.png) no-repeat;
    background-size: 100%;
    animation: 5s birne;
}

#buttonausrichter {
    position: fixed;
    height: 10vh;
    width: 100vw;
    top: 50vh;
    
     display: flex; 
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 400;
   
}

#button {
    height: 10vh;
    width: 10vh;
    background: url(button.png) no-repeat;
    background-position: center;
    background-size: auto 100%;
    z-index: 400;
     animation: 10s buttonfadein;
    animation-timing-function: ease;
    
    
}

#button:hover {
    background: url(buttonhover.png) no-repeat;
    background-position: center;
    background-size: auto 100%;
/*    cursor: pointer;*/
    
}

#text {
    position: fixed;
    height: 30vh;
    width: 100vw;
    bottom: 0;
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    
    
    font-size: 5vmin;
    font-family: meins;
    animation: 7s fadein;
    animation-timing-function: ease;
    
}

#off:target #birne{
    opacity: 0;
    animation: 5s birneaus;
}

#off:target #schwarz {
    z-index: 9000;
    opacity: 1;
    animation: 5s bgaus;
}