:root {
  --background: #fff;
  --primary: #232323;
  --primary-font: #FFF;
  --secondary: #00ffee;
  --accent: #00F;
  --inner-width: 80%;
  --inner-max-width: 1280px;
  --inner-min-width: 400px;
  --media-query-icpt: 700px;
  --nav-toggle: none;
}

@font-face {
    font-family: "DLE Digital";
    src: url("../fonts/DLE-Digital.ttf");
}

html {
  box-sizing: border-box;
  font-size: 0.9em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--background);
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* custom */
#App {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;

  width: 100%;
  margin: 0 auto;
}
div.section {
  width: var(--inner-width);
  max-width: var(--inner-max-width);
  margin: 0 auto;
  min-height: 50vh;
  padding: 5vh 0;
}
main > div.section:first-child {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: var(--inner-min-width);
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('../img/test-header.jpg');
  background-attachment: fixed;
  background-size: cover;
  min-height: 50vh;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 2rem;
  font-variant: small-caps;
}
main > div.section:first-child > div:first-child {
    font-weight: bold;
    font-size: 5rem;
    font-family: "DLE Digital";
    display: block;
}

a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--primary-font);
}
a:hover {
  border-bottom: 1px solid var(--primary-font);
}

@media (max-width: 700px) {
  :root {
    --inner-width: 100%;
    --inner-max-width: 90%;
  }

  body {
    width: 100vw;
  }
}