@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/Inter/Inter-VariableFont_opsz\,wght.ttf) format('ttf');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
      --accent: #f0f0f0;
      --accent-grey: #d8d8d8;
      --bg-gradient: linear-gradient(135deg, #0f0f0f, #1f1e1e 40%, #111 100%);
      --size: clamp(2.5rem, 10vw, 10rem);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
    }

    body {
      align-items: center;
      background: var(--bg-gradient);
      display: flex;
      flex-direction: column;
      filter: drop-shadow(0px -5px 10px #000);
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      justify-content: center;
      overflow: hidden;
    }

    img {
      width: calc(var(--size) * 2.5);
      aspect-ratio: 230 / 97;
      height: auto;
      margin: 1.5rem;
    }

    h1 {
      animation: subtleShift 5s ease-in-out infinite alternate;
      color: var(--accent);
      font-size: var(--size);
      font-weight: 900;
      letter-spacing: 0.1em;
      line-height: 1;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      text-wrap: balance;
      user-select: none;
    }

    /* Subtle glow effect */
    h1::after {
      color: #ffffff22;
      content: "I AM ELLIE";
      filter: blur(20px);
      left: 0;
      position: absolute;
      top: 0;
      transform: scale(1.05);
      z-index: -1;
    }

    @keyframes subtleShift {
      from {
        color: var(--accent)
      }
      to {
        color: var(--accent-grey);
      }
    }