:root {
  --paleTan: #E7E7E7;
  --paleBlue: #ABBFCE;
  --darkBrownBlack: #2E2E2E;
  --darkBrown: #5D5C61;
  --darkBlue: #557A95;
  --mediumBlue: #7395AE;
  --mediumBrown: #938E94;
  --tan: #B1A296;
}
body {
  font-family: Arial, Helvetica, Tahoma, Verdana;
  font-size: 12pt;
  color: var(--darkBrown);
  background-color: var(--paleTan);
  margin: 0;
}
main {
  background-color: white;
  border: 1px solid var(--darkBrown);
  max-width: 800px;
  border-radius: 10px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  padding: 20px;
}
header {
  xbackground: linear-gradient(90deg, #004678, #F8F6F2);
  xbackground: radial-gradient(circle, #F8F6F2, #004678);
  background-color: var(--darkBlue);
  color: white;
  padding-top: 30px;
  padding-bottom: 24px;
  padding-left: 30px;
  padding-right: 30px;
  overflow: auto;
}
footer {
  background-color: var(--darkBlue);
  color: white;
  text-align: center;
  padding: 20px;
}
footer a {
  text-decoration: none;
  color: white;
}
footer a:hover {
  color: var(--paleBlue);
}
nav {
  background-color: var(--mediumBlue);
  padding: 0px;
  color: white;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav li {
  font-size: 12pt;
  color: white;
  display: inline-block;
  padding: 12px;
  font-size: 12pt;
}
nav li:hover {
  background-color: var(--paleBlue);
  color: white;
}
nav li.active {
  background-color: var(--paleTan);
  color: var(--darkBrownBlack);
}
nav li a {
  text-decoration: none;
  color: white;
}
img.demopix {
  width: 72.5%;
}
h1 {
  font-size: 24pt;
  text-align: center;
  color: var(--darkBrown);
}
h2 {
  font-size: 20pt;
  text-align: center;
  color: var(--darkBrown);
}
h3 {
  font-size: 20pt;
  color: var(--darkBlue);
}
h4 {
  font-size: 12pt;
  color: var(--darkBlue);
}
p.center {
  text-align: center;
}
p.right {
  text-align: right;
}