/* Define CSS variables for theming */
:root {
  --background-dark: #000;
  --text-dark: #0f0;

  --background-light: #fff;
  --text-light: #000;

  --background-retro: #222;
  --text-retro: #ff1493;

  --background-default: #211d1b; /* Original background */
  --text-default: #519975; /* Original text color */
  --cursor-default: #213a80;

  --common-green: #0f0;
  --common-white: #fff;
  --common-light-green: #73abad;
  --common-dark: #211d1b;
  --common-gray: #333;
  --font-size: 16px;
}

/* Default Theme (Dark Mode) */
body {
  margin: 0;
  padding: 15px 20px;
  min-height: 99%;
  width: 100%;
  min-width: 550px;
  color: var(--text-default);
  background: var(--background-default);
  font-family: cursor, monospace;
  font-size: var(--font-size);
  overflow-x: hidden;
}

::selection {
  color: var(--background-dark);
  background-color: var(--common-green);
}

::-moz-selection {
  color: var(--background-dark);
  background-color: var(--common-green);
}

textarea {
  left: -1000px;
  position: absolute;
}

b {
  font-weight: bold;
  text-decoration: underline;
}

/* Cursor Start */
.cursor {
  font-size: 12px;
  color: var(--cursor-default);
  background-color: var(--cursor-default);
  position: relative;
  opacity: 1;
  height: 1.5em;
  width: 10px;
  max-width: 10px;
  transform: translateY(4px);
  overflow: hidden;
  text-indent: -5px;
  display: inline-block;
  text-decoration: blink;
  animation: blinker 1s linear infinite;
}

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

#command {
  cursor: text;
  height: 50px;
  color: var(--common-light-green);
}

#liner {
  line-height: 1.3em;
  margin-top: -2px;
  animation: show 0.5s ease forwards;
  animation-delay: 1.2s;
  opacity: 0;
}

#liner::before {
  color: var(--common-white);
  content: "visitor@austinrspires.com:~$";
}

#liner.password::before {
  content: "Password:";
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Cursor End */
p {
  display: block;
  line-height: 1.3em;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  letter-spacing: 0.05em;
  animation: typing 0.5s steps(30, end);
}

.no-animation {
  animation: typing 0 steps(30, end);
}

.margin {
  margin-left: 20px;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Command Output Styling */
.index {
  color: var(--common-white);
}

.color2 {
  color: var(--common-light-green);
}

.command {
  color: var(--common-light-green);
  text-shadow: 0 0 5px var(--common-light-green);
}

.error {
  color: var(--common-light-green);
}

.white {
  color: var(--common-white);
}

.inherit,
a {
  color: var(--common-white);
}

a {
  text-decoration: inherit;
}

a:hover {
  background: var(--common-light-green);
  color: var(--common-dark);
}

a:focus {
  outline: 0;
}

/* Media Player */
#media-player {
  background-color: var(--common-gray); /* Dark background */
  color: var(--common-green); /* Green text */
  border: 1px solid var(--common-green); /* Green border */
  padding: 10px;
  font-family: monospace;
  width: 100%;
  max-width: 600px;
  margin: 20px 0;
}

#audio-player {
  width: 100%;
  height: 30px;
  background-color: #444; /* Darker background for the audio controls */
  border: none;
  outline: none;
}

#audio-player::-webkit-media-controls-panel {
  background-color: #444;
  color: var(--common-green);
}

#audio-player::-webkit-media-controls-play-button,
#audio-player::-webkit-media-controls-pause-button {
  color: var(--common-green);
  background-color: var(--common-gray);
  border-radius: 4px;
  border: 1px solid var(--common-green);
}

#audio-player::-webkit-media-controls-timeline {
  background-color: #555; /* Dark progress bar background */
  color: var(--common-green);
}

#audio-player::-webkit-media-controls-current-time-display,
#audio-player::-webkit-media-controls-time-remaining-display {
  color: var(--common-green); /* Green text for time */
}

