:root {
  --hauptfarbe: #000;
  --zweitfarbe: #fff;
  --fontsize: 22px;
}

/* roboto-500 - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("/assets/fonts/roboto-v27-latin-500.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("/assets/fonts/roboto-v27-latin-500.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("/assets/fonts/roboto-v27-latin-500.woff2") format("woff2"),
    /* Super Modern Browsers */ url("assets/fonts/roboto-v27-latin-500.woff")
      format("woff"),
    /* Modern Browsers */ url("/assets/fonts/roboto-v27-latin-500.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("/assets/fonts/roboto-v27-latin-500.svg#Roboto") format("svg"); /* Legacy iOS */
}

body {
  background: var(--hauptfarbe);
  font-family: "Roboto";
}

p {
  color: var(--zweitfarbe);
  font-size: var(--fontsize);
  line-height: 140%;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 2rem;
}

h1 {
  color: var(--zweitfarbe);
  font-size: 16px;
  line-height: 140%;
  display: inline;
  letter-spacing: 0.5px;
}

main {
  max-width: 45vh;
  min-height: 66vh;
  padding: 2vw;
  margin: 0 auto;
}

footer {
  max-width: 45rem;
  margin-top: 10rem;
}

a {
  color: var(--zweitfarbe);
  display: inline;
  text-decoration: underline;
}

footer p {
  display: inline;
  font-size: 16px;
  line-height: 180%;
}