/* small: < 640px */
@media only screen and ( max-width: 639px ) {
  body {
    font-size: 14pt !important;
  }
  header,
  footer,
  main ul li div {
    margin-left: 2rem !important;
    margin-right: 2rem !important;
  }
  header a svg {
    width: 14rem !important;
  }
  h1 {
    font-size: 2rem !important;
  }
  footer {
    font-size: 10pt !important;
  }
}

/* medium: >= 640px, < 1024px */
@media only screen and ( min-width: 640px ) and ( max-width: 1023px ) {
  body {
    font-size: 16pt !important;
  }
  header,
  footer,
  main ul li div {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
  }
  header a svg {
    width: 18rem !important;
  }
  h1 {
    font-size: 3rem !important;
  }
  footer {
    font-size: 11pt !important;
  }
}

/* large: >= 1024px */
@media only screen and ( min-width: 1024px ) {

}

@media only screen and ( max-height: 520px ) {
  header a svg { width: 12rem !important; }
  main h1 { font-size: 18pt !important; }
  main ul:last-of-type { left: 50%; width: 50%; font-size: 12pt; }
  main ul li div { bottom: 3rem !important; }
}