body {
  background-color: #000; /* Black background */
  color: #ffff00;;
  font-family: 'Courier New', Courier, monospace;
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center;
  justify-content: start; /* Align items from the start of the page */
  margin: 0;
  position: relative; /* Allows absolute positioning within */
}

.dark-background {
  background-color: #000000; /* Dark shade */
  color: #ffff00;; /* Light text color for contrast */
}


#sketch-container{
  /* padding-top: 10vh; */
  display: flex;
  flex-direction: column; /* Stack items vertically */
  
  justify-content: start; /* Align items from the start of the page */
  margin: 0;
  position: relative; /* Allows absolute positioning within */
}

#sliders{
  display: none;
}

.text-xl{
  font-size: 3vh;
}

.row{
  padding-top: 3vh;
}

#toggler {
  transition: background-color 0.3s ease; /* Smooth transition for background color */
  font-size: 6vh;
}

#soundToggler {
  transition: background-color 0.3s ease; /* Smooth transition for background color */
  font-size: 6vh;
}

.time {
  display: flex;
  flex-direction: row; /* Align items horizontally */
  align-items: center; /* Center items vertically within the container */
  justify-content: center; /* Center the items horizontally */
  width: 100%; /* Adjust this value as needed */
  max-width: 400px; /* Prevent the inputs from stretching too far on larger screens */
}


label {
  font-size: 2.5vh;
}

input[type="range"]:focus, input[type="number"]:focus {
  outline: none; 
}

input[type="range"]::-webkit-slider-runnable-track, input[type="number"] {
  cursor: pointer;
  background: #202020;
}

input[type="range"]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #ffff00;
  border: 4px solid #ffff00;
  background: #ffff00;
  cursor: crosshair;
  -webkit-appearance: none;
}

input[type="number"] {
  background-color: #353535;
  text-align: center;
  color: #ffff00;;
}

input[type="number"]:focus {
  outline: 2px solid #ffff00; /* Green outline */
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bottom-right {
  position: fixed;
  bottom: 0;
  right: 0;
  text-align: right;
}