html {
  background: #000000;
  color: #39ff14;
  scroll-behavior: smooth;
}

/* -------------------------------------------------- */
/* 🌐 GENERAL RESET */
/* -------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100vw;
  min-height: 100%;
  background-color: #000000;
  background:#000000;
  color: #39ff14;
  font-family: 'Courier New', Courier, monospace;
  scroll-behavior: smooth;
}


/* -------------------------------------------------- */
/* 🖥️ LAYOUT */
/* -------------------------------------------------- */
.layout {
  display: flex;
  min-height: 100vh;
  flex-direction: row;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

main {
  flex: 1;
  padding: 2rem;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

section {
  /* margin-bottom: 2rem; */
  /* border-bottom: 1px dashed #00ff00; */
  /* padding-bottom: 1rem; */
}


/* -------------------------------------------------- */
/* 🧠 ASIDE / SIDEBAR */
/* -------------------------------------------------- */
aside {
  width: 240px;
  background: #000;
  border-right: 2px solid #00ff00;
  padding: 1rem;
  box-sizing: border-box;
  position: sticky;
  top: 0;
}

aside h1 {
  text-align: center;
  color: #00ff00;
  text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;
  font-size: 1.4rem;
  position: relative;
}

aside h1::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  color: #0f0;
  clip: rect(0, 0, 0, 0);
  animation: glitch 2s infinite;
  opacity: 0.6;
}

@keyframes glitch {
  0% { clip: rect(0, 9999px, 0, 0); }
  10% { clip: rect(5px, 9999px, 15px, 0); }
  20% { clip: rect(10px, 9999px, 20px, 0); }
  30% { clip: rect(15px, 9999px, 25px, 0); }
  40% { clip: rect(20px, 9999px, 30px, 0); }
  100% { clip: rect(0, 9999px, 0, 0); }
}


/* -------------------------------------------------- */
/* 📎 NAVIGATION */
/* -------------------------------------------------- */
nav ul {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}

nav li {
  margin-bottom: 1rem;
}

nav a {
  color: #00ff00;
  text-decoration: none;
  border: 1px solid #00ff00;
  display: block;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
  text-shadow: 0 0 5px #00ff00;
}

nav a:hover {
  background-color: #002200;
  box-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;
  transform: scale(1.05);
}


/* -------------------------------------------------- */
/* 🧬 EFFECTS & GLOW */
/* -------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 0, 0.03),
    rgba(0, 255, 0, 0.03) 1px,
    transparent 1px,
    transparent 2px
  );
  animation: bgGlitch 1.5s infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes bgGlitch {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

.glow {
  color: #00ffea;
  text-shadow: 0 0 5px #00ffee, 0 0 10px #00ffee;
}


/* -------------------------------------------------- */
/* 🔠 TYPEWRITER EFFECT */
/* -------------------------------------------------- */
.typewriter {
  flex: 1;
  max-width: 100%;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1rem;
  display: inline-block;
  white-space: normal;
  word-break: break-word;
  line-height: 1.6;
}

.cursor {
  display: inline-block;
  width: 1px;
  height: 1em;
  background-color: #39ff14;
  animation: blink 0.75s step-end infinite;
  margin-left: 2px;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (max-width: 480px) {
  .typewriter {
    font-size: 1rem;
  }
}


/* -------------------------------------------------- */
/* 🧬 ABOUT SECTION */
/* -------------------------------------------------- */
.about-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: nowrap;
}

.pixel-portrait {
  flex-shrink: 0;
  width: 130px;
  height: auto;
  image-rendering: pixelated;
  border: 2px solid #00ff00;
  box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
  background-color: black;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 6px;
  position: relative;
}

.pixel-portrait:hover {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 0 15px #00ffee, 0 0 30px #00ffee;
}

.pixel-portrait::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 0, 0.05),
    rgba(0, 255, 0, 0.05) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}

@media (max-width: 768px) {
  .about-wrapper {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
  }

  .pixel-portrait {
    width: 100px;
  }

  .typewriter {
    font-size: 1rem;
  }
}


