:root {
    --size-creeper: 128px;
}

body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    margin: 0;
}

#creeper {
    width: var(--size-creeper);
    height: var(--size-creeper);
    transform-style: preserve-3d;
    z-index: 500;
}

.side {
    position: absolute;
    width: var(--size-creeper);
    height: var(--size-creeper);
}

.front  { transform:                  translateZ(calc(var(--size-creeper) / 2)); }
.top    { transform: rotateX( 90deg)  translateZ(calc(var(--size-creeper) / 2)); }
.right  { transform: rotateY( 90deg)  translateZ(calc(var(--size-creeper) / 2)); }
.left   { transform: rotateY(-90deg)  translateZ(calc(var(--size-creeper) / 2)); }
.bottom { transform: rotateX(-90deg)  translateZ(calc(var(--size-creeper) / 2)); }
.back   { transform: rotateY(-180deg) translateZ(calc(var(--size-creeper) / 2)); }

@keyframes rotate {
  50% { transform: rotateY(90deg) rotateX(90deg) scale3d(.5, .5, .5) }
  100% { transform: rotateY(180deg) rotateX(180deg) }
}

#minecraft-quote {
  position: absolute;
  color: yellow;
  right: 15%;
  bottom: 15%;
  font-family: "MinecraftiaRegular";
  font-size: 100%;
  transform: rotate(-20deg);
  transform-origin: top center;
  animation: subtitle .25s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

.splashscreen {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 100vh;
  object-fit: cover;  
  overflow: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.splashscreen img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transform: scale(1.1);
  filter: blur(8px);
}

.splashscreen:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  filter: blur(100px);
}


@keyframes subtitle {
  0% {
    transform: scale(0.875) rotate(-20deg);
  }
  100% {
    transform: scale(1) rotate(-20deg);
  }
}