/* Shared look for all pages: Global Youth Day 2027, "Designed for Mission" brand kit. */
@font-face {
  font-family: 'GYD Upper';
  src: url('/fonts/GydUppercase-Regular.ttf') format('truetype');
  font-weight: 100 1000; /* one weight only: never fake-bold it */
  font-display: block;
}
@font-face {
  font-family: 'GYD Script';
  src: url('/fonts/Gyd27-Regular.ttf') format('truetype');
  font-weight: 100 1000;
  font-display: block;
}
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --bg: #06285b;
  --panel: #1d356d;
  --panel2: #183d89;
  --line: rgba(255, 255, 255, 0.14);
  --yellow: #ffdc1e;
  --orange: #ff791f;
  --pink: #ff3e5f;
  --teal: #49e2cf;
  --cream: #f7f3f0;
  --text: #ffffff;
  --muted: #a9b8da;
  --ok: #49e2cf;
  --bad: #ff3e5f;
  /* GYD Upper has no digits, so numbers fall through to Nunito. */
  --display: 'GYD Upper', 'Nunito', 'Arial Rounded MT Bold', sans-serif;
  --script: 'GYD Script', 'Nunito', cursive;
  --body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  color: var(--text);
  font-family: var(--body);
  background-color: var(--bg);
  /* the soft rolling hills along the bottom of the GYD banners */
  background-image: radial-gradient(circle at 8% 112%, var(--panel) 0 22vmax, transparent 22.1vmax),
    radial-gradient(circle at 36% 128%, #0f3170 0 24vmax, transparent 24.1vmax),
    radial-gradient(circle at 70% 118%, var(--panel) 0 20vmax, transparent 20.1vmax),
    radial-gradient(circle at 98% 130%, #0f3170 0 22vmax, transparent 22.1vmax);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
button {
  font-family: inherit;
}
.hidden {
  display: none !important;
}

/* The yellow "Global Youth Day" tag from the logo */
.tag {
  display: inline-block;
  background: var(--yellow);
  color: var(--bg);
  font-family: var(--display);
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 0.25em 0.8em 0.15em;
  transform: rotate(-4deg);
  line-height: 1.1;
  white-space: nowrap;
}

/* Scattered brand doodles */
.art {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
@keyframes wiggle {
  0%,
  100% {
    transform: rotate(var(--r, 0deg)) translateY(0);
  }
  50% {
    transform: rotate(calc(var(--r, 0deg) + 6deg)) translateY(-6px);
  }
}
.art.float {
  animation: wiggle 6s ease-in-out infinite;
}

.conn {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  background: var(--pink);
  color: #fff;
  font-weight: 900;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  z-index: 100;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}