html, body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
  width: 100% !important;
  height: auto !important; 
}

body {
  font-family: Arial, sans-serif;
  background-image: url("../images/dithered-image.png");
  background-size: 60%;
}

nav {
  padding: 10px;
  position: fixed;
  left: 10px;
  top: 10px;
  width: auto;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

nav a {
  display: block;
    background: linear-gradient(var(--gradientTop), var(--gradientBottom));
  border-radius: 5px;
  padding: 8px 12px;
  text-decoration: none;
  backdrop-filter: blur(5px);
}

nav a:link, nav a:visited { 
  color: var(--text);
}

nav a:hover, nav a:focus {
  background: linear-gradient(to right,var(--bg), var(--gradientBottom), var(--gradientTop));
  font-style: italic;

}

main {
  margin-left: 160px;
  padding: 20px;
  margin-right: 160px;
}

header {
  background-color: #d0d0d0; 
  background-size: cover;
  background-position: 50% 40%;
  width: 100%;
  height: 75px;
  border-radius: 5px;
  position: relative;
  border: 2px ridge var(--border);
  margin-bottom: 20px;
}

header span {
  font-size: 2.5rem;
  position: absolute;
  bottom: 0;
  right: 10px;
  margin: 10px;
  font-weight: bold;
  text-shadow: 1px 1px var(--text),
    -1px 1px var(--text),
    1px -1px var(--accent),
    -1px -1px var(--accent);
  color: var(--gradientTop);
}

.container {
  max-width: 55rem;
  margin: 0 auto;
  outline-offset: 4px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  gap: 0; 
  background-color: #d0d0d0; 
  overflow: hidden; 
  border: 2px ridge var(--border);
}

/* Slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

/* Slider track */
input[type="range"]::-webkit-slider-runnable-track {
  background: #ddd;
  height: 8px;
  border-radius: 3px;
}

input[type="range"]::-moz-range-track {
  background: #ddd;
  height: 8px;
  border-radius: 3px;
}

/* Slider fill (progress) */
input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, grey 0%, grey var(--slider-progress, 0%), #ddd var(--slider-progress, 0%), #ddd 100%);
}

input[type="range"]::-moz-range-progress {
  background: grey;
  height: 8px;
  border-radius: 3px;
}

/* Slider thumb (icon) - make it square */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #333;
  cursor: pointer;
  border-radius: 2px; /* Slightly rounded square */
  margin-top: -4px;
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #333;
  cursor: pointer;
  border-radius: 2px;
  border: none;
}

/* Hover effects */
input[type="range"]::-webkit-slider-thumb:hover {
  background: #000;
}

input[type="range"]::-moz-range-thumb:hover {
  background: #000;
}