body {
  background-color: #ffffcc; /* The body has a light yellow colour */
  font-size: 1.0em;
}

header p {
  text-align: center;
  color: blue;
  font-size: 2em;
  font-weight: bold;
}

h1 {
  font-size: 1.8em;
  line-height: 1.3em;
  color: yellow;
  background: black;
}

section {
  padding-bottom: 0px;
}

/* The intro is moved closer to the header */

.intro {
  margin-top: -20px;
}

.equationChecking { /* This section is a light green background colour */
  background: #efe;
}

.commutativity { /* This section is a light tan background colour */
  background: #eec;
}

.ePowerX { /* This section is a light blue background colour */
  background: #dff;
}

.solvingQuadratics { /* This section is a light mauve background colour */
  background: #fee;
}

section.input {
  text-align: right;
}
/* Make every section have some background above its heading */

section h2 {
  padding-top: 10px;
}

/* Same font and margins for the name input and for the name output fields */
input {
  font-size: 0.9em;
  margin-left: 10px;
}

/* nameInstruction is used for the instruction following the name input text box */

.instruction {
  margin-left:40px;
}

/* For the string input text field */

input.stringInput, input.stringResult {
  margin-left:40px;
  text-align: left;
  font-family: monospace;
}

/* displayGivenName and displayFamiilyName are for the split name style
   that follows the output result heading */

.resultMeaning {     /* Text explaining what the result means */
  margin-left: 20px;
  text-align: center;
  color: blue;
  font-size: 1.1em;
  font-weight: bold;
}

/* To make the buttons stand out from their background use the body color */

button {
  background: #ffc;
  line-height: 1.3;
  font-size: inherit;
  margin-left: 20px;
}

/* The indices under the input string */

.numberLine {
  margin-left: 44px;
  font-family: monospace;
  font-size: 1.2em;
}