body {
  font-family: courier;
  background-color: steelblue;
  color: black;
}

header {
  background:dodgerblue;
  border: 5px solid cornflowerblue;
  border-radius: 20px;
  padding: 5px;
  text-align: center;
}

header h1 {
  font-size: 50px;
  margin-bottom: 10px;
}

header h2 {
  color: black;
}

.summary,
.preamble,
.explanation,
.participation,
.benefits,
.requirements{
  background-color: white;
  margin: 20px;
  padding: 20px;
  border: 5px solid lightsteelblue;
  border-radius: 10px;
  text-align: center;
}

h3 {
  color: mediumslateblue;
}

a {
  color: mediumslateblue;
}

a:hover{
  color:skyblue;
}

footer {
  background-color: white;
  margin: 20px;
  padding: 20px;
  border: 5px solid lightsteelblue;
  border-radius: 10px;
}


.sidebar {
  width: 30%;
  background-color: white;
  border: 5px solid lightsteelblue;
  border-radius: 10px;
}

.sidebar h3 {
  text-align: center;
}

.main {
  width: 65%;
  text-align: center;
}

.main, .sidebar {
  vertical-align: top;
  display: inline-block;
  margin: 0px;
}

/* had to add this because the boxes are not aligned and I couldn't figure out why after spending around 30 min. */

.sidebar {
  position: relative;
  top: 19px;
}