body {
  color: #2b2b2b;
  font-size: 16px;
  display: flex;
  justify-content: center;
  font-family: var(--theme-font-regular);
}

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5em;
}

img#logo {
  width: 60%;
}

h1#title {
  text-transform: uppercase;
  font-family: var(--theme-font-bold);
  font-weight: 100;
}

p#body {
  margin-bottom: 2em;
  line-height: 1.4em;
}

p#footnote {
  font-size: 0.7rem;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .container {
    width: 30em;
  }
}

@font-face {
  font-family: "OpenSansRegular";
  src: url("/fonts/open-sans/OpenSans-Regular.ttf");
}

@font-face {
  font-family: "OpenSansBold";
  src: url("/fonts/open-sans/OpenSans-Bold.ttf");
}

@font-face {
  font-family: "RobotoRegular";
  src: url("/fonts/roboto/Roboto-Regular.ttf");
}

@font-face {
  font-family: "RobotoBold";
  src: url("/fonts/roboto/Roboto-Bold.ttf");
}