@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');


:root {

  --bg-dark: #1a0f00;

  --amber: #ffb000;

  --amber-dim: #cc9000;

  --amber-glow: rgba(255, 176, 0, 0.4); /* dezenter Glow */

}


body {

  margin: 0;

  font-family: 'VT323', monospace;

  color: var(--amber);

  background-color: var(--bg-dark);

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  letter-spacing: 1px;

  font-size: 22px;

  text-shadow: 0 0 5px var(--amber-glow), 0 0 8px var(--amber-glow);

  animation: flicker 2.5s infinite;

  overflow-x: hidden;

}


@keyframes flicker {

  0%   { opacity: 0.96; }

  10%  { opacity: 1; }

  25%  { opacity: 0.94; }

  50%  { opacity: 0.98; }

  75%  { opacity: 0.92; }

  100% { opacity: 1; }

}


body::before {

  content: "";

  position: fixed;

  top: 0; left: 0;

  width: 100%; height: 100%;

  background: repeating-linear-gradient(

    to bottom,

    rgba(255, 176, 0, 0.04) 0px,

    rgba(255, 176, 0, 0.04) 1px,

    transparent 3px,

    transparent 4px

  );

  pointer-events: none;

  z-index: 10;

  animation: scanJitter 0.3s infinite;

}


@keyframes scanJitter {

  0%, 100% { opacity: 0.15; transform: translateY(0); }

  50% { opacity: 0.25; transform: translateY(1px); }

}


.main-content {

  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding-top: 5vh;

  padding-bottom: 100px;

}


/* ASCII LOGO STYLE */

.ascii-logo {

  font-family: 'Courier New', Courier, monospace; /* Wichtig für korrekte Blöcke */

  font-size: 14px;

  line-height: 1.1;

  margin: 0;

  white-space: pre;

  display: inline-block;

  color: var(--amber);

  text-shadow: 0 0 10px var(--amber-glow), 0 0 15px var(--amber-glow);

  animation: titleFlicker 3.5s infinite;

  font-weight: bold;

}


@keyframes titleFlicker {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.95; }

  80% { opacity: 0.9; }

}


h2 {

  font-size: 1.5rem;

  color: var(--amber-dim);

  margin-top: 1rem;

  margin-bottom: 2rem;

}


/* Rahmen */

.description {

  text-align: left;

  padding: 20px 30px;

  display: inline-block;

  border: 4px double var(--amber);

  box-shadow: 0 0 10px var(--amber-glow);

  background-color: rgba(26, 15, 0, 0.85);

  max-width: 640px;

  animation: boxFlicker 3s infinite;

}


@keyframes boxFlicker {

  0%, 100% { opacity: 1; }

  80% { opacity: 0.95; }

}


/* Blinking Cursor */

.blink {

  display: inline-block;

  animation: blinkCursor 1s steps(1, start) infinite;

}

@keyframes blinkCursor {

  50% { opacity: 0; }

}


/* Navigation am unteren Rand */

.bottom-bar {

  margin-top: auto;

  padding-bottom: 20px;

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  z-index: 5;

}


.dropdown {

  display: inline-block;

  margin-bottom: 8px;

  position: relative;

}


.dropbtn {

  background: none;

  border: 1px solid var(--amber);

  color: var(--amber);

  padding: 8px 20px;

  font-family: 'VT323', monospace;

  font-size: 20px;

  cursor: pointer;

  text-shadow: 0 0 5px var(--amber-glow);

  transition: all 0.2s ease;

}


.dropbtn:hover {

  background-color: rgba(255,176,0,0.1);

  box-shadow: 0 0 8px var(--amber-glow);

}


.dropdown-content {

  display: none;

  position: absolute;

  bottom: 50px;

  left: 50%;

  transform: translateX(-50%);

  background-color: rgba(26, 15, 0, 0.95);

  border: 1px solid var(--amber);

  padding: 20px;

  width: 300px;

  box-shadow: 0 0 10px var(--amber-glow);

  text-align: left;

  z-index: 20;

}


.dropdown:hover .dropdown-content {

  display: block;

}


.dropdown-content h3 {

  color: var(--amber);

  margin-top: 0;

}


a {

  color: var(--amber);

  text-decoration: none;

}


a:hover {

  text-decoration: underline;

}


.footer {

  font-size: 0.9rem;

  color: var(--amber-dim);

  text-shadow: 0 0 4px var(--amber-glow);

}


@media (max-width: 600px) {

  .ascii-logo {

    font-size: 6px; /* Logo-Skalierung für Handys */

  }

  body { font-size: 18px; }

  h2 { font-size: 1.2rem; }

  .description { padding: 15px; max-width: 90%; }

  .dropdown-content { width: 280px; }

}