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

/* Retro BBS Terminal Vibe */

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

body {
  background: #000;
  color: #00ff00;
  font-family: 'VT323', monospace;
  font-size: 18px;
  line-height: 1.5;
  padding: 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  max-width: 900px;
  width: 100%;
}

/* Scanline background effect */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.1),
    rgba(0,0,0,0.1) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 1;
}

/* Navigation bar */
nav {
  width: 100%;
  background: #001100;
  padding: 12px 0;
  margin-bottom: 30px;
  border: 1px solid #00ff00;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  gap: 20px;
  box-shadow: 0 0 8px #00ff00;
  z-index: 10;
  position: relative;
}

nav a {
  color: #00ff00;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
  text-shadow:
    0 0 5px #00ff00,
    0 0 10px #00ff00;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #00ffaa;
  text-shadow:
    0 0 10px #00ffaa,
    0 0 20px #00ffaa;
}

/* Headings */
h1, h2, summary {
  text-shadow:
    0 0 5px #00ff00,
    0 0 10px #00ff00;
}

/* Expandable wiki sections */
details {
  background: #001100;
  margin-bottom: 15px;
  border-radius: 4px;
  padding: 10px 15px;
  box-shadow: inset 0 0 10px #004400;
  cursor: pointer;
  color: #00ff00;
}

details[open] {
  box-shadow: 0 0 15px #00ff00;
}

summary {
  font-weight: bold;
  font-size: 1.3rem;
  outline: none;
  list-style: none;
  cursor: pointer;
}

details > p {
  margin-top: 10px;
  line-height: 1.6;
  color: #00ff00;
  font-family: 'VT323', monospace;
}

/* Paragraphs */
p, ul {
  max-width: 850px;
}

/* Links inside content */
a {
  color: #00ff00;
  text-decoration: underline;
}

a:hover {
  color: #00ffaa;
  text-shadow: 0 0 8px #00ffaa;
}