* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Oswald, sans-serif;
}

body {
  height: 100vh;
  padding: 50px;
  display: flex;
  justify-content: center;
  gap: 100px;
}

h1 {
  font-family: 'Press Start 2P', sans-serif;
  font-size: 1.5em;
}

button {
  align-self: center;
  height: 40px;
  width: 75%;
  cursor: pointer;
  font-size: 20px;
  border: none;
  border-radius: 20px;
  box-shadow: 5px 10px #80808080;
}

button:active {
  box-shadow: 0 4px #80808080;
  transform: translateY(3px);
}

.eraser {
  background-color: #ff6f00;
}

.eraser:hover,
.eraser:active {
  background-color: #954000ba;
}

.erase-all {
  background-color: #de4d34;
}

.erase-all:hover,
.erase-all:active {
  background-color: #a63b29;
}

.color {
  background-color: #011627;
}

.rainbow {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue,
  indigo, violet);
  color: #ffffff;
}

.selector {
  background-color: #ffffff;
  border: 1px solid #000000;
}

.selector:hover,
.selector:active {
  background-color: #9c9c9c;
}

.container {
  display: flex;
  flex-wrap: wrap;
  height: 600px;
  width: 600px;
  box-shadow: 5px 0 10px #808080,
  -5px 0 10px #808080,
  0 5px 10px #808080,
  0 -5px 10px #808080;
}

.gridCell {
  flex: 1 0 auto;
}

.options-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 50px;
  text-align: center;
}

.slider-container {
  margin: 20px 0;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

/* slider handle */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%; 
  background: #ffcc00;
  cursor: pointer;
}

/* slider handle firefox */
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffcc00;
  cursor: pointer;
}

#color-selector {
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
  height: 50px;
  width: 75px;
}

#color-selector::-webkit-color-swatch {
  border-radius: 15px;
}

#color-selector::-moz-color-swatch {
  border-radius: 15px;
}

.color-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

button.active {
  box-shadow: 5px 10px #ffcc00;
}

button.active:active {
  box-shadow: 0 4px #a18100;
  transform: translateY(3px);
}