html {
  background: black;
}

body {
  background: black;
  background-size: 100vw;
  color: #ffd23e;
  font-family: arial;
  font-size: 6.666vw;
  margin: 0;
  perspective: 50vh;
  height: 100vh;
  overflow: hidden;
  filter: blur(1px);
}

body.playing {
  background: url(stars.png);
  animation: fade 4s 87s 1 normal linear forwards;
}

article {
  width: 15em;
  text-align: justify;
  position: fixed;
  bottom: 0;
  transform-origin: center bottom;
  transform: rotate3d(1, 0, 0, 45deg) translateY(100%);
}

body.playing article {
  animation: crawler 78s linear forwards 11s;
}

header {
  text-align: center;
}

strong {
  text-transform: uppercase;
  font-weight: normal;
}

h1 {
  text-transform: uppercase;
}

h2 {
  font-size: 1.2em;
}


@keyframes crawler {
  0% {
    transform: rotateX(45deg) translateY(100%);
    opacity: 1;
  }

  90% {
    opacity: 1;
  }
  100% {
    transform: rotateX(45deg) translateY(-50%);
    opacity: 0;
  }
}

aside {
  position: absolute;
  opacity: 0;
  color: rgb(75,213,238);
  font-size: 4vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body.playing aside {
  animation: alongtimeago 6s linear;
}

@keyframes alongtimeago {
  0% { opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

img {
  position: absolute;
  opacity: 0;
  height: 100vh;
  width: 100vw;
  height: 100vh;
}

body.playing img {
  animation: logo 9s linear 6s;
}

@keyframes logo {
  0% {
    transform: translateZ(0);
    opacity: 0;
  }
  1% {
    transform: translateZ(0);
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateZ(-500vh);
    opacity: 0;
  }
}

body.playing #play {
  display: none;
}

body.playing {
  cursor: none;
}


#play {
  font-size: 3vmin;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1.5em 2em;
  background: red;
  color: white;
  border-radius: 50% / 10%;
  cursor: pointer;
}

#play::before {
  content: "▶︎";
  font-family: Arial;
  font-size: 200%;
  line-height: 1.8em;
  text-align: center;
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}