html {
  /* font-family: 'franklin-gothic-std-extra-condensed', sans-serif; */
  background-color: black;
  color: white;
}

h1 {
  /* font-family: 'shatter-std-regular', sans-serif; */
  text-transform: uppercase;
  font-size: xx-large;
}

h2 {
  text-transform: uppercase;
  font-size: x-large;
}

h3 {
  text-transform: uppercase;
  font-size: large;
}

a {
  color: white;
}

.container {
  margin: 2em;
}

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#navigation ul li {
  display: inline;
  margin-right: 2em;
  text-transform: uppercase;
}

#social-links {
  margin-top: 3em;
}

#social-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#social-links ul li {
  display: inline;
  margin-right: 2em;
  text-transform: uppercase;
}

#about {
  margin-top: 3em;
}

#footer {
  margin-top: 1em;
  padding-bottom: 2em;
  font-size: small;
  color: lightgray;
}

@media (max-width: 672px) {
  #navigation ul li {
    display: block;
    margin-bottom: 0.5em;
  }
}