.mono {
  font-family: monospace;
  color: #ffffff;
  text-align: left;
}

h1 {
  font-family: "Comic Neue";
  color: #ffffff;
}

.passion {
  font-family: "Comic Neue";
  color: #ffffff;
}

.ascii-container {
  width: fit-content;
  margin: 0 auto;
}


/* .rainbow {
    background: linear-gradient(315deg, #ff0000, #feff00, #50d24c, #00ffdb, #0015ff, #b500ff);
    background-size: 1200% 1200%;

    -webkit-animation: rainbow 0s ease infinite;
    -moz-animation: rainbow 0s ease infinite;
    animation: rainbow 0s ease infinite;
}

@-webkit-keyframes rainbow {
    0%{background-position:84% 0%}
    50%{background-position:17% 100%}
    100%{background-position:84% 0%}j
}

@-moz-keyframes rainbow {
    0%{background-position:84% 0%}
    50%{background-position:17% 100%}
    100%{background-position:84% 0%}
}

@keyframes rainbow {
    0%{background-position:84% 0%}
    50%{background-position:17% 100%}
    100%{background-position:84% 0%}
} */


/* $page-background-color: #2F3C4F;
$gradient-color-1: #F57170;
$gradient-color-2: #10DDC2; */

@keyframes animationgradienttitle {
  0% {
      background-position: 0 1600px;
  }
  100% {
      background-position: 1600px 0;
  }
}

body {
  padding-top: 10rem;
  background-color: #2F3C4F;
  text-align: center;
}

h1 {
  margin: 0;
}

.c-article {
  margin-top: 10rem;
  text-align: center;
}

.c-article__header {
  position: relative;
}

.c-article__title {
  font-family: 'Comic Neue', serif;
  font-size: 3em;
  color: #fc3735;
  background: -webkit-linear-gradient(left, #F57170,#10DDC2, #F57170);
  background-size: 1600px 200px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation-duration: 3s;
  animation-name: animationgradienttitle;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

.u-font-lora {
  font-family: 'Comic Neue', serif;
  font-size: 1.5em;
  font-weight: 700;
}