:root {
  --text: #dfffc3;
  --link: #cdf6c1;
  --background1: #6783c5;
  --background2: #011b2f;
  --border: #4e6747;
  --border2: #324162;
  --neon: #88e13b;
}

html {
  font-size: 1vw;
  aspect-ratio: 16/9;
} body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  background: url("../img/background.svg") fixed no-repeat;
  background-size: cover;
  color: var(--text);
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  font-size: larger;
  text-align: center;
  align-items: center;
  justify-content: center;
} #debugConsole {
  display: none;
  white-space: pre-wrap;
  margin-top: 20px;
  padding: 14px;
  background: var(--background1);
  border-radius: 10px;
  border: 2px solid var(--border);
  color: var(--text);
  font-size: 0.9rem;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.2);
} .statusText {
  margin-top: 12px;
  font-weight: bold;
  color: var(--neon);
  font-size: 1rem;
} h1 {
  font-size: 7em;
  text-shadow: 2px 4px 1px var(--neon);
} h2 {
  font-size: 4em;
  text-shadow: 1px 2px 1px var(--neon);
} .slider {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--text);
  width: 12vw;
  height: 0.8rem;
  border-radius: 5px;
  border: 2px solid var(--border);
  border-top: none;
  border-left: none;
  box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.2)
} .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--background1);
  border-radius: 5px;
  border: 2px solid var(--border2);
  border-top: none;
  border-left: none;
} .slider::-moz-range-thumb {
  -moz-appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--background1);
  border-radius: 5px;
  border: 2px solid var(--border2);
  border-top: none;
  border-left: none;
} .url {
  width: 20vw;
  height: 2.5vh;
  background: var(--background1);
  border-radius: 10px;
  border: 2px solid var(--border);
  border-top: none;
  border-left: none;
  color: var(--text);
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  font-weight: bold;
  padding: 4px;
  margin-bottom: 10px;
  margin-right: 10px;
  box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.2)
} .url:focus {
    border-color: #67A563;
    outline-width: 0;
} .submit {
  background: var(--background1);
  border-radius: 10px;
  border: 2px solid var(--border);
  padding: 4px;
  border-top: none;
  border-left: none;
  color: var(--neon);
  font-size: 1rem;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.2)
} input:hover {
  opacity: 0.8;
} select {
  width: fit-content;
  height: fit-content;
  background: darkslateblue;
  color: var(--text);
  border-radius: 5px;
  min-height: 20px;
  min-width: 100px;
  border: 1px solid var(--neon);
  border-top: none;
  border-left: none;
  box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.2)
} #extensionHanger {
  background: var(--border2);
  border-radius: 15px;
  border: 2px solid var(--neon);
  border-top: none;
  border-left: none;
  width: 400px;
  height: fit-content;
  padding: 20px;
  margin: auto;
} .navbar {
  width: 5rem;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background: var(--background2);
  box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: column;
} a {
  color: #cdf6c1;
  text-decoration: none;
} svg {
  margin: 8px;
  padding: 4px;
  width: 3vw;
  height: 3vw;
  border-radius: 15px;
  transition: 0.3s ease-in-out;
} svg:hover {
  background: var(--background1);
} #header {
  background: #212f4f;
  border-radius: 15px;
  border: 2px solid var(--border);
  border-top: none;
  border-left: none;
  width: 50vw;
  padding: 4rem;
  margin: 5vh auto;
  box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.2);
} #header:hover {
  box-shadow: 2px 4px 1px var(--border2);
} ::selection {
  color: var(--neon);
  background: none;
} input:hover {
    opacity: 0.8;
    box-shadow: 4px 8px 2px rgba(0, 0, 0, 0.2)
} button:hover {
    opacity: 0.8;
    box-shadow: 4px 8px 2px rgba(0, 0, 0, 0.2)
} #scpecialA {
    transition: 0.3s ease-in-out;
} #specialA:hover {
    background: var(--background1);
}