@font-face {
  font-family: sf-pro-display;
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
  font-display: auto;
  src: url('fonts/sf-pro-display/sf-pro-display-heavy.otf') format('opentype');
}

@font-face {
  font-family: sf-pro-display;
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  font-display: auto;
  src: url('fonts/sf-pro-display/sf-pro-display-regular.otf') format('opentype');
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  font-family: sf-pro-display;
  font-size: 12pt;
}

div.container {
  display: grid;
  place-items: center;
  text-align: center;
  height: 10vh;
}

h1.logo {
  font-size: 1em;
  margin-top: 1em;
  margin-left: 1em;
}

h2.headline {
  font-size: 1.66em;
  font-weight: 800;
  margin-top: 5em;
  margin-bottom: 1em;
}

p.description {
  font-size: 1em;
  font-weight: normal;
  max-width: 400px;
  width: 80vw;
  margin-top: 1em;
  margin-bottom: 1em;
}

@media (width <= 450px) {
  p.description {
    width: 90vw;
  }
}