body {
  font-family: 'Roboto';
  background-color: var(--backdrop);
  color: var(--text-color);

  transition: background-color var(--color-transition-duration) ease-in-out,
    border-color var(--color-transition-duration) ease-in-out,
    color var(--color-transition-duration) ease-in-out,
    font-family var(--color-transition-duration) ease-in-out;
}

/* Nunito regular */
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/Nunito-Regular.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Nunito-Regular.woff') format('woff'),
    url('/fonts/Nunito-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Overpass regular */
@font-face {
  font-family: 'Overpass';
  src: url('/fonts/Overpass-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Roboto regular */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Roboto-Regular.woff') format('woff'),
    url('/fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}