html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* WINDOWS LOADING SCREEN */
#loading-screen {
    position: fixed;
    inset: 0;
    background: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.dot-anim::after {
    content: "";
    animation: dots 1.6s steps(3, end) infinite;
}

/* ANIMATED GRID BACKGROUND */
#background-grid {
  position: fixed;
  inset: 0;
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  z-index: -3;
  pointer-events: none;
  transform: translateY(0) scale(1);
  will-change: transform;
}

#sphere {
    position: fixed;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
    z-index: -2;
    pointer-events: none;
}

/* Typing cursor */
.typing::after {
    content: "|";
    display: inline-block;
    margin-left: 2px;
    animation: blink 0.7s steps(1) infinite;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}


@keyframes haloPulse {
    0% {
        transform: scale(1);
        opacity: 0.35;
        filter: blur(12px);
    }

    50% {
        transform: scale(1.25);
        opacity: 0.55;
        filter: blur(18px);
    }

    100% {
        transform: scale(1);
        opacity: 0.35;
        filter: blur(12px);
    }
}

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

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

@keyframes waveScale {
    0% {
        transform: scale(0.9);
        opacity: 0.75;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(0.9);
        opacity: 0.75;
    }
}

@keyframes dots {
    0% {
        content: "";
    }

    33% {
        content: ".";
    }

    66% {
        content: "..";
    }

    100% {
        content: "...";
    }
}