/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* Base Reset */


/* Body Background - Crystal Cave */
/* Reset */


/* Body */
body {
  font-family: 'Quicksand', sans-serif;
  background: radial-gradient(circle at top, #1b1b3a, #0f1025);
  color: white;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Magical Title Font */
.logo, .hero h2 {
  font-family: 'Cinzel', serif;
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  position: relative;
  z-index: 2;
}

.logo {
  font-size: 30px;
  text-shadow: 0 0 15px #c77dff,
               0 0 30px #7df9ff;
}


/* Hero */
.hero {
  text-align: center;
  padding: 120px 20px;
  position: relative;
  z-index: 2;
}

.hero h2 {
  font-size: 42px;
  margin-bottom: 15px;
  text-shadow: 0 0 20px #ff8de1,
               0 0 40px #7df9ff;
}

.hero p {
  margin-bottom: 30px;
  opacity: 0.8;
}

.hero a {
  display: inline-block;
  padding: 14px 35px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(45deg, #ff8de1, #7df9ff);
  color: #0f1025;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
  text-decoration: none;
}

.hero a:hover {
  box-shadow: 0 0 20px #ff8de1,
              0 0 40px #7df9ff;
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  padding: 60px 60px;
  position: relative;
  z-index: 2;
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #181832;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  transition: 0.3s ease;
  border: 1px solid rgba(255,255,255,0.1);
}

.card h3 {
  margin-bottom: 10px;
  text-shadow: 0 0 10px #c77dff;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 20px #c77dff,
              0 0 40px #7df9ff;
}

/* Footer */
footer {
  text-align: center;
  padding: 40px;
  opacity: 0.6;
  font-size: 14px;
  position: relative;
  z-index: 2;
}

/* ✨ Floating Sparkles */
.sparkles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}


/* Layer 1 - pink glow */
.sparkles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.sparkles span {
  position: absolute;
  color: white;
  font-size: 14px;
  animation: twinkle 3s infinite ease-in-out alternate;
}
@keyframes twinkle {
  0% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.6; transform: scale(1); }
}

@keyframes sparkleMove {
  from { background-position: 0 0; }
  to { background-position: 1000px 1000px; }
}

/* 💎 Crystal Background Shapes */
.crystal {
  position: fixed;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(199,125,255,0.4), transparent 70%);
  filter: blur(60px);
  z-index: 0;
}

.crystal1 {
  top: 10%;
  left: 5%;
}

.crystal2 {
  bottom: 15%;
  right: 10%;
  background: radial-gradient(circle, rgba(125,249,255,0.4), transparent 70%);
}

.crystal3 {
  top: 50%;
  left: 60%;
  background: radial-gradient(circle, rgba(255,141,225,0.4), transparent 70%);
}