:root {
--customGap: 24px;
--font_color: #3f3f3f

}

* {
  box-sizing: border-box;
  font-family: futura, helvetica, arial;
  
}

html {
  background-color: rgb(226, 226, 226);
}

.header {
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 40px;
  font-weight: 600;
  color: var(--font_color);
  border-radius: 6px;
}
.grid {
  display: grid;
  width: 600px;
  height: 600px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px;
  background-color:#a3a3a3;
  margin-top: 24px;


}

.grid_cell {
    background-color: rgb(255, 255, 255);
    user-select: none;
    cursor: url(img/pngwing.com.png);
}

button{ 
  height: 48px;
  width: 100%;
  margin-bottom: var(--customGap);
  background-color: transparent;
  border-radius: 6px;
  color: black;
  border: solid;
  border-color: grey;
  border-width: 1px;
  
}

button.active {
  background-color: #8215ff;
  color: white;
  border: none;
  
}

button:hover {
  cursor: pointer;
  color: white;
  box-shadow: 2px 2px 2px 1px rgba(74, 19, 255, 0.2);

}

button:active {
  box-shadow: -2px -2px 2px 1px rgba(74, 19, 255, 0.2);

}

.settings {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.panel {
  display: flex;
  position: absolute;
  top: 0%;
  left: -250px;
  height: 100%;
  background-color: white;
  padding: 24px;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px;
  width: 210px;

}

section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.input {
  margin-bottom: 0px;
}

#gridSizeDisplay {
  display: flex;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(font_color);
}

#slider {
  margin-top: 16px;
  width: 100%;
  cursor: pointer;
  user-select: none;

}

h4 {
  margin: 16px 0px;
}

#line {
  background-color: grey;
  height: 2px;
  width: 100%;
  margin: 24px 0px;
  border-radius: 1px;
}

input[type='color'] {
  border-radius: 100%;
  width: 80px;
  height: 80px;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  margin-bottom: var(--customGap);
}


#colorPicker::-webkit-color-swatch {
  border-radius: 4px;
}

#colorPicker::-webkit-color-swatch {
  border-radius: 4px;
}

.slideContainer {
  padding: 16px;
  background-color: white;
  border-radius: 6px;
  border: solid;
  border-color: grey;
  margin-top: 8px;
}

#easterEgg {
  position: fixed;
  bottom: 34px; 
  right: 34px; 
  font-size: 14px;
  user-select: none;
}

#easterEgg:hover {

  color: royalblue;
  cursor: pointer;

}