style.css

@font-face {
  font-family: Avenir;
  src: url(Metropolis-Regular.otf);
}

body {
  font-family: 'Avenir';
}

header {
  padding-bottom: 40px;
}

h1 {
  margin-top: 20px;
  text-align: center;
  font-weight: bold;
}

h2 {
  text-align: center;
  font-size: 20pt;
}

h3 {
  font-size: 14pt;
    /* margin-left: 8%; */
  font-weight: bold;
  margin: 5%;
}

h4 {
  display: inline;
  font-size: 14pt;
  font-weight: bold;
}

ul {
  list-style-type: none;
  margin-top: 4px;
  margin-bottom: -4px;
}

li {
  font-size: 12pt;
  margin-left: 5%;
}

img {
  display: block;
  margin: 50px auto 20px auto;
  width: 70%;
}

/* Once the screen gets above 700 pixels */
@media screen and (min-width: 700px) {
  img {
    width: 40%;
    margin-top: 10%;
  }

  h3 {
    font-size: 14pt;
    font-weight: bold;
    margin: 1%;
    margin-left: 5%;
  }

  h4 {
    display: inline;
    font-size: 14pt;
    font-weight: bold;
  }

  ul {
    list-style-type: none;
    margin-top: 2px;
    margin-bottom: -2px;
  }

  li {
    font-size: 12pt;
    margin-left: 5%;
  }