@font-face {
    font-family: "Blooper";
    src: url("/fonts/Blooper.ttf") format("truetype");
}

@font-face {
    font-family: "BloopScript";
    src: url("/fonts/BloopScript.ttf") format("truetype");
}

body {
  font-family: sans-serif;
  background-color: white;
  color: #F5A4DF;
}

h1 {
  font-family: "Blooper";
  font-size: 5em;
  color: transparent;
  background-image: linear-gradient(to right, #F5A4DF, #A4E3F5, #F5A4DF);
  background-clip: text;
  background-size: 200% 200%;
  text-align: center;
  animation: rainbow 5s ease infinite; 
}

@keyframes rainbow {
  0% {background-position:1% 0%}
  50% {background-position:99% 100%}
  100% {background-position:1% 0%}
}

.hover {
 font-family: "Blooper";
 font-size: 2em;
 color: transparent;
 background-image: linear-gradient(#A4E3F5, #F5A4DF);
 background-clip: text;
}

a {
  color: inherit;
  text-decoration: none;
}