/* ━━━━━━━━━━━━━━━✨ BASIS-STYLES & ROOT-VARIABLEN ━━━━━━━━━━━━━━━ */

:root {
  --accent: #D87C4A;
  --highlight: #ffd7ba;
}

body {
  background-image: url('bg.gif');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: black;
  color: #f5f5f5;
  font-family: 'Libertinus Mono', monospace;
  line-height: 1.6;
  margin: 0;
  padding: 20px;
}

/* Dunkles Overlay über dem Hintergrund */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -1;
}


/* ━━━━━━━━━━━━━━━✨ LAYOUT-BEREICHE ━━━━━━━━━━━━━━━ */

.content-wrapper {
  max-width: 700px;
  margin: 0 auto;
}

.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 40px;
  background-color: black;
  border: 1px solid #FB2576;
  border-radius: 10px;
  box-shadow: 0 0 15px #FB2576;
}

/* Banner mit Glow-Effekt */
.banner {
  width: 100%;
  display: block;
  border-radius: 10px 10px 0 0;
  background-color: #000;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px #FB2576;
}

/* ━━━━━━━━━━━━━━━✨ HEADERS & TEXT-STYLES ━━━━━━━━━━━━━━━ */

header {
  text-align: center;
  padding: 30px 0;
}

h1 {
  font-family: 'VT323', monospace;
  font-size: 2.5em;
  color: #FB2576;
  text-shadow: 0 0 10px #9575DE;
  margin-bottom: 15px;
}


/* ━━━━━━━━━━━━━━━✨ LINKS & INTERAKTION ━━━━━━━━━━━━━━━ */

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Spezieller K-Pop Link */
.kpop-link {
  display: inline-block;
  font-size: 1em;
  color: #FB2576;
  margin-top: 30px;
  text-shadow: 0 0 10px #9575DE;
  font-family: 'Bitcount Grid Double', sans-serif;
}

.kpop-link:hover {
  text-shadow: 0 0 15px #9575DE;
  color: #B6F500;
}

/* Zentrierte Link-Sektion */
.center-link {
  text-align: center;
  margin-top: 40px;
  font-size: 0.95em;
}

.center-link a {
  color: #EBF400;
  text-shadow: 0 0 10px #4DFFBE;
  padding: 10px 20px;
  border-radius: 8px;
  transition: 0.3s ease-in-out;
}

.center-link a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 15px #FFBF78;
}


/* ━━━━━━━━━━━━━━━✨ FOOTER & BLOCKQUOTES ━━━━━━━━━━━━━━━ */

footer {
  text-align: center;
  margin-top: 60px;
  font-size: 0.9em;
  color: #777;
}

blockquote {
  border-left: 4px solid var(--accent);
  padding-left: 15px;
  color: var(--highlight);
  font-style: italic;
  margin: 20px 0;
}


/* ━━━━━━━━━━━━━━━✨ LED-BANNER (Ticker) ━━━━━━━━━━━━━━━ */

.led-wrapper {
  max-width: 700px;
  margin: 0 auto;
  overflow: hidden;
  padding-top: 10px;
}

.led-banner {
  background-color: #FB2576;
  color: black;
  padding: 10px 0;
  border-radius: 10px;
  font-family: 'VT323', monospace;
  font-size: 1.1em;
  box-shadow: 0 0 15px #FB2576;
  overflow: hidden;
  position: relative;
  height: 15px;
}

.led-banner span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 12s linear infinite;
  white-space: nowrap;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}