:root {
  --helvetica: Arial, Helvetica, sans-serif;
  --din-pro: "DINPro", sans-Serif;
  --bg: #white;
  --yellow: #f6ab29;
  --grey: #58585a;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: auto;
  min-height: 100vh;
  background-color: var(--bg);
  font-family: var(--helvetica);
  font-variation-settings: "wght" 300, "wdth" 100;
}
::selection {
  background: #f6ab28;
}

/* DIN PRO */
@font-face {
  font-family: "DINPro";
  src: url("/templates/fonts/DINPro-Bold.eot");
  src: url("/templates/fonts/DINPro-Bold.eot?#iefix") format("embedded-opentype"),
    url("/templates/fonts/DINPro-Bold.woff2") format("woff2"),
    url("/templates/fonts/DINPro-Bold.woff") format("woff"),
    url("/templates/fonts/DINPro-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DINPro";
  src: url("/templates/fonts/DINPro-Black.eot");
  src: url("/templates/fonts/DINPro-Black.eot?#iefix")
      format("embedded-opentype"),
    url("/templates/fonts/DINPro-Black.woff2") format("woff2"),
    url("/templates/fonts/DINPro-Black.woff") format("woff"),
    url("/templates/fonts/DINPro-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DINPro";
  src: url("/templates/fonts/DINPro-Light.eot");
  src: url("/templates/fonts/DINPro-Light.eot?#iefix")
      format("embedded-opentype"),
    url("/templates/fonts/DINPro-Light.woff2") format("woff2"),
    url("/templates/fonts/DINPro-Light.woff") format("woff"),
    url("/templates/fonts/DINPro-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DINPro";
  src: url("/templates/fonts/DINPro-Regular.eot");
  src: url("/templates/fonts/DINPro-Regular.eot?#iefix")
      format("embedded-opentype"),
    url("/templates/fonts/DINPro-Regular.woff2") format("woff2"),
    url("/templates/fonts/DINPro-Regular.woff") format("woff"),
    url("/templates/fonts/DINPro-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DINPro";
  src: url("/templates/fonts/DINPro-Medium.eot");
  src: url("/templates/fonts/DINPro-Medium.eot?#iefix")
      format("embedded-opentype"),
    url("/templates/fonts/DINPro-Medium.woff2") format("woff2"),
    url("/templates/fonts/DINPro-Medium.woff") format("woff"),
    url("/templates/fonts/DINPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* HELVETICA */
@font-face {
  font-family: "Helvetica";
  src: url("/templates/fonts/HelveticaNeue-Italic.eot");
  src: url("/templates/fonts/HelveticaNeue-Italic.eot?#iefix")
      format("embedded-opentype"),
    url("/templates/fonts/HelveticaNeue-Italic.woff2") format("woff2"),
    url("/templates/fonts/HelveticaNeue-Italic.woff") format("woff"),
    url("/templates/fonts/HelveticaNeue-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("/templates/fonts/HelveticaNeue-Roman.eot");
  src: url("/templates/fonts/HelveticaNeue-Roman.eot?#iefix")
      format("embedded-opentype"),
    url("/templates/fonts/HelveticaNeue-Roman.woff2") format("woff2"),
    url("/templates/fonts/HelveticaNeue-Roman.woff") format("woff"),
    url("/templates/fonts/HelveticaNeue-Roman.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("/templates/fonts/HelveticaNeue-Bold.eot");
  src: url("/templates/fonts/HelveticaNeue-Bold.eot?#iefix")
      format("embedded-opentype"),
    url("/templates/fonts/HelveticaNeue-Bold.woff2") format("woff2"),
    url("/templates/fonts/HelveticaNeue-Bold.woff") format("woff"),
    url("/templates/fonts/HelveticaNeue-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}