@font-face {
  font-family: Recursive;
  src: url(../fonts/Recursive_VF_1.085.woff2) format('woff2');
}

html {
  --color-orange: #993600;
  --color-black: #140E00;
  --color-white: #FFFDF5;
  --color-blue: #0095FF;
  --color-blue-dark: #005261;
  --color-lime: #C2C200;
  --color-green: #ACE0A3;
  --color-red: #D14200;
  --color-pink: #FFBBB8;

  --font-mono: "MONO" 1;
  --font-casl: "CASL" 0;
  --font-wght: "wght" 450;
  --font-slnt: "slnt" 0;
  --font-crsv: "CRSV" 0.5;
}

html {
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: "Recursive";
  font-variation-settings: var(--font-mono),
                           var(--font-casl),
                           var(--font-wght),
                           var(--font-slnt),
                           var(--font-crsv);
}

main {
    width: 40em;
    margin-top: 5vh;
    margin-left: auto;
    margin-right: auto;
    min-height: 70vh;
    box-sizing: border-box;
    padding-bottom: 5vh;

    padding-left: 1em;
    padding-right: 1em;
    box-sizing: border-box;

    margin-left: auto;
    margin-right: auto;

    text-align: justify;
}

nav {
  height: 2.5em;
  width: 40em;
  padding-left: 0.5em;
  margin-top: 0em;

  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid #BDBDBD;

  box-sizing: border-box;

  ul {
    li {
      line-height: 2.5em;
      padding-right: 1em;
      display: inline;

      a {
        color: var(--color-black);
        border: 0px solid black;
      }
    }

    li::before {
      content: "";
    }
  }
}

@media only screen and (max-width: 48em) {
  body, html {
    width: 100% !important;
  }

  main {
    width: 100% !important;
    border-radius: 0em;
  }

  nav {
    width: 100% !important;
  }
}

p {
  margin-top: 1ex;
  line-height: 2em;
  margin-bottom: 1em;
}

a {
  color: var(--color-blue);
  text-decoration: none;
  box-sizing: border-box;
  border-bottom: 1px dotted var(--color-blue);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  box-sizing: border-box;
  padding-top:    0.75em;
  margin-bottom: 0.75em;
}

h1 {
  font-size: 2.2em;
  padding-bottom: 0.12em;
  border-bottom: 0.15em solid var(--color-black);
}

h2 {
  font-size: 1.8em;
  padding-bottom: 0.10em;
  border-bottom: 0.1em solid var(--color-black);
}

table {
  table-layout:fixed;
  width: 100%;
  border: 1px solid var(--color-black);
  overflow: hidden;
  margin-top: 0.5em;
  margin-bottom: 0.5em;

  th {
    font-weight: bold;
  }

  th, tr, td {
    padding: 0.5em;
  }

  thead {
    tr {
      border-top: 1px solid var(--color-black);
      border-bottom: 1px solid var(--color-black);
      th {
          text-align: left;
      }
      td {
        font-weight: bold;
      }
    }
  }

  tbody {
    th, tr, td {
      border-bottom: 1px solid var(--color-black);
    }

    tr:nth-child(even) {
        background-color: white;
    }
  }
}