body {
    font-family: "Comic Sans", sans-serif;
}

.cookger {
    width: 64px;
    height: 64px;
    position: absolute;
    left: 8px;
    top: 8px;

    animation: CookgerSpin 2s infinite linear;
}

.cookgerangry {
    position: absolute;
    left: 16px;
    top: 16px;
    width: 32px;
    height: 32px;
    z-index: 9001;

    display: none;
}

.donut {
    position: absolute;
    left: 16px;
    top: 16px;
}

.welcome,
.block2 {
    font-family: "Comic Sans", sans-serif;
    color: white;
    font-weight: 800;
    font-style: italic;
    font-size: 2em;
}

.block2 img {
    animation: Flip 2s infinite;
}

.container {
    border: 5px dotted white;
    padding: 16px;
    margin-bottom: 1em;
}

.titlespheres {
    width: 32px;
    height: 32px;
}

.smoothsliding {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 4em;
    animation: Sliding 4s infinite;
}

.jetger {
    position: fixed;
    width: 4em;
    z-index: 100;
    animation: Jetger 70s infinite;
}

.pengers {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.pengers>div {
    width: 25%;
    max-width: 250px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.pengers img {
    max-width: 100%;
}

.temple {
    border: 3px dashed #73cedd;
    margin-bottom: 32px;
    padding: 64px;
    background-color: #1c1c19;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animations */

@keyframes Jetger {
    from {
        top: 76vh;
        left: 80vw;
    }

    4% {
        top: 62vh;
        left: 95vw;
    }

    8% {
        top: 89vh;
        left: 4vw;
    }

    12% {
        top: 95vh;
        left: 27vw;
    }

    16% {
        top: 27vh;
        left: 83vw;
    }

    20% {
        top: 51vh;
        left: 66vw;
    }

    24% {
        top: 71vh;
        left: 58vw;
    }

    28% {
        top: 61vh;
        left: 59vw;
    }

    32% {
        top: 79vh;
        left: 55vw;
    }

    36% {
        top: 91vh;
        left: 48vw;
    }

    40% {
        top: 70vh;
        left: 59vw;
    }

    44% {
        top: 74vh;
        left: 30vw;
    }

    48% {
        top: 79vh;
        left: 81vw;
    }

    52% {
        top: 90vh;
        left: 21vw;
    }

    56% {
        top: 32vh;
        left: 51vw;
    }

    60% {
        top: 46vh;
        left: 91vw;
    }

    64% {
        top: 48vh;
        left: 31vw;
    }

    68% {
        top: 7vh;
        left: 62vw;
    }

    72% {
        top: 32vh;
        left: 6vw;
    }

    76% {
        top: 53vh;
        left: 25vw;
    }

    80% {
        top: 71vh;
        left: 58vw;
    }

    84% {
        top: 21vh;
        left: 90vw;
    }

    88% {
        top: 3vh;
        left: 20vw;
    }

    92% {
        top: 25vh;
        left: 9vw;
    }

    96% {
        top: 49vh;
        left: 78vw;
    }

    100% {
        top: 76vh;
        left: 80vw;
    }
}

@keyframes Flip {
    from {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(-1);
    }

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

@keyframes Sliding {
    from {
        transform: scaleX(1);
        right: 0px;
    }

    50% {
        transform: scaleX(-1);
        right: calc(100vw - 6em);
    }

    100% {
        transform: scaleX(1);
        right: 0px;
    }
}


@keyframes CookgerSpin {
    from {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(-1);
    }

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

@keyframes Spinny {
    from {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.nav li a span {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}