@font-face {
  font-family: redwind;
  src: url("../fonts/rewind_bold.otf");
}

* {
  font-family: redwind;
}

:root {
  --font-size-small: 14px;
  --font-size-large: 28px;
  --font-size-xlarge: 32px;
  --spacing-xsmall: 8px;
  --spacing-small: 18px;
  --spacing-medium: 36px;
  --spacing-large: 72px;
  --spacing-xlarge: 216px;
  --spacing-giant: 360px;
  --border-medium: 4px
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: black;
  font-size: var(--font-size-small);
  line-height: 100%;
}

#logo {
  position: fixed;
  top: var(--spacing-medium);
  left: var(--spacing-medium);
  font-size: var(--font-size-xlarge);
  color: white;
  line-height: 100%;
}


#bottom-bar {
  position: fixed;
  display: flex;
  bottom: var(--spacing-medium);
  right: var(--spacing-medium);
  gap: var(--spacing-small);
}

#sidebar {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  right: var(--spacing-medium);
  top: 50%;
  transform: translateY(-50%);
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.button {
  width: var(--spacing-large);
  height: var(--spacing-large);
  padding: 2px 4px 6px 4px;
  background-color: black;
  color: white;
  overflow: hidden;
  word-break: break-all;
}

#shutter {
  width: var(--spacing-xlarge);
  font-size: var(--font-size-large);
  padding-top: 0px;
  padding-bottom: 8px;
  line-height: 100%;
}

#menu {
  position: fixed;
  top: var(--spacing-medium);
  right: var(--spacing-medium);
}

.nav-list {
  display: flex;
  position: absolute;
  flex-direction: column;
  align-items: end;
  justify-content: end;
  gap: var(--spacing-medium);
  width: calc(100vw - var(--spacing-medium));
  bottom: var(--spacing-large);
  font-size: var(--font-size-xlarge);
}

.inactive {
  color: darkgrey;
}

a {
  color: white;
  text-decoration: none;
}



/* Fancy Slider */

/* Slider Label */
.slider-label {
  width: var(--spacing-large);
  height: var(--spacing-medium);
  padding: 2px 4px 6px 4px;
  background-color: black;
  color: white;
  overflow: hidden;
  word-break: break-all;
}

/* Slider Wrapper */
.slider-wrapper {
  margin-left: 4px; /* Offset correction */
  display: flex;
  flex-direction: column;
  width: var(--spacing-large);
  align-items: center;
}

/* Slider Container */
.slider-container {
  position: relative;
  width: 36px;
  height: var(--spacing-giant);
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

/* Make the range input vertical */
input[type="range"] {
  -webkit-appearance: none; /* Remove default styles */
  appearance: none;
  width: calc(var(--spacing-giant) - 8px); /* Switch width & height */
  height: 36px;
  transform: rotate(-90deg); /* Rotate for vertical alignment */
  position: absolute;
  background-color: black;
}

/* Style the track */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--border-medium);
  background: white;
}

/* Style the thumb (WebKit Browsers: Chrome, Edge, Safari) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  background: black;
  border-radius: 50%;
  border: var(--border-medium) solid white;
  cursor: grab;
  margin-top: -12px; /* Center the thumb */
}

/* Firefox Support */
input[type="range"]::-moz-range-track {
  width: 100%;
  height: var(--border-medium);
  background: white;
}

input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  background: black;
  border-radius: 50%;
  border: var(--border-medium) solid white;
  cursor: grab;
}

input[type="range"]::-moz-range-thumb:active {
  background: white;
}

/* Ensures alignment on Edge/IE */
input[type="range"]::-ms-track {
  width: 100%;
  height: var(--border-medium);
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type="range"]::-ms-thumb {
  width: 28px;
  height: 28px;
  background: black;
  border-radius: 50%;
  border: var(--border-medium) solid white;
  cursor: grab;
}




@media (max-width: 768px) {
  :root {
    --font-size-small: 9px;
    --font-size-large: 18px;
    --font-size-xlarge: 18px;

    --spacing-xsmall: 8px;
    --spacing-small: 18px;
    --spacing-medium: 12px;
    --spacing-large: 48px;
    --spacing-xlarge: 96px;
    --spacing-giant: 192px;
    --border-medium: 2px;
  }

  .nav-list {
    gap: 24px;
  }
}


.button.blink {
  animation: button-blink 100ms steps(1, end);
}

@keyframes button-blink {
  0% {
    background-color: white;
    color: black;
  }
  99% {
    background-color: white;
    color: black;
  }
  100% {
    background-color: black;
    color: white;
  }
}