/* Base page settings */
body {
  margin: 0;
  background-color: #000000;
  color: #00ff00;
  font-family: 'Fira Code', 'Courier New', monospace;
  line-height: 1.7;
  padding: 2rem;
}

/* Terminal container styling */
.terminal {
  max-width: 900px;
  margin: auto;
  background-color: #0a0a0a;
  padding: 2.5rem;
  border: 1px solid #00ff00;
  box-shadow: 0 0 25px rgba(0, 255, 0, 0.4);
  border-radius: 8px;
}

#journal-entry {
  white-space: pre-wrap;
  font-style: italic;
  color: #66FCF1;
  text-shadow: 0 0 6px #66FCF1;
  margin-top: 2rem;
}

/* Flicker animation for h1 titles */
@keyframes flicker {
  0% { opacity: 1; }
  5% { opacity: 0.4; }
  10% { opacity: 1; }
  15% { opacity: 0.8; }
  20% { opacity: 1; }
  25% { opacity: 0.6; }
  30% { opacity: 1; }
  40% { opacity: 0.5; }
  50% { opacity: 1; }
  60% { opacity: 0.7; }
  70% { opacity: 1; }
  85% { opacity: 0.3; }
  100% { opacity: 1; }
}

.flicker {
  animation: flicker 3s infinite;
}

/* Main header text */
h1 {
  font-size: 2rem;
  color: #39ff14;
  text-align: center;
  text-shadow: 0 0 12px #39ff14;
  margin-bottom: 2rem;
}

/* Manifesto, bio, motd, ghostlines */
.manifesto, .bio, .motd, .messages, .ghostline {
  margin-top: 2rem;
  font-style: italic;
  color: #66FCF1; /* bright neon azure */
  text-shadow: 0 0 10px #66FCF1;
  line-height: 1.8;
}

/* Subtle muted ghost lines */
.ghostline {
  color: #999;
  text-shadow: 0 0 5px #666;
}

/* Textareas and form controls */
textarea {
  width: 100%;
  background-color: #000000;
  color: #00ff00;
  border: 1px solid #39ff14;
  padding: 0.75rem;
  font-family: monospace;
  font-size: 1rem;
  resize: vertical;
  border-radius: 4px;
  margin-top: 1rem;
}

input[type="submit"] {
  margin-top: 1rem;
  background-color: #1E3F66;
  color: #00ff00;
  border: 1px solid #39ff14;
  padding: 0.75rem 1.5rem;
  font-family: monospace;
  cursor: pointer;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}

input[type="submit"]:hover {
  background-color: #39ff14;
  color: #000000;
}

/* Link styling */
.links a, a {
  color: #DA70D6; /* bright neon purple */
  text-decoration: none;
  font-weight: bold;
  margin: 0 0.5rem;
  text-shadow: 0 0 8px #DA70D6;
  transition: color 0.3s, text-shadow 0.3s;
}

.links a:hover, a:hover {
  color: #FF00FF;
  text-shadow: 0 0 12px #FF00FF;
}

/* Footer settings */
footer {
  margin-top: 3rem;
  font-size: 0.9rem;
  color: #66FCF1;
  text-align: center;
  text-shadow: 0 0 5px #66FCF1;
}

/* Timestamp inside footer */
.timestamp {
  color: #8A2BE2;
  text-shadow: 0 0 8px #8A2BE2;
}

/* ASCII art style */
.ascii-art {
  color: #00ff00;
  font-family: monospace;
  white-space: pre;
  margin-top: 1rem;
  margin-bottom: 2rem;
  text-shadow: 0 0 6px #39ff14;
}

/* Ghost-page specific alignment */
.ghost-page {
  text-align: center;
}

/* Messages list style */
.message {
  margin-bottom: 1rem;
  padding-left: 1rem;
  border-left: 2px solid #00ff00;
}

/* Audio player style */
audio {
  margin-top: 2rem;
  width: 100%;
  outline: none;
  background-color: #000;
  color: #00ff00;
  border: 2px solid #39ff14;
  border-radius: 6px;
  padding: 0.5rem;
}

/* Bonus: Flicker on hover (only if you want it — optional) */
h1:hover {
  animation: flicker 0.8s infinite;
}
.midi-wrapper {
  margin-top: 3rem;
  text-align: center;
}
/* Normal flicker for all links */
.flicker {
  animation: flicker 3s infinite;
}

