* {
  margin: 0;
  font-family: "Patrick Hand", cursive;
  color: white;
}

.top,
.middle,
.bottom {
  background-color: #332f2e;
}

.top {
  height: 112px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  flex-basis: 1;
}

.heading,
.gridOptions {
  height: 100%;
  padding-left: 72px;
}

.heading {
  font-size: 1.25em;
}

.gridOptions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

#gridSize,
.toggleSwitch,
.reset {
  font-size: 1.25em;
  height: 32px;
  width: 64px;
}

#gridSize {
  border-radius: 16px;
  background-color: #524b49;
  border: none;
  -webkit-appearance: textfield;
  appearance: textfield;
  text-align: center;
}

.toggleSwitch {
  padding: 2px;
  background-color: #524b49;
  filter: brightness(150%);
  border-radius: 16px;
}

.switchPosition {
  background-color: #f9d0b48a;
  filter: brightness(65%);
  height: 100%;
  width: 50%;
  border-radius: 16px;
}

.toggledOn {
  display: flex;
  justify-content: flex-end;
}

.toggledOnColour {
  background-color: #b56631;
}

.reset {
  background-color: #b5304a;
  border: initial;
  border-radius: 16px;
}

.gridOptions p {
  color: #cd8d33;
  font-size: 1.5em;
}

.middle {
  height: 600px;
  display: flex;
}

.sideBar {
  width: 56px;
  padding: 8px;
}

.button {
  background-color: #524b49;
  border-radius: 16px;
  height: 64px;
  margin: 8px;
}

.pencil,
.eraser {
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pencil img,
.eraser img {
  height: 100%;
  width: auto;
}

.pencil:hover,
.eraser:hover,
.reset:hover {
  filter: brightness(150%);
}

.pencilOn {
  background-color: #70baa0;
}

.eraserOn {
  background-color: #524ab4;
}

.container {
  width: 1000px;
  background-color: #8f8f8f;
  display: flex;
  justify-content: center;
}

.canvas {
  width: 600px;
  background-color: white;
  display: flex;
  flex-direction: column;
}

.rowBox {
  flex-basis: 1;
  height: 100%;
  display: flex;
}

.columnBox {
  flex-basis: 1;
  width: 100%;
}

.colour {
  background-color: black;
}

.bottom {
  height: 32px;
}