styles.css

.options {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.colour-box, .size-box {
  border: 1px solid black;
  border-radius: 3px;
  height: 50px;
  width: 50px;
  margin: 0px 5px;
}

.size-box {
  font-size: 20px;
  text-align: center;
}

#black {
  background: black;
}

#blue {
  background: blue;
}

#red {
  background: red;
}

#yellow {
  background: orange;
}

#green {
  background: green;
  margin-right: 160px;
}

#size-2 {
  height: 3px;
  width: 3px;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
  margin-top: 23px;
}

#size-5 {
  height: 5px;
  width: 5px;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
  margin-top: 20px;
}

#size-10 {
  height: 10px;
  width: 10px;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
  margin-top: 20px;
}

#size-20 {
  height: 20px;
  width: 20px;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
  margin-top: 14px;
}

.canvas-container {
  text-align: center;
  height: 600px;
}

#canvas {
  border: 1px solid black;
  border-radius: 3px;
  box-shadow: 12px 12px 2px 1px lightgrey;
}

#reset {
  display: inline-block;
  border: 1px solid black;
  border-radius: 3px;
  height: 60px;
  width: 60px;
  margin: 0px 15px;
  position: relative;
}

#reset:after {
    content: '';
    height: 60px;
    border-left: 2px solid black;
    position: absolute;
    transform: rotate(45deg);
    left: 28px;
}

#reset:before {
    content: '';
    height: 60px;
    border-left: 2px solid black;
    position: absolute;
    transform: rotate(-45deg);
    left: 28px;
}