@font-face {
  font-family: "liham";
  src: url('fonts/Liham.otf') format(opentype);
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "liham", serif;
}
canvas {
  display: block;
}

#ui-panel {
  background-image: linear-gradient(to bottom, rgb(87, 56, 0), rgb(3, 2, 0));
  /* background-color:  */
  font-size: 10px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  color: white;
}

.sliders {
  -webkit-appearance: none;/* Removes some defaults */
  color: red;
  background-color: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px; /* Adjust height as needed */
  cursor: pointer;
  background: #804d00; /* Color of the *entire* track */
  border-radius: 4px;
}

/* Mozilla Firefox */
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #804d00;
  border-radius: 4px;
}

/* WebKit */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  background: rgb(209, 204, 67); /* Color of the thumb */
  border-radius: 50%;
  cursor: pointer;
  margin-top: -6px; /* Adjust to center the thumb vertically on the 8px track */
}

/* Firefox */
input[type=range]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  background: rgb(209, 204, 67);
  border-radius: 50%;
  cursor: pointer;
}

.buttons {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit; /* Inherit font from the body or parent element */
  font-size: inherit;   /* Inherit font size */
  text-align: left;     /* Revert text alignment if necessary */
  cursor: pointer;      /* Add back the pointer cursor */
  /* Ensure proper sizing model */
  box-sizing: border-box; 
  font-size: 22px;
  /* background-color:#804d00; */
}

.toggle-buttons input {
  border-radius: 30px;
}

#start-panel {
  background-color: rgb(80, 55, 0);
  /* color: white; */
  display: none;
}