html, body {
    background-color: rgb(20,30,40);
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
h1 {
    color: #D0B3FF;
    font-size: 5rem;
    margin: 25px;
    text-shadow: 2px 10px 6px rgba(0, 0, 0, 0.7)

}
h2 {
  color: #D0B3FF;
  font-size: 1.5rem;
}
.buttons{
    display: flex;
    width: auto;
    margin: 20px;
    justify-content: space-between;
    gap: 30px;
}
button {
    border-radius: 12px;
    font-size: 24px;
    font-style: bold;
    width: 140px;
    padding: 5px 15px;
    background-color: #D0B3FF;
    color: #111820;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}
button:hover{
    transform: scale(1.03);
}
.btns1{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

.container {
    width: auto;
}
.grid {
    margin: 25px;
    display: flex;  
    flex-wrap: wrap;
    flex-direction: row;
    width: 500px;
    height: 500px;
}
.slider_container{
    display: flex;
    padding: 2rem;
    align-items: center;

}
.slider_value{
    color: #D0B3FF;
    font-size: 1.5rem;
    padding: 8px
}
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 8px;
  background: #2b2f38;
  border-radius: 4px;
  outline: none;
  margin: 20px auto;
  display: block;
  transition: background 0.3s;
  cursor: pointer;
  margin-left: 20px;
}

/* Chrome, Safari, Edge (WebKit) */
.slider::-webkit-slider-runnable-track {
  height: 8px;
  background: #555;
  border-radius: 4px;
  box-shadow: 0 0 4px #a78bfa;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  background: #a78bfa;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 10px #a78bfa;
  margin-top: -6px; /* aligns thumb in center of track */
  transition: transform 0.2s ease;
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Firefox */
.slider::-moz-range-track {
  height: 8px;
  background: #555;
  border-radius: 4px;
  box-shadow: 0 0 4px #a78bfa;
}

.slider::-moz-range-thumb {
  height: 20px;
  width: 20px;
  background: #a78bfa;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 10px #a78bfa;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.slider::-moz-range-thumb:hover {
  transform: scale(1.2);
}

@media (max-width: 600px) {
  h1 {
    font-size: 2.5rem;
  }
}