html {
  box-sizing: border-box; /* */
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  margin: 0;
  padding: 0;
  display: flex; /* All the children will be flexibly sized */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 100% of the viewport height */
}
button:focus {
  outline: none; /* Remove the outline when you click the reset button */
}
.canvas-box { /* the black "frame" of the canvas*/
  padding: 1px;
  border: 20px solid black;
  width: 50%;
  height: 50%;
  position: relative;
}
.canvas-box::before {
  content: "";
  position: absolute;
  left: calc(100% + 20px + 1px);
  top: -10px;
  background-color: black;
  height: calc(100% + 20px * 2);
  width: 20px;
  transform: skew(0, 45deg);
}
.canvas-box::after {
  content: "";
  position: absolute;
  top: calc(100% + 20px + 1px);
  left: -10px;
  background-color: black;
  width: calc(100% + 20px * 2);
  height: 20px;
  transform: skew(45deg, 0);
}
.canvas-container {
  width: 100%;
  height: 100%;
}

#canvas { /* Remove the cursor */
 cursor: none;
}

#controls{
  margin-top: 32px;
  width: 50%;
  padding-left: 20px;
  text-align: right;
}

.rakeSelect{ /* Remove the radiobuttons */
  display: none;
}

.rakeSelect:checked + .rakeLabel { /* Change the button background color on click */
  color: black;
  background-color: hsl(44, 100%, 65%);
}

.rakeLabel,
#reset,
#header h1 {
  background-color: black;
  color: white;
  padding: 0.5em;
  font-family: monospace;
  font-size: 1em;
}

.rakeLabel {
  display: inline-block;
}

#reset{
  border: none;
  float: left;
}

#header h1 {
  font-size: 3em;
  color: hsl(44, 100%, 65%);
  letter-spacing: 0.2em;
}