#audio-player::-webkit-media-controls-volume-slider {
  background-color: #666; /* Volume slider background */
  border: 1px solid var(--common-green);
}

#audio-player::-webkit-media-controls-mute-button {
  color: var(--common-green);
  background-color: var(--common-gray);
  border-radius: 4px;
  border: 1px solid var(--common-green);
}

/* Initially hide the persistent media player */
#persistent-music-player {
  display: none; /* Hide the player by default */
  background-color: var(--common-gray); /* Dark background */
  color: var(--common-green); /* Green text */
  border: 1px solid var(--common-green); /* Green border */
  padding: 10px;
  font-family: monospace;
  width: 100%;
  max-width: 600px;
  margin: 20px 0;
  position: relative; /* Ensure it stays in position */
  z-index: 1;
}

/* Style the audio controls inside the persistent player */
#persistent-music-player audio {
  width: 100%;
  height: 30px;
  background-color: #444;
  border: none;
  outline: none;
}

#persistent-music-player p {
  margin: 5px 0;
  color: var(--common-green);
}

/*Themes*/

/* Theme for Default Mode */
body.default-mode {
  background-color: #211d1b; /* Original background */
  color: #519975; /* Original text color */
}

body.default-mode .cursor {
  color: #213a80;
  background-color: #213a80;
}

body.default-mode #liner::before {
  color: var(--common-green); /* Change according to default theme */
  content: "visitor@austinrspires.com:~$";
}

body.default-mode #liner.password::before {
  color: var(--common-green); /* Change according to default theme */
  content: "Password:";
}

/* Theme for Dark Mode */
body.dark-mode {
  background-color: var(--background-dark);
  color: var(--text-dark);
}

body.dark-mode .cursor {
  color: var(--text-dark); /* Match cursor with dark theme text */
  background-color: var(--text-dark);
}

body.dark-mode #liner::before {
  color: var(--text-dark); /* Change according to dark theme text */
  content: "visitor@austinrspires.com:~$";
}

body.dark-mode #liner.password::before {
  color: var(--text-dark); /* Change according to dark theme text */
  content: "Password:";
}

/* Theme for Light Mode */
body.light-mode {
  background-color: var(--background-light);
  color: var(--text-light);
}

body.light-mode .cursor {
  color: var(--text-light); /* Match cursor with light theme text */
  background-color: var(--text-light);
}

body.light-mode #liner::before {
  color: var(--text-light); /* Change according to light theme text */
  content: "visitor@austinrspires.com:~$";
}

body.light-mode #liner.password::before {
  color: var(--text-light); /* Change according to light theme text */
  content: "Password:";
}

/* Theme for Retro Mode */
body.retro-mode {
  background-color: var(--background-retro);
  color: var(--text-retro);
}

body.retro-mode .cursor {
  color: var(--text-retro); /* Match cursor with retro theme text */
  background-color: var(--text-retro);
}

body.retro-mode #liner::before {
  color: var(--text-retro); /* Change according to retro theme text */
  content: "visitor@austinrspires.com:~$";
}

body.retro-mode #liner.password::before {
  color: var(--text-retro); /* Change according to retro theme text */
  content: "Password:";
}

/* Media Player Styling */
body.default-mode #persistent-music-player {
  background-color: #333; /* Original dark background */
  color: #0f0; /* Original green text */
  border: 1px solid #0f0; /* Original green border */
}

body.dark-mode #persistent-music-player {
  background-color: var(--common-gray);
  color: var(--common-green);
  border: 1px solid var(--common-green);
}

body.light-mode #persistent-music-player {
  background-color: var(--background-light);
  color: var(--text-light);
  border: 1px solid var(--text-light);
}

body.retro-mode #persistent-music-player {
  background-color: var(--background-retro);
  color: var(--text-retro);
  border: 1px solid var(--text-retro);
}