@import url("https://fonts.googleapis.com/css2?family=Frijole&family=Londrina+Sketch&display=swap");
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@font-face {
  font-family: "gobold-hollow";
  src: url("../fonts/gobold_hollow-webfont.woff2") format("woff2"), url("../fonts/gobold_hollow-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
body {
  background: #000;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
}

#next img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: fadeIn 0.1s 20s forwards;
}

#next h1 {
  opacity: 0;
  color: white;
  animation: fadeIn 5s 23s forwards;
  font-family: "Frijole", system-ui;
  font-size: 7rem;
  font-weight: 100;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

#next p {
  animation: fadeIn 2s ease-out forwards;
  font-family: "Londrina Sketch", serif;
  font-size: 4rem;
  position: absolute;
  color: white;
  opacity: 0;
}
#next p:nth-of-type(1) {
  animation: fadeIn 3s 26s forwards;
  top: calc(8rem + 5rem);
}
#next p:nth-of-type(2) {
  animation: fadeIn 3s 28s forwards;
  top: calc(8rem + 10rem);
}
#next p:nth-of-type(3) {
  animation: fadeIn 3s 30s forwards;
  top: calc(8rem + 15rem);
}
#next p:nth-of-type(4) {
  animation: fadeIn 3s 32s forwards;
  top: calc(8rem + 20rem);
}
#next p:nth-of-type(5) {
  animation: fadeIn 3s 34s forwards;
  top: calc(8rem + 25rem);
}
#next p:nth-of-type(6) {
  animation: fadeIn 3s 36s forwards;
  top: calc(8rem + 30rem);
}
#next p:nth-of-type(7) {
  animation: fadeIn 3s 38s forwards;
  top: calc(8rem + 35rem);
}
#next p:nth-of-type(8) {
  animation: fadeIn 3s 40s forwards;
  top: calc(8rem + 40rem);
}
#next p:nth-of-type(9) {
  animation: fadeIn 3s 42s forwards;
  top: calc(8rem + 45rem);
}
#next p:nth-of-type(10) {
  animation: fadeIn 3s 44s forwards;
  top: calc(8rem + 50rem);
}

#first img {
  opacity: 0;
  animation: fadeIn 5s 1s forwards;
}

#first h1 {
  opacity: 0;
  color: white;
  animation: fadeIn 5s 3s forwards;
  font-family: "Frijole", system-ui;
  font-size: 7rem;
  font-weight: 100;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

#first p {
  animation: fadeIn 2s ease-out forwards;
  font-family: "Londrina Sketch", serif;
  font-size: 4rem;
  position: absolute;
  color: white;
  opacity: 0;
}
#first p:nth-of-type(1) {
  animation: fadeIn 3s 6s forwards;
  top: calc(8rem + 5rem);
}
#first p:nth-of-type(2) {
  animation: fadeIn 3s 8s forwards;
  top: calc(8rem + 10rem);
}
#first p:nth-of-type(3) {
  animation: fadeIn 3s 10s forwards;
  top: calc(8rem + 15rem);
}
#first p:nth-of-type(4) {
  animation: fadeIn 3s 12s forwards;
  top: calc(8rem + 20rem);
}
#first p:nth-of-type(5) {
  animation: fadeIn 3s 14s forwards;
  top: calc(8rem + 25rem);
}
#first p:nth-of-type(6) {
  animation: fadeIn 3s 16s forwards;
  top: calc(8rem + 30rem);
}
#first p:nth-of-type(7) {
  animation: fadeIn 3s 18s forwards;
  top: calc(8rem + 35rem);
}
#first p:nth-of-type(8) {
  animation: fadeIn 3s 20s forwards;
  top: calc(8rem + 40rem);
}
#first p:nth-of-type(9) {
  animation: fadeIn 3s 22s forwards;
  top: calc(8rem + 45rem);
}
#first p:nth-of-type(10) {
  animation: fadeIn 3s 24s forwards;
  top: calc(8rem + 50rem);
}/*# sourceMappingURL=style.css.map */