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

@font-face {
    font-family: 'pinkchicken';
    src: url('fonts/pinkchicken-regular-webfont.woff2') format('woff2'),
    font-weight: normal;
    font-style: normal;
}

:root {
    --red: #ffcaca;
    --orange: #ffedc1;
    --yellow: #feffb8;
    --green: #c4ffcb;
    --blue: #add8ff;
    --purple: #ccafe9;

    --darkgreen: #3E885B;
    --darkblue: #7fb4f5;

    --white: #e2e2ed;
    --lightgray: #94B0C2;
    --lightblue: #d1e9ff;
    --gray: #ADACB5;
    --darkgray: #333C57;
    --black: #181818;
    --trueblack: #000000;
}

#footer {
  position:fixed;
  left:0px;
  bottom:0px;
  height:30px;
}

body {
  max-width: 70ch;
  margin: 20px auto;
  padding-bottom: 50px;
  font-family: 'jetbrainsmono', monospace;
  background-color: #181818;
  color: #e2e2ed;
}

a {
  display: inline-block;
  color: inherit;
  position: relative;
  text-decoration: none;
  transition: linear 0.2s;
  color: #9c94c5;
}

.button {
  background: none;
  border: none;
}

h1 {
  font-family: 'pinkchicken';
  text-align: center;
}

h2 {
    color: #95a4c6;
}
h2:after {
    content: ':';
}

/*
  TODO:
  Find author of the following
*/

.rainbow span{
  animation: wave 1s linear var(--n) infinite forwards running,
             rainbow 3s linear var(--n) infinite forwards running;
  position: relative;
}

@media screen and (prefers-reduced-motion: reduce)
{
  .rainbow span {
    animation: none;
  }
}

@keyframes wave{
  0%    {top: 0px;}
  25%   {top: -3px;}
  50%   {top: 0px;}
  75%  {top: 3px;}
  100% {top: 0px;}
}

@keyframes rainbow{
  0% {color: var(--red);}
  17% {color: var(--orange);}
  33% {color: var(--yellow);}
  50% {color: var(--green);}
  67% {color: var(--blue);}
  83% {color: var(--purple);}
  100% {color: var(--red);}
}