:root {
  --background-color: rgb(25, 25, 25);
  --background-color-menu: rgb(20, 20, 20);
  --border-color: rgb(50, 50, 50);
  --color: rgb(230, 230, 230);
  --color-hover: rgb(190, 190, 190);
  --color-pri: rgb(145, 17, 17);
  --color-sec: rgb(0, 225, 116);
  --color-acc: rgb(96, 21, 78);
  --color-pri-alpha: rgba(145, 17, 17, 0.5);
  --color-sec-alpha: rgba(0, 225, 116, 0.5);
  --color-acc-alpha: rgba(96, 21, 78, 0.5);
  --color-anim: 0.2s;

  --pastel-green: hsl(120, 20%, 20%);
  --pastel-red: hsl(0, 20%, 20%);
}

.light-mode {
  --pastel-green: rgb(180, 200, 180);
  --pastel-red: rgb(200, 180, 180);
}

body {
  margin: 0px;
  font-family: Comfortaa;
  background-color: var(--background-color);
  color: var(--color);
}

.spacing-below {
  margin-bottom: 1vh !important;
}

.main-container {
  margin: 0 auto;
  padding: 1vh 1vh;
  margin-top: 12vh;
  width: 48vw;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--header-background-color);
  transition: background-color var(--darklighttransition, --transanim);
  border-radius: 1vh;
}

.sorting-container {
  background-color: #272727;
  width: 48vw;
  height: 27vh;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-end;
}

.bar {
  background: rgb(255, 0, 255);
  border-top-left-radius: 1vh;
  border-top-right-radius: 1vh;
  border-bottom-left-radius: 0.5vh;
  border-bottom-right-radius: 0.5vh;
}

.number-slider {
  display: flex;
  align-items: center;
}

.slider-output {
  text-align: center;
  vertical-align: middle;
  width: 5vw;
  font-weight: 600;
}

.slider-container {
  width: 100%;
  height: 20px;
}

input[type="range"] {
  margin: 0px;
  background: transparent;
  width: 100%;
  -webkit-appearance: none;
}

input[type="range"]:focus,
input[type="range"]:active,
input[type="range"]::-moz-focus-inner,
input[type="range"]::-moz-focus-outer {
  border: 0;
  outline: none;
}

input[type="range"]::-moz-range-thumb {
  border: none;
  height: 35px;
  width: 35px;
  background-color: transparent;
  background-image: url(../../assets/icons/shibainu.png);
  background-position: 0 0;
  background-size: cover;
  transform: rotateZ(var(--thumb-rotate));
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb:active {
  background-position: 100% 0px;
  transform: scale(1.2) rotateZ(var(--thumb-rotate));
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 20px;
  background: var(--border-color);
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

input[type="range"]::-moz-range-progress {
  height: 20px;
  background: var(--border-color);
  border-radius: 10px;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  border: none;
  height: 35px;
  width: 35px;
  background-color: transparent;
  background-image: url(../assets/icons/shibainu.png);
  background-position: 0 0;
  background-size: cover;
  transform: rotateZ(var(--thumb-rotate));
  cursor: pointer;
  margin-top: -7px;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb:active {
  background-position: 100% 0px;
  transform: scale(1.2) rotateZ(var(--thumb-rotate));
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 20px;
  background: var(--border-color);
  transition: background var(--darklighttransition, --transanim);
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
}

.algs-container {
  margin: auto;
  width: 36vw;
  height: fit-content;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}

.algs-buttons {
  margin: 0px;
  padding: 0px;
  width: 17.75vw;
  height: 3vh;
  margin-bottom: 0.375vh;
  font-size: 20px;
  font-family: Comfortaa;
  font-weight: 600;
  color: var(--main-text-color);
  text-align: center;
  vertical-align: middle;
  background-color: var(--border-color);
  transition: color var(--darklighttransition, --transanim);
  transition: background-color var(--darklighttransition, --transanim);
  border-radius: 1.5vh;
  border-width: 0px;
}

.algs-buttons:hover {
  cursor: pointer;
  opacity: 0.85;
  transition: 0.2s;
  background-color: var(--pastel-green);
}

.wip:hover {
  cursor: not-allowed;
  background-color: var(--pastel-red);
}

.wide {
  width: 48vw !important;
}

.p5canvas {
  position: absolute;
}