/* used to hide elements */
.hidden {
  display: none;
}

/* make the whole background light grey */
html {
  background-color: lightgrey;
}

/* vertical flexbox layout for body */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: sans-serif;
}

/* make the canvas background black */
canvas {
  background-color:black;
}

/* Google font for important text */
h1, legend, button, b {
  font-family: 'Walter Turncoat';
}

/* blue rounded buttons */
button {
  color: white;
  background-color: #0067fa;
  border-radius: 12px;
}

/* horizontal flexbox layout for form, arranged fieldsets in a row */
form {
  display: flex;
  flex-flow: row wrap;
  align-items: top;
  justify-content: center;
}

/* vertical flexbox, arranges inputs/checkboxes into columns */
fieldset {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-end;
  text-align: left;
  background-image: linear-gradient(lightgray, lightgray, #b1cffa)
}

/* blue text color for labels */
label {
  color: #02429e;
}

/* put the "help" button at the top right corner */
#helpButton {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 20px;
}

/* border and light blue background for the instructions/help */
#helpSection {
  border: 1px solid #0067fa;
  padding: 5px;
  margin-bottom: 5px;
  background-color: #b1cffa;
}

/* border and brighter blue background for the help subsections */
.boxDiv {
  border: 1px solid #0067fa;
  background-color: #74acfc;
}