:root {
    --rotate-origin-1: 518.07px 256.978px;
    --rotate-origin-2: 154.55px 241.995px;
    --rotate-origin-3: 320.135px 143.349px;
    --rotate-origin-4: 200.67px 493.717px;
    --g5-transform-origin: 432.173px 386.175px;
    --g6-transform-origin: 489.555px 303.945px;
    --g7-transform-origin: 231.468px 295.189px;
    --g8-transform-origin: 244.032px 551.719px;
    --g9-transform-origin: 186.359px 411.146px;
    --g10-transform-origin: 480.296px 411.146px;
}

.error {
    min-height: 100vh;
    width: 100%;
}


.error h2 {
    font-size: 100px;
}

#spaceman {
    animation: bounce 3s infinite;
}

#circlesBig,
#circlesSmall {
    animation: circleBounce 5s infinite;
}

#glassShine {
    animation: shine 8s infinite;
    animation-timing-function: ease-in-out;
}

#planet {
    transform-origin: 600px 30px;
    animation: tilt 3s infinite;
    animation-timing-function: ease-in-out;
}

#g1 {
    transform-origin: var(--rotate-origin-1);
    animation: rotate 1s infinite;
    animation-timing-function: ease-in-out;
}

#g2 {
    transform-origin: var(--rotate-origin-2);
    animation: rotate 1s infinite;
    animation-timing-function: ease-in-out;
}

#g3 {
    transform-origin: var(--rotate-origin-3);
    animation: rotate 1s infinite;
    animation-timing-function: ease-in-out;
}

#g4 {
    transform-origin: var(--rotate-origin-4);
    animation: rotate 1s infinite;
    animation-timing-function: ease-in-out;
}

#g5 {
    transform-origin: var(--g5-transform-origin);
    animation: spark 3s infinite;
    animation-timing-function: ease-in-out;
}

#g6 {
    transform-origin: var(--g6-transform-origin);
    animation: spark 2s infinite;
    animation-timing-function: ease-in-out;
}

#g7 {
    transform-origin: var(--g7-transform-origin);
    animation: spark 4s infinite;
    animation-timing-function: ease-in-out;
}

#g8 {
    transform-origin: var(--g8-transform-origin);
    animation: spark 2s infinite;
    animation-timing-function: ease-in-out;
}

#g9 {
    transform-origin: var(--g9-transform-origin);
    animation: spark 3s infinite;
    animation-timing-function: ease-in-out;
}

#g10 {
    transform-origin: var(--g10-transform-origin);
    animation: spark 1s infinite;
    animation-timing-function: ease-in-out;
}


@keyframes bounce {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes circleBounce {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0px);
    }
}

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

    50% {
        transform: rotate(-30deg);
    }

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

@keyframes tilt {
    0% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(-2deg);
    }
}

@keyframes shine {
    0% {
        transform: translateX(-500px);

    }

    100% {
        transform: translateX(1900px);
    }
}

@keyframes spark {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0);
    }

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

#e1,
#e2,
#e3 {
    color: #d8d8d8;
}