/* SPECIAL: Make the journal link freak out harder on hover */
#journal-link:hover {
  color: #FF00FF;
  text-shadow: 0 0 15px #FF00FF, 0 0 25px #FF00FF;
  animation: flicker-hardcore 0.5s infinite;
}

@keyframes flicker-hardcore {
  0% { opacity: 1; }
  10% { opacity: 0.2; }
  20% { opacity: 0.9; }
  30% { opacity: 0.1; }
  40% { opacity: 1; }
  50% { opacity: 0.3; }
  60% { opacity: 1; }
  70% { opacity: 0.5; }
  80% { opacity: 1; }
  90% { opacity: 0.4; }
  100% { opacity: 1; }
}


.prompt-line {
  font-family: 'Courier New', monospace;
  color: #00ff99;
  font-size: 1rem;
  margin-top: 3rem;
  text-shadow: 0 0 5px #00ff99;
}

.prompt-line .user {
  color: #39ff14;
}

.prompt-line .path {
  color: #00ffff;
}

.cursor {
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}midi-player, midi-visualizer {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  filter: hue-rotate(280deg) brightness(1.2);
  background: #000;
  box-shadow: 0 0 12px #39ff14;
}
/* === SYMPATHY FOR THE VESSEL STYLING === */

/* Headings: strong, "official document" vibes */
article h1 {
  font-family: "Courier New", Courier, monospace;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00ffcc; /* Glitchy teal */
  border-bottom: 2px solid #00ffcc;
  padding-bottom: 0.3em;
  margin-bottom: 1em;
}

article h2 {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.5rem;
  color: #00ffcc;
  text-transform: uppercase;
  margin-top: 2em;
  margin-bottom: 0.8em;
  position: relative;
}

article h2::before {
  content: "[PROTOCOL UPDATE] ";
  color: #ff0077; /* Cyberpunk pink accent */
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Main text: clean terminal look */
article p {
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  line-height: 1.6;
  color: #e0e0e0;
  margin-bottom: 1.2em;
}

/* Ordered list for the ADHD Stages of Fandom */
article ol {
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  color: #e0e0e0;
  margin: 1em 0 2em 2em;
}

article ol li {
  margin-bottom: 0.7em;
}

/* Blockquotes: glitchy terminal vibe */
article blockquote {
  font-family: "Courier New", Courier, monospace;
  font-size: 1rem;
  color: #ff0077; /* Pink for lyrics to pop */
  background: rgba(255, 0, 119, 0.08);
  border-left: 3px solid #ff0077;
  padding: 0.8em 1em;
  margin: 1.5em 0;
  position: relative;
}

article blockquote::before {
  content: "> ";
  color: #ff0077;
  font-weight: bold;
}

/* Glitch hover effect for headings */
article h1:hover,
article h2:hover {
  text-shadow: 2px 0 #ff0077, -2px 0 #00ffcc;
  animation: glitch 0.3s infinite;
}

@keyframes glitch {
  0% {
    text-shadow: 2px 0 #ff0077, -2px 0 #00ffcc;
  }
  20% {
    text-shadow: -2px 0 #ff0077, 2px 0 #00ffcc;
  }
  40% {
    text-shadow: 2px 2px #ff0077, -2px -2px #00ffcc;
  }
  60% {
    text-shadow: -2px -2px #ff0077, 2px 2px #00ffcc;
  }
  100% {
    text-shadow: 2px 0 #ff0077, -2px 0 #00ffcc;
  }
}
footer {
  text-align: center;
  margin-top: 3em;
  padding-top: 1em;
  border-top: 1px solid #00ffcc;
}

footer .nav-return {
  font-family: "Courier New", Courier, monospace;
  color: #00ffcc;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

footer .nav-return .prompt {
  color: #00ffcc;
  margin-right: 0.3em;
}

footer .nav-return a {
  color: #00ffcc;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

footer .nav-return a:hover {
  color: #ff0077; /* Pink glitch accent */
  text-shadow: 1px 1px #00ffcc;
}

footer .nav-return .cursor {
  display: inline-block;
  color: #00ffcc;
  animation: blink 1s step-start infinite;
  margin-left: 0.3em;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}