style.css

html {
  background-color: #fee;
  font-family: Arial, sans-serif;
  color: #033;
}

/* Set the page to fill the window size and divide into flex boxes */
body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

header h1 {
  color: #055;
  margin: 0.5vh;
  background-color: #fdd;
  padding: 0.5vh 0.5vw;
  border-radius: 5%;
}

/* Main section contains the sketcher and tools */
main {
  background-color: #fcc;
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 5vw;
  margin: 0 1vw;
  border-radius: 1%;
}

/* Container for the controls */
#control-div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

/* Empty divs on sides of main section to aid spacing */
.main-flex-left {
  flex: 1;
}

.main-flex-right {
  flex: 5;
}

/* Two divs for draw settings */
#controls,
#color-div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: stretch;
  background-color: #fbb;
  border-radius: 2%;
  font-weight: bold;
}

/* Empty divs on top and bottom to aid spacing the controls */
.control-flex {
  flex: 1;
  min-height: 1px;
}

#color-div {
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1vh;
  border-radius: 3%;
}

#color-div input {
  width: 90%;
  height: 90%;
  border: 0;
  padding: 0;
  margin-top: 1vh;
}

/* Maintain consistent button size and style in button click events */
.button,
.button:hover,
.button-click {
  padding: 1vh;
  border-radius: 5%;
}

.button {
  background-color: #faa;
}

.button:hover {
  background-color: #f99;
}

/* Toggled on and off (replacing .button) during click events */
.button-click {
  background-color: #f88;
}

/* Toggled on and off when lighten or darken mode is turned on */
.option-select {
  background-color: #f77;
  padding: 2px;
  border-radius: 5%;
}

#grid-slider {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Anchor for the grid object created by createGrid */
#sketch {
  aspect-ratio: 1;
  background-color: #fbb;
  height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 1vh;
  border-radius: 1%;
  margin: 1vh;
}

/* Aligns row objects created by createRow */
.row {
  flex: 1 1 0;
  min-height: 1px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Aligns square objects created by createDiv */
.square {
  flex: 1 1 0;
  min-height: 1px;
  height: 100%;
  background-color: white;
  border: 1px solid #aaa;
}

footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

footer h5 {
  margin: 0;
}

ul {
  list-style-type: none;
  padding: 1vw;
}