body {
    padding: 0;
    margin: 0;
    background-color: #0c1330;
}

.container {
    height: 25em;
    width: 16.8em;
    background: linear-gradient(#3f006c,
            #750050,
            #b10042,
            #da4837,
            #f7bb38);
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 1;
    border-radius: 16.8em;
    animation: colors 12s infinite forwards;
    overflow: hidden;
}

@keyframes colors {
    10% {
        background: linear-gradient(#3f006c,
                #750050,
                #b10042,
                #da4837,
                #f7bb38);
    }

    53% {
        background: linear-gradient(#14045f,
                #331a99,
                #282bce,
                #1555ec,
                #1e84f7);
    }

    55% {
        background: linear-gradient(#14045f,
                #331a99,
                #282bce,
                #1555ec,
                #1e84f7);
    }

    98% {
        background: linear-gradient(#3f006c,
                #750050,
                #b10042,
                #da4837,
                #f7bb38);
    }

    100% {
        background: linear-gradient(#3f006c,
                #750050,
                #b10042,
                #da4837,
                #f7bb38);
    }
}

.spinner {
    height: 28.12em;
    width: 28.12em;
    border-radius: 50%;
    position: absolute;
    top: 8.75em;
    left: -5.62em;
    animation: spin 12s infinite forwards;
}

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

    45% {
        transform: rotate(180deg);
    }

    53% {
        transform: rotate(180deg);
    }

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

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

.sun {
    background-color: #f7f7de;
    height: 3.75em;
    width: 3.75em;
    border-radius: 50%;
    position: absolute;
    left: 12.18em;
    top: -1.87em;
}

.sun::before,
.sun::after {
    content: '';
    position: absolute;
    background-color: #ffffff1a;
    border-radius: 50%;
}

.sun::before {
    height: 7.5em;
    width: 7.5em;
    top: -1.87em;
    right: -1.87em;
}

.sun::after {
    height: 12.5em;
    width: 12.5em;
    top: -4.37em;
    right: -4.37em;
}

.ray1 {
    position: absolute;
    height: 0;
    width: 0.6em;
    border-bottom: 10.6em solid #ffffff1a;
    border-left: 1.8em solid transparent;
    border-right: 1.8em solid transparent;
    transform: rotate(130deg);
    bottom: 0.6em;
    right: 4em;
}

.ray2 {
    position: absolute;
    height: 0;
    width: 0.9em;
    border-bottom: 12.5em solid #ffffff1a;
    border-left: 2.1em solid transparent;
    border-right: 2.1em solid transparent;
    transform: rotate(230deg);
    bottom: -0.3em;
    left: 3.75em;
}

.ray3 {
    position: absolute;
    height: 0;
    width: 0.3em;
    border-bottom: 12.5em solid #ffffff1a;
    border-left: 0.9em solid transparent;
    border-right: 0.9em solid transparent;
    transform: rotate(80deg);
    bottom: -5.6em;
    left: -5.3em;
}

.ray4 {
    position: absolute;
    height: 0;
    width: 0.1em;
    border-bottom: 12.5em solid #ffffff1a;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    transform: rotate(280deg);
    bottom: -5.6em;
    left: 7.5em;
}

.glow {
    height: 21.8em;
    width: 21.8em;
    position: absolute;
    background-color: #ffffff1a;
    border-radius: 50%;
    animation: float 5s infinite;
    bottom: -19em;
}

@keyframes float {
    50% {
        transform: translateY(0.75em);
    }
}

.glow::before,
.glow::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: inherit;
    border-radius: 50%;
}

.glow::before {
    left: -9.3em;
    top: -3.1em;
}

.glow::after {
    right: -5.6em;
    top: -0.8em;
}

.moon {
    box-shadow: 1.25em -1.25em #f7f7de;
    height: 3.75em;
    width: 3.75em;
    border-radius: 50%;
    position: absolute;
    bottom: -3.1em;
    left: 10.93em;
}

.moon::before,
.moon::after {
    content: '';
    position: absolute;
    background-color: #ffffff1a;
    border-radius: 50%;
}

.moon::before {
    height: 6.5em;
    width: 6.5em;
    bottom: 0;
    right: -2.5em;
}

.moon::after {
    height: 11.8em;
    width: 11.8em;
    bottom: -2.8em;
    left: -2.8em;
}

.stars {
    height: 0.20em;
    width: 0.20em;
    background-color: white;
    position: absolute;
    top: 3.7em;
    left: 9.3em;
    border-radius: 50%;
    box-shadow: 3em 9.3em white,
        -1.8em 11.2em white,
        2.5em 16.3em white,
        -5em 6.2em white,
        -5.6em -0.9em white,
        -5.6em 3em white,
        7em 0.06em white,
        -5em 17.5em 0 0.05em white,
        -7.5em 14.3em white;
    animation: twinkle 12s infinite forwards;
}

@keyframes twinkle {
    0% {
        opacity: 0;
    }

    43% {
        opacity: 0;
    }

    53% {
        opacity: 0.7;
    }

    55% {
        opacity: 0.7;
    }

    98% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@media screen and (min-width: 600px) {
    .container {
        font-size: 20px;
    }
}