:root {
  --animation-speed: 10s;
  --clouds-bg: url("./assets/clouds.png");
  --stars-bg: url("./assets/stars.png");
  --twinkling-bg: url("./assets/twinkling.png");

  --clouds-w: 1958px;
  --clouds-h: 660px;

  --stars-w: 2000px;
  --stars-h: 1372px;

  --twinkling-w: 100px;
  --twinkling-h: 100px;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.space-the-final-frontier {
  width: 100vw;
  height: 100vh;
  background: #000;
  display: flex;
  align-content: center;
  justify-content: center;
}


.space-the-final-frontier .stars,
.space-the-final-frontier .twinkling,
.space-the-final-frontier .clouds {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 400vw;
  height: 400vh;
  background-position: bottom right;
}

.space-the-final-frontier .stars {
  background-image: var(--stars-bg);
  animation: stars-ani var(--animation-speed) linear infinite;
}

.space-the-final-frontier .twinkling {
  background-image: var(--twinkling-bg);
  animation: twinkling-ani var(--animation-speed) linear infinite;
}

.space-the-final-frontier .clouds {
  background-image: var(--clouds-bg);
  animation: clouds-ani var(--animation-speed) linear infinite;
}

.space-the-final-frontier .enterprise {
  position: relative;
  width: 600px;
  height: 536px;
  height: auto;
  object-fit: contain;
  z-index: 1;
}

@keyframes stars-ani {
  100% {
    transform: translateY(var(--stars-h)) translateX(var(--stars-w));
  }
}

@keyframes clouds-ani {
  100% {
    transform: translateY(calc(var(--clouds-h) * 2)) translateX(var(--clouds-w));
  }
}

@keyframes twinkling-ani {
  100% {
    transform: translateY(calc(var(--twinkling-h) * 10)) translateX(calc(var(--twinkling-w) * 10));
  }
}