body {
  font-family: 'Open Sans', sans-serif;
  color: #222;
}

/****************************************
* Typography
****************************************/

h1 {
  font: normal 72px/1em 'Noto Serif';
  text-transform: uppercase;
  color: #222;
}

h1 span.red {
  color: #c30b0b;
}

h2 {
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 3rem;
}

h3 {
  font-size: 2.3rem;
  font-family: 'Noto Serif';
}

p + h3 {
  margin-top: 2rem;
}

p,
li {
  color: #222;
  font: normal normal 16px/1.5em 'Open Sans';
}

a {
  color: #c30b0b;
}

/* List Styles */

ul.bulleted {
  margin-left: 2rem;
  margin-bottom: 1rem;
}

.bulleted li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.25rem;
}

.bulleted li:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 8px;
  width: 0;
  height: 0;
  padding: 2px;
  background-color: #222;
  border-radius: 100%;
}

p + img {
  margin-top: 1.3rem;
}

hr {
  border-bottom: 4px dotted #ffffff;
  border-top: none;
}

/****************************************
* Header
****************************************/

header.main {
  padding: 1rem 0;
  background-color: #ffffff;
}

/****************************************
* Navigation
****************************************/

nav ul {
  list-style: none;
  padding-left: 0px;
  display: flex;
  justify-content: center;
}

nav a {
  color: #222;
  padding: .75rem;
  border-radius: 6px;
  font-size: 20px;
}

nav a:hover {
  background-color: #ededed;
}

nav li {
  margin: 0 2rem;
}
/****************************************
* Billboard
****************************************/

.billboard {
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 500px;
  background-color: #222;
}

.billboard h1 {
  color: #ffffff;
}

.billboard p {
  font-size: 22px;
  color: #ffffff;
}

/****************************************
* About
****************************************/

#about {
  background-color: #ffffff;
}

#about p {
  text-align: center;
  padding-bottom: 1rem;
}

/****************************************
* Services
****************************************/

#services {
  background-color: #fdfdfd;
}

#services > .container {
  margin-bottom: 2rem;
}

#services h3,
#services p {
  color: #333333;
}

/****************************************
* Footer
****************************************/

footer.main {
background-color: #333333;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  color: #ffffff;
}

footer h2 {
  text-align: left;
}

footer p {
  color: #ffffff;
}

footer.main .button {
  display: block;
  margin-top: 24px;
}

footer .disclaimer {
  font-style: italic;
  font-size: 14px;
}

footer .social-icons a {
  font-size: 3rem;
  margin-right: 2rem;
}

/****************************************
* Attribution
****************************************/

.attribution {
  background-color: #222;
  padding: 1rem 0;
}

.attribution p,
.attribution a {
  margin-bottom: 0;
  color: #ffffff;
}

.attribution a:hover {
  color: #ffffff;
}

/****************************************
* Buttons
****************************************/

.button,
button,
input[type='submit'] {
  background-color: #c30b0b;
  border: 2px solid #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: text-shadow 0.2s, background-color 0.2s;
}

.button:hover,
button:hover,
input[type='submit']:hover {
  background-color: #ffffff;
  color: #c30b0b;
  border: 2px solid #c30b0b;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}