styles.css

@import "reset.css";

body{
  display: flex;
  flex-direction: column;
  background-color: #F6F9FD;
  align-items: center;
  padding-top: 50px;
}
.canvas{
  background-color: white;
  width : 650px;
  height : 650px;
  border-radius: 15px;
  box-shadow: 1px 2px 4px 0px rgb(230, 230, 230), 0px -1px 4px 0px rgb(240,240,240);
}
.controls{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top : 20px;
}
.controls .controlsRange{
  margin-bottom: 20px;
}
.controls .controlsBtns{
  margin-bottom: 30px;
}
.controlsBtns button{
  background-color: white;
  color : rgb(145, 145, 145);
  border : 2px solid rgb(206, 206, 206);
  border-radius: 8px;
  margin : 0px 5px;
  width : 100px;
  height :40px;
  font-size : 18px;
  box-shadow: 1px 2px 4px 0px rgb(230, 230, 230), 0px -1px 4px 0px rgb(240,240,240);
  text-transform: uppercase;
  font-weight: 600;
}

.controlsBtns button:active{
  transform: scale(0.95);
}
.controls .controlsColors{
  display :flex;
}
.controlsColors .controlsColors{
  width : 50px;
  height : 50px;
  border-radius: 50%;
  margin:0px 2px;
  cursor: pointer;
  box-shadow: 1px 2px 4px 0px rgb(230, 230, 230), 0px -1px 4px 0px rgb(240,240,240);
}
.controlsColors .controlsColors:active{
  transform: scale(0.95);
}