/* -------------------------------------------------- */
/* MUSIC SECTION */
/* -------------------------------------------------- */
#music ul li a {
  color: #c792ff;
  text-decoration: none;
  text-shadow: 0 0 5px #c792ff, 0 0 10px #c792ff;
  transition: color 0.3s ease, transform 0.2s ease;
}

#music ul li a:hover {
  color: #f8f8ff;
  text-shadow: 0 0 10px #e0b3ff, 0 0 20px #c792ff;
  transform: scale(1.05);
}

#music a[href*="youtube.com/@CyberiaPhonkClub"] {
  color: #ff5ef3;
  text-decoration: none;
  font-weight: bold;
  text-shadow: 0 0 5px #ff5ef3, 0 0 15px #d400ff;
  border-bottom: 2px dashed transparent;
  transition: all 0.3s ease;
}

#music a[href*="youtube.com/@CyberiaPhonkClub"]:hover {
  color: #ffffff;
  text-shadow: 0 0 10px #ff5ef3, 0 0 20px #ff5ef3;
  border-bottom: 2px dashed #ff5ef3;
  transform: scale(1.05);
}

.playlist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.playlist-grid ul {
  border: 1px solid #00ff00;
  padding: 1rem;
  list-style-type: none;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px #00ff00;
  transition: transform 0.3s ease;
}

.playlist-grid ul:hover {
  transform: scale(1.02);
}

.playlist-grid li {
  margin-bottom: 0.5rem;
}

.playlist-grid li a {
  color: #c792ff;
  text-decoration: none;
  text-shadow: 0 0 5px #c792ff, 0 0 10px #c792ff;
  font-weight: bold;
}

.playlist-grid li a:hover {
  color: #ffffff;
  text-shadow: 0 0 10px #ff66ff, 0 0 20px #ff66ff;
  transform: scale(1.05);
}

.grid-title {
  font-size: 1.2rem;
  color: #00ffee;
  text-shadow: 0 0 3px #00ffee, 0 0 10px #00ffee;
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
}

@media (max-width: 768px) {
  .playlist-grid {
    grid-template-columns: 1fr;
  }
}


/* -------------------------------------------------- */
/* PROGRAMING & DUAL SECTION */
/* -------------------------------------------------- */

.neon-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: black;
  color: #00ffcc;
  font-weight: bold;
  border: 2px solid #00ffee;
  text-decoration: none;
  text-shadow: 0 0 5px #00ffee, 0 0 10px #00ffee;
  box-shadow: 0 0 10px #00ffee;
  transition: all 0.3s ease;
  border-radius: 6px;
}

.neon-button:hover {
  background: #002222;
  color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 0 15px #00ffee, 0 0 30px #00ffee;
}

.dual-section {
  display: flex;
  gap: 2rem;
  margin: 3rem 0;
  flex-wrap: wrap;
}

.index-block {
  flex: 1;
  min-width: 300px;
  padding: 1.5rem;
  border: 1px dotted #00ffcc;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px #00ffcc66;
}

.index-block p {
  margin-bottom: 1rem;
}

.index-block .neon-button {
  display: inline-block;
  margin-top: 0.5rem;
}



/* -------------------------------------------------- */
/* 🎞️ FOOTER MARQUEE */
/* -------------------------------------------------- */
footer {
  background: black;
  border-top: 2px solid #00ff00;
  padding: 0;
  overflow: hidden;
}

.footer-marquee {
  width: 100%;
  height: 2.5rem;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.marquee-inner {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: bounceMarquee 8s infinite alternate ease-in-out;
}

.footer-marquee p {
  font-size: 1rem;
  color: #39ff14;
  text-shadow: 0 0 3px #00ff00;
  margin: 0;
  padding: 0 1rem;
}

.footer-marquee a {
  color: #00ffcc;
  text-decoration: underline;
  text-shadow: 0 0 2px #00ffee;
}

@keyframes bounceMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% + 100vw)); }
}


/* -------------------------------------------------- */
/* 📱 RESPONSIVE */
/* -------------------------------------------------- */
@media (max-width: 768px) {
  .layout {
    flex-direction: column;
  }

  aside {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 2px solid #00ff00;
  }

  nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  nav li {
    margin-bottom: 0;
  }

  main {
    padding: 1rem;
  }
}