:root {
  --outback-red: #b22222;
  --celestial-gold: #ffd700;
  --midnight-navy: #191970;
}

.bg-outback {
  background-color: var(--outback-red);
}

.bg-celestial {
  background-color: var(--celestial-gold);
}

.bg-midnight {
  background-color: var(--midnight-navy);
}

.text-outback {
  color: var(--outback-red);
}

.text-celestial {
  color: var(--celestial-gold);
}

.text-midnight {
  color: var(--midnight-navy);
}

.gradient-bg {
  background: linear-gradient(
    135deg,
    var(--midnight-navy),
    var(--outback-red),
    var(--celestial-gold)
  );
}

.hero-bg {
  background: linear-gradient(rgba(25, 25, 112, 0.8), rgba(178, 34, 34, 0.8)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="stars" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="2" fill="%23FFD700" opacity="0.5"/><circle cx="80" cy="60" r="1" fill="%23FFD700" opacity="0.3"/><circle cx="40" cy="80" r="1.5" fill="%23FFD700" opacity="0.4"/></pattern></defs><rect width="100%" height="100%" fill="url(%23stars)"/></svg>');
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

.cookie-banner.show {
  transform: translateY(0);
}

.page-content {
  display: none;
}

.page-content.active {
  display: block;
}

.sparkle {
  animation: sparkle 2s infinite;
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
}

.pulse-gold {
  animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  }

  50% {
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.8);
  }
}
