html,
body {
  font-size: 0;
  margin: 0;
  padding: 0;
  background: #000 url(images/space.png) repeat;
  background-size: contain;
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
}
body {
	perspective: 1px;
	transform-style: preserve-3d;
  background: transparent;
  overflow: auto;
  overflow-x: hidden;
  position: relative;
}
img {
  position: absolute;
  pointer-events: none;
}

.editable > * {
  position: absolute;
}

.scrollies2,
.scrollies,
.content {
  width: 90%;
  max-width: 1000px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.content {
  position: relative;
  transform-origin: 50% 0;
  overflow: hidden;
}

.sky {
  width: 85%;
  max-width: 1099px;
  position: absolute;
  top: 0;
  left: 0;
}
.big-cloud {
  background: transparent url('images/big-cloud.png') 50% 50% no-repeat;
  background-size: contain;
  position: relative;
  left: 10%;
  right: 0;
  margin: 0 auto;
  width: 68.7%;
  padding-top: 43.4%;
  height: 0;
}
.name {
  position: absolute;
  top: 18.433%;
  left: 8%;
  width: 89.374%;
  height: auto;
}
.small-cloud {
  background: transparent url('images/small-cloud.png') 50% 50% no-repeat;
  background-size: contain;
  width: 34.8%;
  padding-top: 20.3%;
  height: 0;
  margin-top: 2%;
}
.alien {
  background: transparent url('images/alien.png') 50% 50% no-repeat;
  background-size: contain;
  position: relative;
  left: 20%;
  right: 0;
  margin: 0 auto;
  margin-top: -5%;
  margin-bottom: 8%;
  width: 32%;
  padding-top: 42.3%;
  height: 0;
  z-index: 1;
}
.alien > div {
  position: absolute;
  height: 0;
  transition: transform 0.3s steps(2, end);
}
.alien > div:hover {
  transform: scale(1.1) rotate(15deg);
  z-index: 1;
}
.writer {
  background: transparent url('images/writer.png') 50% 50% no-repeat;
  background-size: contain;
  top: 48%;
  left: -22%;
  width: 51.25%;
  padding-top: 27.5%;
}
.creator {
  background: transparent url('images/creator.png') 50% 50% no-repeat;
  background-size: contain;
  top: 45%;
  left: 19%;
  width: 55.938%;
  padding-top: 40.625%;
}
.producer {
  background: transparent url('images/producer.png') 50% 50% no-repeat;
  background-size: contain;
  top: 69%;
  left: -30%;
  width: 63.125%;
  padding-top: 33.125%;
}
.performer {
  background: transparent url('images/performer.png') 50% 50% no-repeat;
  background-size: contain;
  top: 73%;
  left: 18%;
  width: 65.3125%;
  padding-top: 28.75%;
}

.hello {
  background: transparent url('images/hello.png') 0 0 no-repeat;
  background-size: contain;
  position: relative;
  margin-top: -8%;
  margin-bottom: 8%;
  left: 8%;
  width: 27%;
  padding-top: 20.7%;
  height: 0;
  animation: GLOBE 120s linear infinite;
  transform-origin: 58% 62%;
}
@keyframes GLOBE {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.globe {
  background: transparent url('images/globe.png') 50% 50% no-repeat;
  background-size: contain;
  position: absolute;
  top: 17%;
  left: 6.6%;
  width: 84.444%;
  height: 100%;
}


.cloud-chunk {
  top: 0;
  left: 0;
  width: 43.1%;
  max-width: 574px;
  max-height: 249px;
  transform: translateZ(0.1px) scale(0.9) translateY(7%) translateX(15%);
  transform-origin: 0 0;
}

.scrollies,
.scrollies2 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.scrollies[style*="height"],
.scrollies2[style*="height"] {
  opacity: 1;
}
.jump {
  width: 7%;
  top: 40%;
  left: 15%;
}
.receipt {
  width: 38.8%;
  bottom: 0;
  right: 0;
}
.truck {
  width: 24.2%;
  bottom: 1%;
  right: 17%;
}

.scrollies2 {
  transform: translateZ(-0.2px) scale(1.08);
  transform-origin: 50% 0;
}
.house {
  width: 38.3%;
  bottom: 7%;
  left: 85%;
}

@media (max-width: 800px) {
  .scrollies2,
  .scrollies,
  .content {
    width: 100%;
  }
  .sky {
    width: 110%;
  }
  .cloud-chunk {
    left: -12%;
    width: 58.1%;
  }
  .big-cloud {
    width: 84.7%;
    padding-top: 53.4%;
    left: 0;
  }
  .small-cloud {
    width: 46.8%;
    padding-top: 27.3%;
    margin-top: 6%;
    position: relative;
    left: -4%;
  }
  .alien {
    width: 45%;
    padding-top: 59.3%;
    margin-bottom: 22%;
  }
  .hello {
    width: 38%;
    padding-top: 28.7%;
    margin-top: -12%;
    margin-bottom: 12%;
  }
  .jump {
    width: 11%;
    top: 36%;
  }
  .truck {
    width: 38.2%;
    right: 27%;
  }
  .receipt {
    width: 50.8%;
    right: 10%;
  }
  .house {
    width: 47.3%;
    bottom: 8%;
    left: 59%;
  }
}
@media (max-width: 500px) {
  .content {
    padding-top: 10%;
  }
  .cloud-chunk {
    width: 75.1%;
  }
  .big-cloud {
    width: 96.7%;
    padding-top: 60.9%;
  }
  .small-cloud {
    width: 60.8%;
    padding-top: 35.3%;
    margin-top: 9%;
    left: -6%;
  }
  .alien {
    width: 69%;
    padding-top: 91.3%;
    margin-bottom: 22%;
    left: 13%;
    margin-top: 3%;
  }
  .hello {
    width: 58%;
    padding-top: 44.7%;
    margin: 0 auto;
    margin-top: -12%;
    margin-bottom: 17%;
    left: -10%;
    right: 0;
    position: relative;
  }
  .jump {
    width: 15%;
    top: 32%;
    left: 16%;
  }
  .truck {
    width: 55.2%;
    right: 41%;
  }
  .receipt {
    width: 76.8%;
    right: 16%;
  }
  .house {
    width: 61.3%;
    bottom: 7.5%;
    left: 45%;
  }
}