@font-face {
    font-family: 'DM Mono';
    src: url('DM\ Mono.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: DM Mono;
    color: #ffffff;
}

body {
    background-color: #000000;
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr auto;
    height: 100vh;
    margin: 0;
    padding: 0;
}
#settingsInfo {
    font-size: 5vmin;
}
#canvas, #settingsWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#canvas {
    border: 1px #ffffff solid;
    width: 80vmin;
    height: 80vmin;
}
.unfocus {
    filter: blur(2vmin);
}
#settingsWrapper {
    background-color: #000000;
    border: 1px #ffffff solid;
    width: 60vmin;
    height: 80vmin;
    overflow-y: auto;
}
#settingsList {
    padding: 2vmin;
    display: flex;
    flex-direction: column;
    height: calc(100% - 4vmin);
    gap: 1vmin;
}
.setting {
    display: flex;
    width: 100%;
}
.setting > .name {
    color: #ffffff;
    font-size: 5vmin;
    margin-right: auto;
    user-select: none;
}
.setting > .value {
    color: #ffffff;
    font-size: 5vmin;
    margin-left: 1vmin;
    user-select: none;
}
.setting > input[type="checkbox"] {
    appearance: none;
    background: #000000;
    border: 2px solid #ffffff;
    height: 5.75vmin;
    aspect-ratio: 1 / 1;
}
.setting > input[type="checkbox"]:checked {
    background: #ffffff;
}

.hidden {
    display: none;
}

input[type="range"] {
  appearance: none;
  width: 20vmin;
  height: auto;
  background: transparent;
}

input[type="range"]::-moz-range-track {
  height: 0.3vmin;
  background: #ffffff;
  border-radius: 0;
}

input[type="range"]::-moz-range-thumb {
  width: 0.5vmin;
  height: 5vmin;
  background: #000000;
  border: 2px solid #ffffff;
  border-radius: 0;
}
input[type="range"]::-moz-range-thumb:active, input[type="range"]::-moz-range-thumb:hover {
    background: #ffffff;
}

input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20vmin;
  height: 5vmin; /* needs explicit height for webkit to avoid clipping thumb */
  background: transparent;
}

/* Track */
input[type="range"]::-moz-range-track {
  height: 0.3vmin;
  background: #ffffff;
  border-radius: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 0.3vmin;
  background: #ffffff;
  border-radius: 0;
}

/* Thumb */
input[type="range"]::-moz-range-thumb {
  width: 0.5vmin;
  height: 5vmin;
  background: #000000;
  border: 2px solid #ffffff;
  border-radius: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.5vmin;
  height: 5vmin;
  background: #000000;
  border: 2px solid #ffffff;
  border-radius: 0;
  margin-top: calc(-2.5vmin + 0.15vmin); /* center thumb on track */
}

/* Hover/active */
input[type="range"]::-moz-range-thumb:active,
input[type="range"]::-moz-range-thumb:hover {
  background: #ffffff;
}
input[type="range"]::-webkit-slider-thumb:active,
input[type="range"]::-webkit-slider-thumb:hover {
  background: #ffffff;
}

.setting > select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #000000;
    border: 2px solid #ffffff;
    border-radius: 0;
    color: #ffffff;
    font-family: 'DM Mono', monospace;
    font-size: 4vmin; /* Något mindre än namnet (5vmin) för balans */
    padding: 0 1.5vmin; /* Padding på sidorna för luft, men ingen extra plats för pil */
    height: 5.75vmin; /* Matchar din checkbox exakt */
    width: auto; /* Gör bredden dynamisk baserat på texten */
    cursor: default;
    outline: none;
    text-align: center;
}

/* Styling för alternativen när man klickar upp den */
.setting > select option {
    background-color: #000000;
    color: #ffffff;
}

/* Hover-effekt som matchar din slider */
.setting > select:hover,
.setting > select:focus {
    background-color: #ffffff;
    color: #000000;
}