/* =========================
   Spanish Preloader
========================= */

.no-scroll-preload {
    overflow: hidden;
    height: auto;
}

:root {

    --loader-size: 420px;

    --bg-color: #ececec;
    --text-color: #111;
    --soft-gray: #777;

    --rotate-speed: 18s;
    --orbit-speed-1: 8s;
    --orbit-speed-2: 12s;
    --orbit-speed-3: 10s;

}

/* =========================
   Fullscreen Loader
========================= */

.loader-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);

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

    overflow: hidden;
    z-index: 999999;
}

/* =========================
   Main Loader
========================= */

.spanish-loader {

    position: relative;

    width: var(--loader-size);
    height: var(--loader-size);

    animation: loaderRotate var(--rotate-speed)
    linear infinite;
}

@keyframes loaderRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================
   Center Español
========================= */

.center-text {

    position: absolute;
    inset: 0;

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

    font-size: 90px;
    font-weight: 900;
    color: var(--text-color);

    letter-spacing: 2px;

    animation: centerPulse 2s ease-in-out infinite;
}

.center-text span {
    transform: rotate(-8deg);
}

@keyframes centerPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

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

/* =========================
   Orbit Base
========================= */

.orbit {

    position: absolute;
    inset: 0;

    border-radius: 50%;
}

/* =========================
   Floating Elements
========================= */

.element {

    position: absolute;

    color: var(--soft-gray);

    white-space: nowrap;

    user-select: none;
}

/* =========================
   Orbit One
========================= */

.orbit-one {

    animation: orbitOne var(--orbit-speed-1)
    linear infinite;
}

.orbit-one .hola {

    top: -20px;
    left: 50%;

    transform: translateX(-50%);

    font-size: 56px;
    font-weight: bold;
}

.orbit-one .dias {

    bottom: -10px;
    left: 50%;

    transform: translateX(-50%);

    font-size: 34px;
    font-style: italic;
}

@keyframes orbitOne {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* =========================
   Orbit Two
========================= */

.orbit-two {

    animation: orbitTwo var(--orbit-speed-2)
    linear infinite;
}

.orbit-two .verb1 {

    left: -40px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 58px;
}

.orbit-two .verb2 {

    right: -40px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 58px;
}

@keyframes orbitTwo {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================
   Orbit Three
========================= */

.orbit-three {

    animation: orbitThree var(--orbit-speed-3)
    linear infinite;
}

.orbit-three .noun1 {

    top: 70px;
    right: -20px;

    font-size: 38px;
}

.orbit-three .noun2 {

    bottom: 70px;
    left: -20px;

    font-size: 38px;
}

@keyframes orbitThree {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* =========================
   Floating Emojis
========================= */

.emoji {

    position: absolute;

    font-size: 44px;

    animation: floatEmoji 2s
    ease-in-out infinite alternate;
}

.emoji.one {

    top: 20px;
    right: 60px;
}

.emoji.two {

    bottom: 20px;
    left: 60px;
}

@keyframes floatEmoji {

    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-12px);
    }
}

/* =========================
   Pencil
========================= */

.pencil {

    position: absolute;

    font-size: 56px;
}

.pencil.left {

    left: -60px;
    bottom: 70px;

    transform: rotate(-25deg);
}

.pencil.right {

    right: -60px;
    top: 70px;

    transform: rotate(25deg);
}

/* =========================
   Fade Out
========================= */

.disappear {
    animation: vanish 1s forwards;
}

@keyframes vanish {

    100% {

        opacity: 0;
        visibility: hidden;
    }
}

/* =========================
   Mobile
========================= */

@media(max-width: 768px){

    :root{
        --loader-size: 280px;
    }

    .center-text{
        font-size: 58px;
    }

    .orbit-one .hola{
        font-size: 34px;
    }

    .orbit-one .dias{
        font-size: 22px;
    }

    .orbit-two .verb1,
    .orbit-two .verb2{
        font-size: 36px;
    }

    .orbit-three .noun1,
    .orbit-three .noun2{
        font-size: 24px;
    }

    .emoji{
        font-size: 28px;
    }

    .pencil{
        font-size: 34px;
    }
}