html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

 .square {
  height: 350px;
  width: 300px;
  position: absolute;
  top: 100px;
  margin: 15%
  background-color: #555;
}
 

.vertical {
  appearance: slider-vertical;
}

.colorbutton{
    position: absolute;
    top: 100px;
    height: 15%;
    display: grid;
    width: 15%;
    margin: 10%;
    grid-template-columns: repeat(3, 1fc);
  }

.colorbutton1 {border-radius: 100%;
background-color: rgb(250,67,19);}
.colorbutton2 {border-radius: 100%;
background-color: rgb(57,164,230);}
.colorbutton3 {border-radius: 100%;
background-color: rgb(255,219,21);}