:root {
    --text-color: linear-gradient(45deg, rgb(113, 103, 255), rgb(250, 108, 108));
    --bg-gradient-color-1: rgb(113 103 255 / 0.18);
    --bg-gradient-color-2: rgb(250 108 108 / 0.14);
}

body {
    font-family: "Aeonik Pro", Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #0f1117;
    color: #e8eaf2;

}

header::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 75% at 82% 0%, var(--bg-gradient-color-1), transparent 60%),
        radial-gradient(45% 55% at 8% 15%, var(--bg-gradient-color-2), transparent 60%),
        linear-gradient(120deg, var(--bg-gradient-color-1), transparent 38%, var(--bg-gradient-color-2) 62%, transparent);
    background-size: 180% 180%, 180% 180%, 220% 220%;
    animation: bgGradient 16s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bgGradient {

    0%,
    100% {
        background-position: 0% 50%, 100% 50%, 0% 50%;
    }

    50% {
        background-position: 100% 50%, 0% 50%, 100% 50%;
    }
}

.headline,
.subtext {
    text-align: center;
}


.typewriter-wrapper {
    display: inline;
}

.typewriter-text {
    display: inline;
}


.typewriter-cursor {
    display: inline;
    animation: strobe 1s step-end infinite;
}

.typewriter-text.gradient-text,
.typewriter-cursor.gradient-text {
  background-image: var(--text-color);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes strobe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}