.background-wrapper {
    background-color: #111;
    aspect-ratio: 1;
    height: 100%;
    min-width: 70%;
    max-width: 100vh;
    max-height: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: -20;
    overflow: hidden;
    top: 0%;
    right: 0%;
}

.stars-mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    mask-size: 33% 33%;
    mask-image:
        linear-gradient(89deg, transparent 20%, black 21%, transparent 22%, transparent 60%, black 61%, transparent 62%),
        linear-gradient(130deg, transparent 20%, black 21%, transparent 22%, transparent 60%, black 61%, transparent 62%);
}

.stars {
    width: 100%;
    height: 100%;
    /* Stars background */
    background-size: 20% 20%;
    background-image:
        linear-gradient(30deg, transparent 29%, yellow 30%, transparent 31%),
        linear-gradient(13deg, transparent 60%, yellow 61%, transparent 62%);
}

.earth-map {
    background-color: steelblue;
    aspect-ratio: 1;
    min-width: 20em;
    max-width: 50%;
    max-height: 50%;
    position: relative;
    filter: blur(0.2em);
    z-index: 0.5;
    mask-image: radial-gradient(circle at 50% 50%, black 70%, transparent 50%);
}

.clouds {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    filter: blur(0.2em);
}

.linear-clouds1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 50% 50%;
    background-image:
        linear-gradient(15deg, transparent 15%, white 20%, transparent 35%,  white 50%, transparent 65%),
        linear-gradient(120deg, transparent 40%,  white 50%, transparent 65%);
    mask-size: 50% 50%;
    mask-image: linear-gradient(90deg, transparent 15%,  white 40%, transparent 80%);
}

.radial-clouds1 {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 25% 25%, white, transparent 40%),
        radial-gradient(circle at 75% 75%, white, transparent 40%);
}

.earth {
    background-color: steelblue;
    border-radius: 50%;
    aspect-ratio: 1;
    min-width: 20em;
    max-width: 50%;
    max-height: 50%;
    position: relative;
    z-index: 0.5;
}

.continents_slide1 {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation-name: continents_slide_loop;
    animation-duration: 30s;
    animation-delay: -20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.continents_slide2 {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 100%;
    overflow: visible;
    animation-name: continents_slide_loop;
    animation-duration: 30s;
    animation-delay: -10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.continents_slide3 {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 100%;
    overflow: visible;
    animation-name: continents_slide_loop;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes continents_slide_loop {
    0% {
        right: 100%;
    }
    100% {
        right: -100%;
    }
}

 /* Landmasses */

.russia {
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    background-image:
        radial-gradient(ellipse 90% 50% at 60% 20%, #374A36 40%, transparent 45%);
}

.asia {
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    background-image:
        radial-gradient(ellipse 40% 30% at 40% 40%, #817A68 30%, transparent 45%),
        radial-gradient(ellipse 50% 50% at 75% 40%, #374A36 40%, transparent 45%);
}

.europe {
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    background-image:
        radial-gradient(ellipse 80% 30% at 80% 15%, #374A36 35%, transparent 40%);
}

.sahara {
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    background-image:
        radial-gradient(ellipse 80% 50% at 70% 50%, #E3A57E 20%, #374A36 35%, transparent 40%);
}
.south-africa {
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    background-image:
        radial-gradient(ellipse 40% 70% at 80% 70%, #374A36 35%, transparent 40%);
}

.australia {
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    background-image:
        radial-gradient(ellipse 30% 30% at 90% 80%, #8D604D 30%, #374A36 35%, transparent 45%);
}

.united-states {
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    background-image:
        radial-gradient(ellipse 50% 40% at 70% 30%, #374A36 35%, transparent 40%);
}

.canada {
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    background-image:
        radial-gradient(ellipse 60% 40% at 60% 15%, #374A36 35%, transparent 40%);
}

.amazon {
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    background-image:
        radial-gradient(ellipse 60% 40% at 65% 60%, #374A36 35%, transparent 40%);
}

.far-south-america {
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    background-image:
        radial-gradient(ellipse 30% 50% at 70% 80%, #817A68 20%,  #374A36 35%, transparent 40%);
}

.moon {
    background-color: lightslategray;
    animation: 23.12s linear 0s infinite forwards running orbit;
    border-radius: 50%;
    aspect-ratio: 1;
    width: 12%;
    left: 0%;
    filter: blur(0.2em);
    position: absolute;
}

@keyframes orbit {
    0% {
        left: 0%;
        width: 12%;
        z-index: 1;
        animation-timing-function: ease-in;
    }
    25% {
        left: 50%;
        width: 16%;
        animation-timing-function: ease-out;
    }
    50% {
        left: 90%;
        width: 12%;
        z-index: -1;
        animation-timing-function: ease-in;
    }
    75% {
        left: 50%;
        width: 8%;
        z-index: -1;
        animation-timing-function: ease-out;
    }
    100% {
        left: 0%;
        width: 12%;
        z-index: -1;
    }
}