@font-face {
    font-family: 'LibreBaskerville';
    src: url('./LibreBaskerville-Regular.ttf');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'LibreBaskerville';
    src: url('./LibreBaskerville-Italic.ttf');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'PublicSans';
    src: url('./PublicSans-Italic.ttf');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'PublicSans';
    src: url('./PublicSans-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'PublicSans';
    src: url('./PublicSans-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
  font-family: 'PublicSans';
  src: url('./PublicSans-ExtraBold.ttf');
  font-weight: 800;
  font-style: normal;
}

@font-face {
    font-family: 'SpaceMono';
    src: url('./SpaceMono\ Regular.TTF');
    font-weight: 200;
    font-style: normal;
    font-variant-ligatures: none;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body, html {
    font-family: 'PublicSans';
    font-size: 16px;
    color: var(--slate)
  }

  @media screen and (max-width: 900px) {
    body, html {
      font-size: 14px;
    }
  }
  
  :root {
    /*Primary*/
    --primary200: #081A59;
    --primary100: #0F2E9B;
    --primary75: #204EF0;
    --primary50: #7894F9;
    --primary25: #B7C7FD;
    --primary00: #DFE6FF;

    /*Mono*/
    --mono175: #282D3A;
    --mono150: #464E63;
    --mono125: #606980;
    --mono100: #969DAE;
    --mono75: #C1C6D0;
    --mono50: #DBDEE7;
    --mono25: #EBEEF6;
    --mono00: #FCFDFF;

    /*Green*/
    --green200: #095213;
    --green100: #0EC929;
    --green75: #13F033;
    --green50: #86F296;
    --green25: #C4F8CB;
    --green00: #E3FDE7;

    /*Yellow*/
    --yellow200: #606609;
    --yellow100: #BAC70F;
    --yellow75: #E1F014;
    --yellow50: #F5FF73;
    --yellow25: #FAFFBC;
    --yellow00: #FDFFDE;

    /*Red*/
    --red200: #700A23;
    --red100: #B8123B;
    --red75: #F23060;
    --red50: #F07795;
    --red25: #FCB2C4;
    --red00: #FFD2DD;

    /*Purple*/
    --purple200: #4D0E71;
    --purple100: #7A11B6;
    --purple75: #A523F0;
    --purple50: #CD77FF;
    --purple25: #E1B2FC;
    --purple00: #F0D6FF;

    /*Umber*/
    --umber200: #883408;
    --umber100: #B8490E;
    --umber75: #F06318;
    --umber50: #F39D6F;
    --umber25: #F6C3A7;
    --umber00: #FFD5BE;

    /*Aqua*/
    --aqua200: #0A9088;
    --aqua100: #08CABE;
    --aqua75: #10F0E2;
    --aqua50: #91F8F1;
    --aqua25: #C0FEFA;
    --aqua00: #DEFFFD;

    --naval: #062AA7;
    --primary: #204EF0;
    --firmament: #DBEAFF;
    --clear: #EDF5FF;
  
    --slate: #1E2033;
    --steel: #39435B;
    --frame: #E7EAEE;
  
    --royal: #372989;
    --orchid: #DBD7F8;
    --satin: #F1EEFC;
    --gleam: #F9FBFE;
  
    --error: #B44C3E;
    --coral: #ED9C91;
    --valentine: #F6CDC7;
    --smartie: #FAE5E2;
  
    --groto: #6C8F73;
    --clover: #9CD1A8;
    --lichen: #BFDFC6;
    --seafoam: #E4F2E7;
  
    --zest: #F2ECB7;
  
  }
  
  h1 {
    font-size: 3.4em;
  }
  
  h2 {
    font-size: 2.8em;
  }
  
  h3 {
    font-size: 2.2em;
  }
  
  h4 {
    font-size: 1.6em;
  }
  
  h5 {
    font-size: 1em;
  }

  .contentHold>* {
    margin-bottom: 1em;
  }
  
  p {
    font-size: 1em;
    color: var(--steel);
    font-weight: 200;
    line-height: 140%;
  }
  
  code {
    font-family: 'SpaceMono';
    color: var(--mono50);
    background-color: var(--mono175);
    font-size: 0.8em;
    padding: 0.1em 0.5em 0.1em 0.5em;
    border-radius: 0.2em;
  }
  
  .baskerville {
    font-family: 'LibreBaskerville';
    font-size: 0.9em;
  }
  
  .baskervilleHeadline {
    font-family: 'LibreBaskerville';
    font-size: 2em;
  }
  
  kbd {
    font-family: 'SpaceMono';
    color: var(--primary);
    background-color: var(--firmament);
    font-size: 0.8em;
    padding: 0.1em 0.5em 0.1em 0.5em;
    border-radius: 0.2em;
  }
  
  mark {
    color: var(--purple200);
    background-color: var(--purple00);
    padding: 0.1em 0.5em 0.1em 0.5em;
    border-radius: 0.2em;
    font-weight: 200;
    font-size: 0.9em;
  }
  
  a {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 200;
  }
  
  .formSmall {
    text-transform: uppercase;
    font-size: 0.75em;
  }
  
  .errorSmall {
    text-transform: uppercase;
    font-size: 0.75em;
    color: var(--red75);
    margin-top: 0.5em;
  }

  pre[class*="language-"],
  :not(pre) > code[class*="language-"] {
      background: hsl(30, 20%, 25%);
  }

  /* layout */
  .column {
    margin-bottom: 1em;
  }

  .column>* {
    margin-top: 1em;
  }

  .grid12 {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
  
  /* Code blocks */
  pre[class*="language-"] {
      padding: 1em;
      margin: .5em 0;
      overflow: auto;
      border: .3em solid hsl(30, 20%, 40%);
      border-radius: .5em;
      box-shadow: 1px 1px .5em black inset;
  }
  
  /* Inline code */
  :not(pre) > code[class*="language-"] {
      border-radius: .3em;
      border: .13em solid hsl(30, 20%, 40%);
      box-shadow: 1px 1px .3em -.1em black inset;
      white-space: normal;
      padding: 1em;
  }
  
  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
      color: var(--mono100);
  }
  
  .token.punctuation {
      opacity: .7;
  }
  
  .token.namespace {
      opacity: .7;
  }
  
  .token.property,
  .token.tag,
  .token.boolean,
  .token.number,
  .token.constant,
  .token.symbol {
      color: var(--mono25);
  }
  
  .token.selector,
  .token.attr-name,
  .token.string,
  .token.char,
  .token.builtin,
  .token.inserted {
      color: var(--umber50);
  }
  
  .token.operator,
  .token.entity,
  .token.url,
  .language-css .token.string,
  .style .token.string,
  .token.variable {
      color: var(--mono25);
  }
  
  .token.atrule,
  .token.attr-value,
  .token.keyword {
      color: var(--purple25);
  }
  
  .token.regex,
  .token.important {
      color: var(--aqua50);
  }
  
  .token.important,
  .token.bold {
      font-weight: bold;
  }
  .token.italic {
      font-style: italic;
  }
  
  .token.entity {
      cursor: help;
  }
  
  .token.deleted {
      color: red;
  }

  .linkButtonHold {
    display: flex;
    animation-name: nudgeout;
    animation-duration: 2s;
    animation-fill-mode: both;
  }

  .linkButtonHold:hover > p {
    animation-name: nudgein;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    padding-right: 0em;
  }

  @keyframes nudgein {
    0% {
      padding-right: 0em;
    }
    50% {
      padding-right: 1em;
    }
    100% {
      padding-right: 0em;
    }
  }

  @keyframes nudgeout {
    0% {
      padding-right: 0em;
    }
    50% {
      padding-right: 1em;
    }
    100% {
      padding-right: 0em;
    }
  }