@keyframes colorShift {
  0% {
    background-color: #87ceeb; /* Sky blue */
  }
  33% {
    background-color: #ffb6c1; /* Light pink */
  }
  66% {
    background-color: #ccccff; /* Periwinkle */
  }
  100% {
    background-color: #87ceeb; /* Back to sky blue */
  }
}

body {
  animation: colorShift 15s infinite;
  background-color: #87ceeb;
  margin: 0;
  min-height: 100vh;
  font-family: "Quicksand", sans-serif;
  color: #fff;
  overflow-x: hidden;
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  z-index: -2;
}

.stars::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow:
    100px 100px white,
    200px 150px white,
    300px 50px white,
    400px 200px white,
    500px 120px white,
    600px 80px white,
    700px 180px white,
    800px 140px white,
    900px 60px white,
    1000px 160px white,
    1100px 100px white,
    1200px 40px white,
    1300px 190px white,
    1400px 130px white,
    1500px 70px white,
    50px 250px white,
    150px 300px white,
    250px 350px white,
    350px 400px white,
    450px 280px white,
    550px 320px white,
    650px 380px white,
    750px 340px white,
    850px 260px white,
    950px 360px white,
    1050px 300px white,
    1150px 240px white,
    1250px 390px white,
    1350px 330px white,
    1450px 270px white;
  animation: sparkle 50s linear infinite;
}

.twinkling {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: -1;
}

.twinkling::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    120px 180px rgba(255, 255, 255, 0.6),
    220px 250px rgba(255, 255, 255, 0.7),
    320px 120px rgba(255, 255, 255, 0.5),
    420px 300px rgba(255, 255, 255, 0.8),
    520px 220px rgba(255, 255, 255, 0.6),
    620px 160px rgba(255, 255, 255, 0.7),
    720px 280px rgba(255, 255, 255, 0.5),
    820px 240px rgba(255, 255, 255, 0.8),
    920px 140px rgba(255, 255, 255, 0.6),
    1020px 320px rgba(255, 255, 255, 0.7),
    1120px 200px rgba(255, 255, 255, 0.5),
    1220px 80px rgba(255, 255, 255, 0.8),
    1320px 380px rgba(255, 255, 255, 0.6),
    1420px 260px rgba(255, 255, 255, 0.7),
    80px 330px rgba(255, 255, 255, 0.5),
    180px 400px rgba(255, 255, 255, 0.8),
    280px 170px rgba(255, 255, 255, 0.6),
    380px 450px rgba(255, 255, 255, 0.7),
    480px 370px rgba(255, 255, 255, 0.5),
    580px 310px rgba(255, 255, 255, 0.8);
  animation: move-twink-back 200s linear infinite;
}

@keyframes move-twink-back {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-1000px);
  }
}

@keyframes sparkle {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

h1 {
  font-family: "Pacifico", cursive;
  font-size: 3.5rem;
  margin: 0;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  line-height: 1.2;
}

.content-area {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2rem;
  margin-top: 2rem;
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.05);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.coming-soon {
  font-family: "Comfortaa", cursive;
  font-size: 2rem;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  margin: 0;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}

.logo {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 100px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
  transition: transform 0.3s ease;
  z-index: 1000;
}

.logo:hover {
  transform: scale(1.1) rotate(5deg);
}

.nav-sidebar {
  position: fixed;
  top: 140px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.3s ease;
}

.nav-sidebar.collapsed {
  transform: translateX(-100%);
}

.nav-sidebar a {
  text-decoration: none;
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  font-family: "Comfortaa", cursive;
  font-weight: 600;
  text-align: left;
  min-width: 120px;
}

.nav-sidebar a:hover {
  transform: translateX(5px);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.nav-sidebar a.active {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.sidebar-toggle {
  position: fixed;
  top: 140px;
  left: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  z-index: 1000;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.nav-sidebar.collapsed + .sidebar-toggle {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.sparkle {
  position: fixed;
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 50%;
  pointer-events: none;
  animation: sparkle 1.5s linear forwards;
}

@keyframes sparkle {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.bubble {
  position: fixed;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.1) 30%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 70%,
    rgba(255, 255, 255, 0.4) 100%
  );
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 55% 45% 48% 52% / 55% 48% 52% 45%;
  pointer-events: none;
  animation:
    float-up linear forwards,
    elastic 3s ease-in-out infinite;
  backdrop-filter: blur(2px);
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.1),
    0 0 30px rgba(255, 255, 255, 0.1);
  z-index: 1;
  filter: brightness(1.2) contrast(1.1);
}

@keyframes elastic {
  0% {
    border-radius: 55% 45% 48% 52% / 55% 48% 52% 45%;
  }
  25% {
    border-radius: 45% 55% 52% 48% / 45% 52% 48% 55%;
  }
  50% {
    border-radius: 48% 52% 55% 45% / 50% 55% 45% 52%;
  }
  75% {
    border-radius: 52% 48% 45% 55% / 52% 45% 55% 48%;
  }
  100% {
    border-radius: 55% 45% 48% 52% / 55% 48% 52% 45%;
  }
}

@keyframes float-up {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-50vh) scale(0.9) rotate(180deg);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-100vh) scale(0.8) rotate(360deg);
    opacity: 0;
  }
}

.collapse-button {
  position: absolute;
  top: 0;
  right: -40px;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  font-size: 1.2rem;
  opacity: 0;
  pointer-events: none;
}

.nav-sidebar:not(.collapsed) .collapse-button {
  opacity: 1;
  pointer-events: auto;
}

.collapse-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
}