/* Theme Variables */
:root {
  --background: #211D1B;
  --text-color: #519975;
  --cursor-color: #73ABAD;
  --command-color: #73ABAD;
  --error-color: #B89076;
  --link-color: #9C8394;
  --index-color: #DCDCCC;
  --selection-bg: #519975;
  --selection-text: #211830;
}

/* Themes */
.theme-default {
  --background: #211D1B;
  --text-color: #519975;
  --cursor-color: #73ABAD;
  --command-color: #73ABAD;
  --error-color: #B89076;
  --link-color: #9C8394;
  --index-color: #DCDCCC;
  --selection-bg: #519975;
  --selection-text: #211830;
}

.theme-light {
  --background: #f0f0f0;
  --text-color: #2E8B57;
  --cursor-color: #4A90E2;
  --command-color: #4A90E2;
  --error-color: #D64933;
  --link-color: #6B4E71;
  --index-color: #333333;
  --selection-bg: #2E8B57;
  --selection-text: #ffffff;
}

.theme-hacker {
  --background: #0D0208;
  --text-color: #00FF41;
  --cursor-color: #00FF41;
  --command-color: #00FF41;
  --error-color: #FF0000;
  --link-color: #008F11;
  --index-color: #00FF41;
  --selection-bg: #00FF41;
  --selection-text: #0D0208;
}

.theme-sunset {
  --background: #2D1B2E;
  --text-color: #FFB86C;
  --cursor-color: #FF79C6;
  --command-color: #FF79C6;
  --error-color: #FF5555;
  --link-color: #BD93F9;
  --index-color: #F8F8F2;
  --selection-bg: #FFB86C;
  --selection-text: #2D1B2E;
}

.theme-powershell {
  --background: #012456;
  --text-color: #FFFFFF;
  --cursor-color: #FFFFFF;
  --command-color: #F5F5F5;
  --error-color: #FF0000;
  --link-color: #7FD5EA;
  --index-color: #FFFF00;
  --selection-bg: #FFFFFF;
  --selection-text: #012456;
}

.theme-vscode {
  --background: #1E1E1E;
  --text-color: #9CDCFE;
  --cursor-color: #569CD6;
  --command-color: #569CD6;
  --error-color: #F44747;
  --link-color: #4EC9B0;
  --index-color: #CE9178;
  --selection-bg: #264F78;
  --selection-text: #FFFFFF;
}

.theme-ubuntu {
  --background: #2C001E;
  --text-color: #FFFFFF;
  --cursor-color: #E95420;
  --command-color: #E95420;
  --error-color: #FF4444;
  --link-color: #AEA79F;
  --index-color: #77216F;
  --selection-bg: #E95420;
  --selection-text: #FFFFFF;
}

.theme-commodore {
  --background: #4040E0;
  --text-color: #A0A0FF;
  --cursor-color: #A0A0FF;
  --command-color: #A0A0FF;
  --error-color: #FF0000;
  --link-color: #FFA0A0;
  --index-color: #FFFFFF;
  --selection-bg: #A0A0FF;
  --selection-text: #4040E0;
}

.theme-monokai {
  --background: #272822;
  --text-color: #F8F8F2;
  --cursor-color: #A6E22E;
  --command-color: #66D9EF;
  --error-color: #F92672;
  --link-color: #AE81FF;
  --index-color: #FD971F;
  --selection-bg: #49483E;
  --selection-text: #F8F8F2;
  --color2: #E6DB74;
}

.theme-cyberpunk {
  --background: #0f0b1e;
  --text-color: #ff00ff;
  --cursor-color: #00ffff;
  --command-color: #f700ff;
  --error-color: #ff0055;
  --link-color: #00ffff;
  --index-color: #ff00ff;
  --selection-bg: #ff00ff;
  --selection-text: #0f0b1e;
  --color2: #00ffff;
}

/* General Styling */
body {
  margin: 0;
  padding: 15px 10px;
  min-height: 100%;
  width: 100%;
  min-width: 320px;
  color: var(--text-color);
  background: var(--background);
  font-family: cursor, monospace;
  overflow-x: hidden;
}

::selection {
  color: var(--selection-text);
  background-color: var(--selection-bg);
}

::-moz-selection {
  color: var(--selection-text);
  background-color: var(--selection-bg);
}

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

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

/* Cursor Styling */
.cursor {
  font-size: 12px;
  color: var(--cursor-color);
  background-color: var(--cursor-color);
  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(--command-color);
}

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

#liner::before {
  color: var(--text-color);
  content: "visitor@ianterhaar.me:~$";
}

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

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

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%;
  }
}

.index {
  color: var(--index-color);
}

.color2 {
  color: #B89076;
}

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

.error {
  color: var(--error-color);
}

.white {
  color: #fff;
}

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

a {
  text-decoration: inherit;
}

a:hover {
  background: var(--cursor-color);
  color: var(--background);
}

a:focus {
  outline: 0;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  body {
    padding: 10px 5px 10px 5px;
  }

  p {
    font-size: 0.9em;
    white-space: normal;
  }

  #command {
    font-size: 0.9em;
  }

  .cursor {
    height: 1.2em;
    width: 8px;
  }

  .margin {
    margin-left: 10px;
  }
}

@media (max-width: 480px) {
  body {
    padding: 10px 5px 10px 5px; /* Added extra padding to the right for mobile */
  }

  #liner::before {
    content: "visitor:~$"; /* Shorten the prompt for mobile */
  }

  p {
    font-size: 0.6em;
    white-space: normal;
  }

  #command {
    font-size: 0.6em;
  }

  .cursor {
    height: 1em;
    width: 6px;
  }

  .margin {
    margin-left: 5px;
  }
}