body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    h1,h2{
        font-family: 'Minecraft Heading', sans-serif;
    }

    h1{
        font-family: 'Minecraft Heading', sans-serif;
        font-size: calc(var(--scale) * 5.14);
        -webkit-text-stroke: 2px #1a1a1a;

        text-shadow:
            4px 4px 0px var(--gray),
            8px 8px 0px var(--dark-gray);

        transform: perspective(300px) rotateX(8deg) skewX(-1deg);
        transform-origin: center bottom;
        display: block;
        letter-spacing: 0.05em;
    }

    h2{
        font-family: 'Minecraft Heading', sans-serif;
        font-size: calc(var(--scale) * 2.05);
        -webkit-text-stroke: 1.5px #1a1a1a;

        text-shadow:
            2px 2px 0px var(--gray),
            4px 4px 0px var(--dark-gray);

        letter-spacing: 0.12em;
    }

    header{
        margin-bottom: calc(var(--scale) * 2.8);
    }

    /* Knoppen */
    .werelden{
        margin-top: calc(var(--scale) * 0.7);
    }

    .btn-row{
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        margin-top: calc(var(--scale) * 0.7);
    }

    .btn-row > .btn{
        width: 18.4vw;
    }

    /* Tekst links */
    footer p:first-child{
        position: absolute;

        bottom: 0;
        left: 0.2em;

        color: var(--white);
    }

    /* Tekst rechts */
    footer p:last-child{
        position: absolute;

        bottom: 0;
        right: 0.2em;

        color: var(--white);
    }
}

/* --------------------------------------------------------------------------------- MARK: CREEPER EXPLOSIE
*/

.creeper-overlay{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: calc(var(--scale) * 14);
    image-rendering: pixelated;
    z-index: 100;
    pointer-events: none;
}

.creeper-overlay.charging{
    animation: creeper-charge 2s ease-in forwards;
}

.creeper-overlay.exploding{
    animation: creeper-explode 0.35s ease-out forwards;
}

@keyframes creeper-charge{
    0%   { transform: translate(-50%, -50%) scale(0.1)  rotate(0deg); }
    10%  { transform: translate(-50%, -50%) scale(0.22) rotate(-6deg); }
    20%  { transform: translate(-50%, -50%) scale(0.38) rotate(6deg); }
    30%  { transform: translate(-50%, -50%) scale(0.52) rotate(-9deg); }
    40%  { transform: translate(-50%, -50%) scale(0.68) rotate(9deg); }
    50%  { transform: translate(-50%, -50%) scale(0.82) rotate(-12deg); }
    60%  { transform: translate(-50%, -50%) scale(1)    rotate(12deg); }
    70%  { transform: translate(-50%, -50%) scale(1.25) rotate(-14deg); filter: brightness(1); }
    80%  { transform: translate(-50%, -50%) scale(1.55) rotate(14deg);  filter: brightness(1.4); }
    90%  { transform: translate(-50%, -50%) scale(1.85) rotate(-8deg);  filter: brightness(2); }
    100% { transform: translate(-50%, -50%) scale(2.2)  rotate(0deg);   filter: brightness(3); }
}

@keyframes creeper-explode{
    0%   { transform: translate(-50%, -50%) scale(2.2); opacity: 1; filter: brightness(8); }
    100% { transform: translate(-50%, -50%) scale(7);   opacity: 0; filter: brightness(20); }
}

.explosion-flash{
    position: fixed;
    inset: 0;
    background: white;
    opacity: 0;
    z-index: 99;
    pointer-events: none;
    transition: none;
}

.explosion-flash.active{
    animation: flash-boom 0.35s ease-out forwards;
}

@keyframes flash-boom{
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    100% { opacity: 0; }
}

/* --------------------------------------------------------------------------------- MARK: SKIN + BOUNCE ANIMATIE
*/

@keyframes bounceRotate {
    0%, 100% {
        transform: rotate(8deg) translateY(0);
    }
    50% {
        transform: rotate(8deg) translateY(-20px);
    }
}

/* Skin staat rechts van de knoppen */
.sela-bounce{
    position: absolute;
    right: 5vw;
    bottom: 15%;

    width: calc(var(--scale) * 9);
    image-rendering: pixelated;

    animation: bounceRotate 1.5s ease-in-out infinite;
}