@charset "UTF-8";
body {
  background-color: #21273a;
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-style: normal;
  margin: 3rem auto;
  max-width: 70ch;
  color: #95b4ff;
  text-shadow: 0 0 2px rgba(149, 180, 255, 0.4), 0 0 4px rgba(149, 180, 255, 0.2);
  animation: crt-flicker 3s infinite;
}
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 110%);
  z-index: 100;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 4px);
}

@keyframes crt-flicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.98;
  }
  52% {
    opacity: 0.94;
  }
}
h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  color: #da95ff;
  text-shadow: 0 0 4px rgba(218, 149, 255, 0.6), 0 0 10px rgba(218, 149, 255, 0.4);
  text-shadow: 0.5px 0 red, -0.5px 0 cyan, 0 0 4px rgba(255, 255, 255, 0.6);
}

h2 {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
  color: #95ffc5;
  text-shadow: 0 0 4px rgba(149, 255, 197, 0.6), 0 0 10px rgba(149, 255, 197, 0.4);
  text-shadow: 0.5px 0 red, -0.5px 0 cyan, 0 0 4px rgba(255, 255, 255, 0.6);
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #ff95a2;
  text-shadow: 0 0 4px rgba(255, 149, 162, 0.6), 0 0 10px rgba(255, 149, 162, 0.4);
  text-shadow: 0.5px 0 red, -0.5px 0 cyan, 0 0 4px rgba(255, 255, 255, 0.6);
}

h4 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  color: #ffda95;
  text-shadow: 0 0 4px rgba(255, 218, 149, 0.6), 0 0 10px rgba(255, 218, 149, 0.4);
  text-shadow: 0.5px 0 red, -0.5px 0 cyan, 0 0 4px rgba(255, 255, 255, 0.6);
}

h5 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: #95c5ff;
  text-shadow: 0 0 4px rgba(149, 197, 255, 0.6), 0 0 10px rgba(149, 197, 255, 0.4);
}

strong {
  font-weight: bold;
  color: #95ffc5;
  text-shadow: 0 0 4px rgba(149, 255, 197, 0.6), 0 0 8px rgba(149, 255, 197, 0.3);
}

em {
  font-style: italic;
  color: #ff95a2;
  text-shadow: 0 0 4px rgba(255, 149, 162, 0.6), 0 0 8px rgba(255, 149, 162, 0.3);
}

a {
  color: #da95ff;
  text-shadow: 0 0 4px rgba(218, 149, 255, 0.6), 0 0 8px rgba(218, 149, 255, 0.3);
  transition: all 0.2s ease;
}
a:hover {
  text-decoration: underline;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(218, 149, 255, 0.8), 0 0 12px rgba(218, 149, 255, 0.6);
}

.crt-text {
  text-shadow: 1px 0 red, -1px 0 cyan, 0 0 4px rgba(255, 255, 255, 0.6);
}

ol {
  list-style: none;
  counter-reset: item;
}
ol li {
  counter-increment: item;
  margin-bottom: 5px;
}
ol li:before {
  margin-right: 10px;
  content: counter(item) ". ";
  font-weight: bold;
  color: #62a3ff;
  text-align: center;
  display: inline-block;
  text-shadow: 0 0 3px rgba(98, 163, 255, 0.6), 0 0 6px rgba(98, 163, 255, 0.3);
}

ul {
  list-style: none;
  margin-bottom: 5px;
}
ul li::before {
  margin-right: 10px;
  content: "• ";
  font-weight: bold;
  color: #ffda95;
  text-align: center;
  display: inline-block;
  text-shadow: 0 0 3px rgba(255, 218, 149, 0.6), 0 0 6px rgba(255, 218, 149, 0.3);
}

/* --- FIX 1: Make Images Responsive --- */
img {
  max-width: 100%;
  /* Never wider than the screen */
  height: auto;
  /* Keep aspect ratio */
  display: block;
  /* Prevent weird spacing below images */
  margin: 1rem auto;
  /* Center images */
  border-radius: 4px;
  /* Optional: Slight rounding */
}

/* --- FIX 2: Scrollable Code Blocks --- */
pre, code {
  white-space: pre;
  /* Respect formatting */
  overflow-x: auto;
  /* Add scrollbar if too wide */
  max-width: 100%;
  /* Keep inside the container */
}

/* Optional: Make the code block look cleaner */
div.highlighter-rouge, figure.highlight {
  margin-bottom: 1.5rem;
  background: #2d2d2d;
  /* Dark background */
  border-radius: 5px;
  padding: 10px;
  /* Breathing room */
}

pre, code {
  white-space: pre-wrap;
  /* Forces text to wrap */
  word-wrap: break-word;
  /* Breaks long words */
  overflow-x: hidden;
  /* Hides scrollbar */
}