@font-face {
  font-family: "Economica";
  src: url("./fonts/Economica-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Economica";
  src: url("./fonts/Economica-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Kavoon";
  src: url("./fonts/Kavoon-Regular.woff2") format("woff2");
}

:root {
  --light-bg: #fffae4;
  --light-accent: #fac378;
  --dark-bg: #560d0b;
  --dark-accent: #820400;
  --midtone: #9f5252;
}

html { font-size: 1em; }

body {
  margin: 0;
  font-family: "Economica", Arial, sans-serif;
  
  h1 {
    font-family: "Kavoon", "Noto Sans", sans-serif;
  }
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

header {
  background-color: var(--light-accent, #fac378);
  color: white;
  width: 100%;
  font-family: "Kavoon", "Noto Sans", sans-serif;

  #logo {
    display: flex;
    align-items: center;
  }

  img {
    margin: 0.5em 1em;
  }
  .corpname {
    font-size: 1.5rem;
    margin: 0;
  }
  .tagline {
    margin: 0;
    font-family: "Economica", "Noto Sans", sans-serif;
    font-size: 1.1rem;
    letter-spacing: 2px;
  }

  nav {
    background-color: var(--light-bg, #fffae4);
    /* position: sticky;
    top: 0;
    height: 40px;
    z-index: 10; */
    padding: 1% 10%;
    ul {
      display: flex;
      align-items: center;
      padding: 0;
      margin: 0;
    li {
      margin: 0 1rem;
      &::marker { content: none; }
      }
    }
    a {
      color: var(--dark-accent, black);
      text-decoration: none;
      font-family: "Kavoon", sans-serif;
      font-size: 1.2rem;
    }
  }
}



main {
  margin: 0 15%;
  @media (max-width: 640px) { margin: 0 2%; }
  flex-grow: 2;
  h1 {
    padding: 0 2%;
  }
  p {
    padding: 0 3%;
    font-size: 1.6rem;
  }

  video {
    margin: 70px 20% 0;
  }
  
}

footer {
  margin-top: 70px;
  padding: 1% 10% 40px;
  @media (max-width: 640px) { padding: 0 2%; }
  display: flex;
  justify-content: space-between;
  background-color: var(--dark-bg, #560d0b);
  color: white;
  p {
    margin: 5px 0 10px 0;
  }
  a {
    color: white;
  }
  
  > section { 
    flex-grow: 1;
    margin: 0 0.5rem;
  }
  
  /* #disclaimer {

  } */

  #pagelinks {
    ul { margin: 0; padding: 0 }
    li {
      margin: 0;
      &::marker { content: none; }
      a { text-decoration: none; }
    }
  }

  #sociallinks {
    a {
      display: block;
      text-decoration: none;
      margin-bottom: 5px;
    }
    img {
      width: 15px;
      height: auto;
      margin-right: 5px;
    }
  }
}