html {
  align-items: center;
  width: 100vw;
  height: 100vh;
} 

body {
  width: 60%;
  height: 80%;
  align-items: center;
}

h1 {
  font-size: 1.5rem;
  animation: h1 4s ease-in-out infinite;
}

h1:hover {
  color: #f0e3ff;
}

h1, p:nth-of-type(odd) {
  color: #e3c9ff;
}

p:nth-of-type(even) {
  margin-block: 1lh;
  color: #CBA6F7;
}

p {
  text-indent: 0;
  opacity: 0;
}

p:nth-of-type(1) { animation: p1 28s ease-in-out infinite; }
p:nth-of-type(2) { animation: p2 28s ease-in-out infinite; }
p:nth-of-type(3) { animation: p3 28s ease-in-out infinite; }
p:nth-of-type(4) { animation: p4 28s ease-in-out infinite; }
p:nth-of-type(5) { animation: p5 28s ease-in-out infinite; }

section a {
  width: 40%;
  margin: 0 auto;
}

section {
  display: flex;
  flex-direction: column;
  padding: 20px;
  text-align: center;
  border: 2px dotted black;
  border-radius: 120px;
  background: url("https://pirahxcx.neocities.org/assets/images/background01.avif");
}

@keyframes h1 {
  0%, 100% { text-shadow: none; }
 50% { text-shadow: 0 0 0.5rem white; }
}

@keyframes p1 {
   3% { opacity: 1; }
   9% { opacity: 1; }
  12% { opacity: 0; }
}

@keyframes p2 {
  12% { opacity: 0; }
  15% { opacity: 1; }
  38% { opacity: 1; }
  41% { opacity: 0; }
}

@keyframes p3 {
  41% { opacity: 0; }
  44% { opacity: 1; }
  62% { opacity: 1; }
  65% { opacity: 0; }
}

@keyframes p4 {
  65% { opacity: 0; }
  68% { opacity: 1; }
  79% { opacity: 1; }
  82% { opacity: 0; }
}

@keyframes p5 {
   82% { opacity: 0; }
   85% { opacity: 1; }
   97% { opacity: 1; }
  100% { opacity: 0; }
}

@media (min-width: 1800px) {
  html {
    width: 66.66%;
    height: 66.66vh;
  }
}