:root {
  --royal-blue: #4169e1;
  --lava-red: #dc143c;
  --dusk-purple: #9370db;
}

.bg-royal-blue {
  background-color: var(--royal-blue);
}

.bg-lava-red {
  background-color: var(--lava-red);
}

.bg-dusk-purple {
  background-color: var(--dusk-purple);
}

.text-royal-blue {
  color: var(--royal-blue);
}

.text-lava-red {
  color: var(--lava-red);
}

.text-dusk-purple {
  color: var(--dusk-purple);
}

.hero-bg {
  background: linear-gradient(135deg, var(--royal-blue), var(--dusk-purple));
}

.gem-animation {
  animation: gemGlow 2s ease-in-out infinite alternate;
}

@keyframes gemGlow {
  from {
    box-shadow: 0 0 20px var(--royal-blue);
  }

  to {
    box-shadow: 0 0 40px var(--lava-red);
  }
}

.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-content {
  background-color: white;
  margin: 5% auto;
  padding: 20px;
  border-radius: 15px;
  width: 90%;
  max-width: 600px;
  position: relative;
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--dusk-purple), var(--royal-blue));
  color: white;
  padding: 20px;
  z-index: 999;
  display: none;
}

.leaderboard-item {
  background: linear-gradient(90deg, var(--royal-blue), var(--dusk-purple));
  color: white;
  border-radius: 10px;
  padding: 15px;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}