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

canvas {
  display: block;
}

@font-face {
  font-family: 'Ring';
  src: url('fonts/bianzhidai_noBG-Ring.otf') format('woff2');
  font-weight: normal;
  font-style: normal;
  /* can also add font-display: swap; for better performance */
}


.slider {
  accent-color: #FFEC78;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: #B5466C; /* track color */
  outline: none;
  cursor: pointer;
}

/* Chrome, Safari, Edge */
.slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: #B5466C; /* track color */
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #F8CAD9; /* thumb color */
  border-radius: 50%;
  margin-top: -3px; /* centers the thumb on track */
  cursor: pointer;
}

.input[type=range]::-webkit-slider-runnable-track{
  border-radius: 50px;
  border: 5px solid #F8CAD9;
}

#year-display {
  position: absolute;
  text-align: center;
  padding: 5px 10px;
  /* background-color: #333; Dark background */
  color: #f7e1e9;
  border-radius: 5px;
  pointer-events: none; /* Allows clicks to pass through to the slider */
  transform: translateX(-50%); /* Centers it above the thumb */
  z-index: 100; /* Ensures it's on top */
  white-space: nowrap; /* Prevent text wrapping */
  /* Initially hide it or position it off-screen until p5.js places it */
  display: none; /* Hide until positioned by p5.js */
}

.playPauseButton {
  background-color: #390a1b;
  color: #F8CAD9;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
}

.speedButton {  /* Plus and minus button */
  background: none; /* Removes the background color */
  border: none;      /* Removes the border */
  padding: 0;        /* Removes any padding */
  color: #FFFFFF;    /* Sets the icon color to white (adjust as needed) */
  font-size: 30px;   /* Adjusts the size of the icon (adjust as needed) */
  cursor: pointer;   /* Changes the cursor to a pointer on hover, indicating it's clickable */
  outline: none;     /* Removes the outline that appears on focus/click */

  /* You might also want to add these for consistency, though Font Awesome often handles alignment */
  display: flex;
  justify-content: center;
  align-items: center;
}