@font-face {
  font-family: "SuperMario256";
  src: url("../fonts/SuperMario256.ttf") format("truetype");
}
h1 .first-word {
  display: block;
  font-size: 50pt;
}
h1 .first-word span:nth-child(5n+1) {
  color: #ff5353;
}
h1 .first-word span:nth-child(5n+2) {
  color: #73ff56;
}
h1 .first-word span:nth-child(5n+3) {
  color: #5affff;
}
h1 .first-word span:nth-child(5n+4) {
  color: #fefe78;
}
h1 .first-word span:nth-child(5n+5) {
  color: #f750a8;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  color: #000;
  font-family: "Fredoka One", "Comic Sans", cursive;
  font-size: 28pt;
  margin: 0;
  overflow: hidden;
}

h1 {
  color: #fff;
  font-family: "SuperMario256", "Fredoka One", "Comic Sans", cursive;
  font-size: 40pt;
  margin: 0 0 0.5em;
  -webkit-text-stroke: 5px #000;
  text-stroke: 5px #000;
}

p {
  margin: 0;
}

svg {
  height: auto;
  max-height: 50vh;
  max-width: 100%;
}

.screen {
  padding: 0.5em;
  position: relative;
}
.screen:not([hidden]) {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100vh;
}
.screen.intro-screen, .screen.end-screen {
  background-color: #d50000;
  background-image: repeating-linear-gradient(45deg, rgba(255, 60, 60, 0.8), rgba(255, 179, 179, 0.8) 100px, transparent 0px, transparent 200px), repeating-linear-gradient(-45deg, rgba(138, 0, 0, 0.5), rgba(47, 0, 0, 0.5) 100px, transparent 0px, transparent 200px);
  text-align: center;
}
.screen.intro-screen p, .screen.end-screen p {
  color: #000;
  -webkit-text-stroke: 2px #fff;
  text-stroke: 2px #fff;
}
.screen.letter-screen {
  align-items: baseline;
  justify-content: left;
}
.screen.letter-screen:nth-child(5n+1) {
  background-color: #ffb9b9;
}
.screen.letter-screen:nth-child(5n+2) {
  background-color: #c7ffbc;
}
.screen.letter-screen:nth-child(5n+3) {
  background-color: #c0ffff;
}
.screen.letter-screen:nth-child(5n+4) {
  background-color: #ffffdd;
}
.screen.letter-screen:nth-child(5n+5) {
  background-color: #fbb2d8;
}
.screen.letter-screen .screen-content {
  width: 100%;
}
.screen.letter-screen .letter {
  font-size: 25vw;
  line-height: 1;
}
.screen.letter-screen button {
  display: block;
  margin: 0 auto;
}
.screen .letter-description {
  height: 2.5em;
}
.screen .screen-image {
  display: flex;
  justify-content: center;
}

@keyframes glow {
  from {
    box-shadow: 0 0 10px #ff0;
  }
  to {
    box-shadow: 0 -5px 40px rgba(255, 255, 0, 0.5), -5px -5px 40px rgba(255, 255, 0, 0.5), 5px -5px 40px rgba(255, 255, 0, 0.5);
  }
}
button {
  animation-direction: alternate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: glow;
  background-color: #fff;
  border: 5px solid #000;
  border-radius: 25%;
  font-family: "SuperMario256", "Fredoka One", "Comic Sans", cursive;
  font-size: 5vh;
  margin: 0.5em 0;
  padding: 0.5em;
}

button.previous {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  height: 2em;
  width: 2em;
  text-indent: -9999em;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgdmVyc2lvbj0iMS4xIj4KICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC0yNzAuNTQxNjcpIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMGZmO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoycHg7IgogICAgICAgZD0iTSA2Ni41NDk2OTgsMjc2Ljk4ODg5IEMgMzkuNjAzMjc5LDI4OC45MjQ1IDIzLjczNjc0OSwzMDAuODYwMSA5LjI4MzE0MzksMzEyLjc5NTcyIGMgLTcuNDczNjM3NSw2LjQwNCAtNC42MzQ3MzcxLDEwLjQ5OTg4IDAuMzQ3NzczNywxMy4zMTU2NiAyNC43NzQyNDI0LDE1Ljk2NTk4IDUwLjAzNjc2MTQsMjkuNDU3NTggNzYuMDQ2MjczNCwzOS4xNjM3MyA3LjM3MjI1NCwxLjQwOTUzIDEzLjY3NzA3MiwyLjA5MTc3IDUuNTY0MzYyLC03LjA0OTQ3IEMgNTUuOTYzNjY5LDMyOC4yNzM3MyA0NS45MDQwNzUsMzE3LjczNCA3NS41OTE3ODYsMjgzLjE0MzE5IGMgNS4wNjEyMzYsLTcuNTcyNjcgMC43MDk2MjIsLTguNzA5NTcgLTkuMDQyMDg4LC02LjE1NDMgeiIvPgogIDwvZz4KPC9zdmc+Cg==");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.5em 1.5em;
}

/*# sourceMappingURL=styles.css.map */