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

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

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

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

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

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

body {
  font-family: "OpenSans";
  background-color: black;
  color: yellow;
}

h1 {
  font-family: "Creamandsugar";
  text-align: center;
  color: yellow;
  font-size: 4em;
  animation: glow 2s ease-in-out infinite alternate,
  levitate 4s ease-in-out -2s infinite alternate;
  -webkit-text-stroke: 3px rgba(0,0,0,0);
}

@keyframes glow {
  0% {-webkit-text-stroke: cyan;}
  100% {-webkit-text-stroke: magenta;}
}

@keyframes levitate {
  from {transform: translate(0px, 10%);}
  to {transform: translate(0px, -10%);}
}

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

.hover {
  font-family: "DunceCapBB"; 
  font-size: 1.5em;
}

.hover:hover {
  background-color: #00FF00;
  filter: invert(100%)
}

#about:hover {
  font-family: "Abilene";
}

#world:hover {
  font-family: "BoobToob";
}

#characters:hover {
  font-family: "BloopScript";
  font-size: 2em;
  text-transform: lowercase;
}