body {
  background: rgb(13, 186, 230);
  color: #333;
  margin-top: 50px;
  font-family: Helvetica, sans-serif;
}

p {
  margin-bottom: 4em; /* adds 1 unit of spacing after each paragraph */
}

hr {
  margin-top: 6em;
  margin-bottom: 6em;
  clear:both;
  display:block;
  width: 70%;               
  background-color:#FF0000;
  height: 3px;
}

.veryLargeButton {
  border-radius: 25px;
  border-style: solid;
  border-color:black;
  margin: auto;
  display: block;
  border: 5px solid black;
  background-color:white;
  color: black;
  font-size: 96px;
  font-family: "Helvetica";
  cursor: pointer;
  text-align: center;
  z-index: 25;
  text-decoration: none;
}

.veryLargeButton:active {
  background-color: white;
  transform: translateY(4px);
}
  
.largeButton {
  border-radius: 25px;
  border-style: solid;
  border-color:black;
  margin: auto;
  display: block;
  border: 5px solid black;
  background-color:white;
  color: black;
  font-size: 64px;
  font-family: "Helvetica";
  cursor: pointer;
  text-align: center;
  z-index: 25;
  text-decoration: none;
}

.largeButton:active {
  background-color: white;
  transform: translateY(4px);
}

.mainPageButton {
  border-radius: 25px;
  border-style: solid;
  border-color:black;
  width:75%;
  margin: auto;
  display: block;
  border: 5px solid black;
  background-color:white;
  color: black;
  font-size: 64px;
  font-family: "Helvetica";
  cursor: pointer;
  text-align: center;
  z-index: 25;
  text-decoration: none;
}

.mainPageButton:active {
  background-color: white;
  transform: translateY(4px);
}
.mainHeaderText {
  display: block;
  color: red;
  font-size: 128px;
  text-align: center;
  font-family: "Helvetica";
  margin-bottom: 10px;
  z-index: 10;
} 

.subHeaderText {
  display: block;
  color: black;
  font-size: 96px;
  text-align: center;
  font-family: "Helvetica";
  margin-bottom: 50px;
  z-index: 10;
} 

.errorText {
  display: block;
  color: red;
  font-size: 64px;
  text-align: center;
  font-family: "Helvetica";
  margin-bottom: 50px;
  z-index: 10;
} 

.veryLargeText {
  border-radius: 25px;
  display: block;
  background-color: rgb(13, 186, 230);
  color: white;
  font-size: 128px;
  font-family: "Helvetica";
  text-align: center;
  z-index: 10;
  margin: auto;
}

.largeText {
  border-radius: 25px;
  display: block;
  color: white;
  font-size: 64px;
  font-family: "Helvetica";
  text-align: center;
  z-index: 10;
  margin: auto;
}

.inputText {
  border-radius: 25px;
  display: block;
  color: black;
  font-size: 64px;
  font-family: "Helvetica";
  text-align: center;
  z-index: 10;
  margin: auto;
}

.mediumRedText {
  border-radius: 25px;
  display: block;
  color: rgb(255,0,0);
  font-size: 64px;
  font-family: "Helvetica";
  text-align: center;
  z-index: 10;
  margin: auto;
}

.mediumWhiteText {
  border-radius: 5px;
  display: block;
  color: white;
  font-size: 64px;
  font-family: "Helvetica";
  text-align: center;
  z-index: 10;
  margin: auto;
}

div.container {
  text-align: center;
}

.ulText {
  border-radius: 5px;
  display: inline-block;
  text-align: left;
  color: white;
  font-size: 64px;
  font-family: "Helvetica";
  z-index: 10;
}

.smallWhiteText {
  border-radius: 25px;
  display: block;
  color: white;
  font-size: 32px;
  font-family: "Helvetica";
  text-align: center;
  z-index: 10;
  margin-bottom: 50px;
  margin: auto;
}

.phraseText {
  border-radius: 25px;
  display: block;
  color: black;
  font-size: 84px;
  font-family: "Helvetica";
  text-align: center;
  z-index: 10;
  margin: auto;
}