@charset "UTF-8";
/* CSS Document */
body {
    font-family: 'helvetica', sans-serif;
}





#perfect {
    position: absolute;
    top: 200px;
    left: 50%;
    z-index: 10;

    font-size: 90px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    text-align: center;

}

#eggs {
    position: absolute;
    top: 1220px;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;

    font-size: 50px;

}


#butter {
    position: absolute;
    top: 1310px;
    margin-left: 50%;
    font-size: 50px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;

}

#fillings {
    position: absolute;
    top: 1405px;
    z-index: 10;
    left: 50%;
    font-size: 50px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;

}




.key {

    display: inline-block;
    letter-spacing: -10vw;
    transition: transform 0.9s;
    line-height: 0%;
}

.CRACK {
    position: absolute;
    top: 1900px;

    font-size: 30vw;
    line-height: 80%;





}


@keyframes pressDown2 {

    30%,
    40%,
    100% {
        transform: translateY(0);
    }

    39% {
        transform: translateY(25px);
    }
}

.key:nth-child(2) {
    animation: pressDown2 1s infinite;
}

@keyframes pressDown9 {

    30%,
    40%,
    100% {
        transform: translateY(0);
    }

    39% {
        transform: translateY(25px);
    }
}

.key:nth-child(9) {
    animation: pressDown9 1.5s infinite;
}

/*
keyboard press effect stammt von: https://codepen.io/bradleytaunt/pen/ExjJzZL

*/


@keyframes fontGrow {
    0% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.2);
    }

    100% {
        transform: scaleY(1);
    }
}




@keyframes fontGrowReverse {
    0% {
        transform: scaleY(1.3);
    }

    50% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(1.3);
    }



}

@keyframes fontGrowU {
    0% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.2);
    }

    100% {
        transform: scaleY(1);
    }
}


@keyframes fontGrowReverseU {
    0% {
        transform: scaleY(1.2);
    }

    50% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(1.2);
    }
}

/*
text animation stammt von: https://codepen.io/bradleytaunt/pen/ExjJzZL
*/





.box {
    position: absolute;
    top: 3040px;
    left: 47%;
    font-size: 90px;
    line-height: 100%;
    text-align: center;
    z-index: 20;
    transform: translateX(-50%);

}

.bold {
    font-weight: bold;



}




#melt {
    position: absolute;
    top: 4600px;
    left: 5%;
    font-size: 440px;


}

#butterr {
    position: absolute;
    top: 4950px;
    left: 5.2vw;

    font-size: 440px;

}

#pour {
    position: absolute;
    top: 5980px;
    left: 30%;
    font-size: 175px;
    z-index: 10;
}

#eggsss {
    position: absolute;
    top: 6085px;
    left: 45%;
    font-size: 175px;
    z-index: 10;
}

#into {
    position: absolute;
    top: 6175px;
    left: 30%;
    font-size: 175px;
    z-index: 10;
}

#pan {
    position: absolute;
    top: 6285px;
    left: 40%;
    font-size: 175px;
    z-index: 10;
}




#whisk {
    position: absolute;
    top: 3600px;
    left: 30%;
    font-size: 290px;
    animation-name: fontGrowU;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transform-origin: top, bottom;
    transition-timing-function: ease-in-out;
    transform: translateX(-50%);
}

#whiskk {
    position: absolute;
    top: 3850px;
    left: 23%;
    font-size: 290px;
    animation-name: fontGrowReverseU;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transform-origin: top, bottom;
    transition-timing-function: ease-in-out;
    transform: translateX(-50%);
}

#whiskkk {
    position: absolute;
    top: 4100px;
    left: 33%;
    font-size: 290px;
    animation-name: fontGrowU;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transform-origin: top, bottom;
    transition-timing-function: ease-in-out;
    transform: translateX(-50%);
}

#hope {
    position: absolute;
    top: 6800px;
    left: 52%;
    font-size: 100px;
    text-align: center;
    transform: translateX(-50%);
}

#go {
    position: absolute;
    top: 7330px;
    left: 37%;
    transform: translateX(-70%);

    font-size: 390px;


}

canvas {
    position: absolute;
    top: 8070px;
    right: 2vw;
    z-index: 0;


}



#with {
    position: absolute;
    top: 8100px;
    left: 50%;

    font-size: 380px;
    text-align: left;
    line-height: 0%;
    transform: translateX(-50%);

}

#fillingss {
    position: absolute;
    top: 8300px;
    left: 50%;

    font-size: 380px;
    text-align: left;
    line-height: 80%;
    transform: translateX(-50%);

}


#carefully {
    position: absolute;
    top: 9250px;
    left: 10%;
    font-size: 250px;
    line-height: 85%;
    text-align: left;
    transform: rotate(0deg);

}

#enjoy {
    position: absolute;
    top: 9785px;
    left: 51.5%;
    font-size: 599px;

    text-align: center;
    transform: translateX(-50%);


}

#svg {

    width: 1455px;
    height: auto;
    margin-top: 100px;
    margin-left: 290px;

}

.container {
    position: absolute;

    top: 720px;
    left: 50%;

    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    z-index: 10;

}


.linie {

    stroke-dashoffset: 1;
    stroke-dasharray: 1;
    animation: line-animation 1s linear forwards;
    animation-timeline:
        scroll();
    animation-range-start: 0%;
    animation-range-end: 100%;

}



@keyframes line-animation {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/*
Funktion der animierten svg Linie stammt aus einem youtube Tutorial: https://www.youtube.com/watch?v=GT0P15xAQpc&t=41s
*/

.hidden {
    opacity: 0;
    transition: 1s;
    height: 50px;

}

.show {
    opacity: 1;
}