/* 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." */

/* Reset some default styles */

/* Cyberpunk purple + neon aesthetic */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Orbitron', sans-serif;
  background-color: #0d001a;
  color: #e0b3ff;
  padding: 20px;
  background-image: radial-gradient(circle at top, #1a0033, #0d001a);
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden;
  position: relative;
}

header {
  border-bottom: 2px solid #8000ff;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
  text-align: center;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

nav a {
  color: #b266ff;
  text-decoration: none;
  text-shadow: 0 0 5px #cc66ff, 0 0 10px #8000ff;
}

nav a:hover {
  color: #ffccff;
  text-shadow: 0 0 8px #ff99ff, 0 0 16px #cc00ff;
}

main {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 20px;
  text-align: center;
}

footer {
  margin-top: 40px;
  padding-top: 10px;
  border-top: 1px solid #660099;
  font-size: 0.9em;
  text-align: center;
}

.glow {
  color: #e0b3ff;
  text-shadow: 0 0 5px #cc66ff, 0 0 10px #8000ff;
}

/* CRT scanline effect (optional) */
.scanlines {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 100% 2px;
  z-index: 999;
  opacity: 0.05;
}


@keyframes glitch {
  0% { text-shadow: 2px 0 #ff00c1, -2px 0 #00fff7; }
  20% { text-shadow: -2px 0 #ff00c1, 2px 0 #00fff7; }
  40% { text-shadow: 2px 2px #ff00c1, -2px -2px #00fff7; }
  60% { text-shadow: -1px -1px #ff00c1, 1px 1px #00fff7; }
  80% { text-shadow: 1px 1px #ff00c1, -1px -1px #00fff7; }
  100% { text-shadow: 2px 0 #ff00c1, -2px 0 #00fff7; }
}

.glitch {
  animation: glitch 1s infinite;
}




.neon-box {
  border: 2px solid #cc66ff;
  box-shadow: 0 0 10px #cc66ff, 0 0 20px #9900cc inset;
  padding: 20px;
  margin-top: 20px;
  border-radius: 8px;
}


.cursor-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cc66ff;
  box-shadow: 0 0 5px #cc66ff, 0 0 10px #8000ff;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: fadeOut 0.5s forwards;
  z-index: 1000;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

//

@keyframes neonPulse {
  0%, 100% {
    box-shadow:
      0 0 15px #cc66ff,
      0 0 30px #cc66ff,
      inset 0 0 20px #9900cc;
  }
  50% {
    box-shadow:
      0 0 25px #ff99ff,
      0 0 50px #e066ff,
      inset 0 0 30px #cc00ff;
  }
}

.neon-box2 {
  border: 4px solid #cc66ff;
  box-shadow:
    0 0 15px #cc66ff,
    0 0 30px #cc66ff,
    inset 0 0 20px #9900cc;
  padding: 25px;
  margin-top: 30px;
  border-radius: 10px;
  background-color: #1a0033;
  animation: neonPulse 2.5s infinite ease-in-out;
}

//

.neon-box2 {
  border: 4px solid #cc66ff; /* thicker border */
  box-shadow:
    0 0 15px #cc66ff,
    0 0 30px #cc66ff,
    inset 0 0 20px #9900cc; /* stronger inner glow */
  padding: 25px;
  margin-top: 30px;
  border-radius: 10px;
  background-color: #1a0033; /* dark background inside */
}

//

/* Dropdown Container */
.dropdown {
  margin: 20px auto;
  max-width: 800px;
  background-color: #140026;
  border: 4px solid #cc66ff;
  border-radius: 10px;
  box-shadow: 0 0 10px #cc66ff;
  overflow: hidden;
}

/* Hide the actual checkbox */
.dropdown-toggle {
  display: none;
}

/* Label styling */
.dropdown-label {
  display: block;
  padding: 15px 20px;
  font-size: 1.2em;
  cursor: pointer;
  background-color: #1a0033;
  border-bottom: 1px solid #8000ff;
  transition: background-color 0.3s ease;
}

.dropdown-label:hover {
  background-color: #29004d;
}

/* Content area */
.dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease;
  padding: 0 20px;
  color: #e0b3ff;
}

/* When the checkbox is checked, expand the content */
.dropdown-toggle:checked + .dropdown-label + .dropdown-content {
  max-height: 500px; /* Adjust based on your content */
  padding-bottom: 15px;
}