html, body {
  height: 100%;
  margin: 0;
}

body {
  background-color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.content {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vgj-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: glow-colors 8s ease-in-out infinite;
}

:root {
  --glow-hue: 120;
}

.vgj-card {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 3rem 5rem;
  box-shadow:
    0 0 20px rgba(0, 0, 0, 0.04),
    0 0 35px hsla(var(--glow-hue), 70%, 50%, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.vgj-logo {
  font-size: clamp(3rem, 12vw, 6rem);
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #111827;
  text-shadow:
    0 0 10px hsla(var(--glow-hue), 70%, 50%, 0.4),
    0 0 25px hsla(var(--glow-hue), 70%, 50%, 0.2);
  display: inline-block;
}

@keyframes glow-colors {
  0% {
    filter: hue-rotate(0deg);
  }
  25% {
    filter: hue-rotate(90deg);
  }
  50% {
    filter: hue-rotate(180deg);
  }
  75% {
    filter: hue-rotate(270deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}