:root {
  --primary-bg: #1e1e1e;
  --primary-text: #ffffff;
  --accent-color: #00FFFF;
  --secondary-color: #FF00FF;
  --gold-color: gold;
  /* use the system’s default monospace (telnet‐style) font */
  --font-family: monospace;
}

body {
  background: #fff;
  color: #000;
  font-family: var(--font-family);
}

.navbar {
  background-color: darkslategray;
  padding: 12px 0;
}

.site-title {
  font-size: 1.8em;
  font-family: var(--font-family);
  font-weight: 700;
}

.text-accent { color: var(--accent-color); }
.text-secondary { color: var(--secondary-color); }

a,
.analytics-link {
  color: var(--accent-color);
  text-decoration: none;
}
.analytics-link:hover {
  color: var(--gold-color);
  text-decoration: underline;
}

.analytics-link2 {
  color: #1E90FF;
  text-decoration: none;
}
.analytics-link2:hover {
  color: #87CEFA;
  text-decoration: underline;
}

.container3 {
  width: 80%;
  max-width: 1000px;
  margin: 30px auto 0 auto;
  padding: 10px;
  background: none;
}

.terminal {
  background: var(--primary-bg);
  color: var(--primary-text);           /* was green, now white */
  border: 2px solid #444;
  border-radius: 8px;
  padding: 22px 28px 18px 28px;
  font-family: var(--font-family);      /* system monospace */
  font-size: 0.85em;                    /* reduced from 1.05em */
  margin-bottom: 25px;
  box-shadow: 0 0 10px #000c;
  line-height: 1.6;
  overflow-x: auto;
  min-height: 90px;
  position: relative;
}

/* highlight bold text in gold */
.terminal b,
.terminal strong {
  color: #FFD700;
  font-weight: 700;
}

.terminal ul {
  margin: 10px 0 10px 30px;
  color: var(--primary-text);
  font-size: 1em;
}

.terminal code {
  background: #222;
  color: var(--accent-color);           /* keeps your aqua highlights */
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 1em;
}

.indented-list ul {
  margin-left: 25px;
}

footer {
  margin-top: 40px;
}

.faq-code {
  background: var(--primary-bg);
  color: var(--primary-text);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 1em;
  text-align: center;
}

@media (max-width: 600px) {
  .container3 {
    width: 97%;
  }
  .terminal {
    font-size: 0.80em;                  /* even smaller on mobile */
    padding: 10px 5px;
  }
  .navbar {
    font-size: 1.2em;
  }
}

.cursor {
  animation: blink 1s infinite;
}

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