body {
  overflow: hidden;
  background-color: var(--white);
}

.wrapper {
  font-family: "Alaska";
  color: var(--red);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: plane-rotate;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.tunnel {
  position: relative;
  width: 100px;
  height: 100px;
}

h1 {
  top: 10%;
  letter-spacing: 2px;
  text-align: center;
  padding-top: 100px;
}

.plane {
  position: absolute;
  width: 510px;
  margin-left: 3px;
  opacity: 1;
}

@keyframes plane-rotate {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(+5deg);
  }
}

.condense-position {
  display: flex;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

.frame {
  margin-top: 80px;
  width: 100%;
  height: 100%;
  position: absolute;
  animation-name: fly;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: calc(1s * var(--i) - 30s);
}

.right {
  text-align: right;
}

@keyframes fly {
  from {
    transform: perspective(500px) translateZ(-1000px);
  }
  to {
    transform: perspective(500px) translateZ(1000px);
  }
}