styles.css

:root {
  --main-bg: #04000f;
  --title-color: rgb(255, 96, 96);
  --subtitle-color: #eab3ae;
  --emphasis-color: #e71212;
  --delay-time: 0.5s;
  --rolldown-time: 3s;
  --rolldown-interpolator: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--main-bg);
  font-family: "Arial Narrow Bold", sans-serif;
  margin: auto 0.5em;
  padding: 0;
}

h1 {
  text-align: center;
}

fieldset {
  display: flex;
  margin: 0 5vw 5vh 5vw;
  padding: 20px;
  border-radius: 10px;
  border-inline: none;
  background: linear-gradient(90deg, rgba(255, 135, 122, 0.377), transparent 50%);
  color: var(--emphasis-color);
  opacity: 0;

  animation: fade-in var(--rolldown-time) cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/*
 * Classes
 */

.title {
  color: var(--title-color);
  font-size: 1.6rem;
  font-weight: 900;
  opacity: 0;
  margin: 0.5em auto 0 auto;
  width: 50vw;

  /* animation */
  animation: rolldown var(--rolldown-time) var(--rolldown-interpolator) var(--delay-time) forwards,
    fade-in 0s var(--delay-time) forwards;
}

.title::after {
  content: "";
  opacity: 0;
  display: block;
  width: 100%;
  height: 5px;
  background: var(--title-color);
  margin: -0.2em auto 0.5em auto;
  border-radius: 0 0 100% 100%;

  /* animation */
  animation: fade-in 0s calc(var(--delay-time) + 0.3s) forwards;
}

.subtitle {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.15rem;
  font-weight: 500;
  text-align: center;
  color: var(--subtitle-color);
  opacity: 0;
  width: 44ch;
  margin: 1.3rem auto;
  border-right: 4px solid;
  white-space: nowrap;
  overflow: hidden;

  /* animation */
  --start: calc(var(--delay-time) + var(--rolldown-time));

  animation: typing 5s steps(44) var(--start), blinking 1s steps(1) calc(var(--start) + 5s) infinite,
    fade-in 0s calc(var(--start)) forwards;
}

input[type="button"] {
  width: 100%;
  height: 10vh;

  animation: grow-width var(--rolldown-time) cubic-bezier(0.075, 0.82, 0.165, 1)
    calc(var(--delay-time) + 0.3s) forwards;
}

/* Animations */
@keyframes rolldown {
  0% {
    transform: translateY(-20vh);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes fade-in {
  to {
    opacity: 100%;
  }
}

@keyframes grow-width {
  0% {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes typing {
  from {
    width: 0ch;
  }

  to {
    width: 100%;
  }
}

@keyframes blinking {
  50% {
    border-color: transparent;
  }
}