:root{
  --acceleration-default: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --acceleration-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
  --border-circular: 50%;
  --border-soft: 21%;
  --color-land: #559284;
  --color-cloud: #def8f2;
  --color-shuriken: #c2ebe5;
  --color-shuriken-accent: #a2c9c3;
  --color-coin: #feed78;
  --color-coin-accent: #c6ac00;
  --color-totem: linear-gradient( to top, rgb(75,68,60) 0%, rgb(105,68,26) 100%);
  --color-hollow: linear-gradient(to left, rgba(255,255,255,0) 32%,#382c1f 33%,#382c1f 66%,rgba(255,255,255,0) 67%);
  --color-grass: linear-gradient(to top, rgb(110,174,160) 0%, rgb(85,146,132) 100%);
  --color-grass-bright:  linear-gradient(to top, rgb(110,174,160) 0%, rgb(105,160,148) 100%);
}

*,
*:before,
*:after{
  box-sizing:border-box;
}


html {
  background: var(--color-land);
  overflow: hidden;
}

.iso_name{
  display: block;
  text-align: center;
  padding: 18px;
  position: absolute;
  width: 100%;
  color: white;
  font-family: monospace;
  font-size: 20px;
  text-shadow: 1px 1px 1px #3d695f;
}
.isometric-scene{
  position: relative;
  height: 100vh;
  width: 100%;
  transition: transform 600ms ease;
  transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
  -webkit-transform-origin: 50% 50%;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  animation: worldCamera 10s linear infinite;

}


.item {
  position: absolute;
  left: calc(50% - var(--item-half-width));
  top: calc(50% - var(--item-half-height));
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}

.item:before,
.item:after{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  outline: 1px solid transparent;
}


.outer-land {
  width: 300px;
  height: 300px;
  background: rgba(0, 171, 224, 0.13);
  --item-half-width: 150px;
  --item-half-height: 150px;
  border-radius: var(--border-circular);
  background-image: var(--color-grass);
}

.inner-land {
  width: 128px;
  height: 128px;
  --item-half-width: 64px;
  --item-half-height: 64px;
  background: rgba(0, 171, 224, 0.34);
  border-radius: var(--border-soft);
  background-image: var(--color-grass-bright);

}

.cloud {
  width: 48px;
  height: 48px;
  --item-half-width: 24px;
  --item-half-height: 24px;
  border-radius: var(--border-circular);
  background: var(--color-cloud);
  animation: cloudOrbit 30s linear infinite;
}

.cloud:before,
.cloud:after {
  border-radius: var(--border-circular);
  background: var(--color-cloud);
}

.cloud:before{
  transform: translate3d(-13px,8px,0) scale(.6,.6);
  animation-direction: alternate;
}

.cloud:after {

  transform: translate3d(13px,-8px,0) scale(.6,.6);
  animation-direction: alternate;
}

.totem{
  width: 64px;
  height: 64px;
  --item-half-width: 32px;
  --item-half-height: 32px;
}

.totem:after {
  border-radius: var(--border-soft);
  transform-style: preserve-3d;
  background-image: var(--color-totem);
  border-bottom: 8px solid transparent;
  
  background-size: 100% 120%; /* Intardansing hack to fix weird case of transparent border not appearning transparent over linear-gradient background. More info: https://css-tricks.com/forums/topic/css3-gradients-and-transparent-borders/
  */
  border-image: var(--color-hollow) 8 stretch;
}

.shuriken,
.shuriken:before{
    width: 20px;
  height: 20px;
  --item-half-width: 10px;
  --item-half-height: 10px;
  border-radius: var(--border-soft);
  background: var(--color-shuriken);
  animation: shurikenSpin 4s var(--acceleration-default) infinite;
  animation-direction: alternate;

}
.shuriken:before{
  border-radius: 0;
  transform: scaleY(1.15) rotateZ(45deg);
  animation: none;
}

.coin,
.coin:after,
.coin:before{
  width: 20px;
  height: 20px;
  --item-half-width: 12px;
  --item-half-height: 12px;
  border-radius: var(--border-circular);
  background: var(--color-coin-accent);
}

.coin{
  animation: coinJump 4s var(--acceleration-back) infinite;
}

.coin:before{
  background: var(--color-coin-accent);
  box-shadow: var(--gold-shadow);
  transform: scale(0,0);
   animation: coinScale 4s ease infinite;
}


.coin:after{
  background: var(--color-coin);
  transform: translate3d(-3px,-3px,0);
}

@keyframes cloudOrbit {
  0%{
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  100%{
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

@keyframes shurikenSpin {
  0% {
    transform: translate3d(0, 0, 0) rotateZ(0) scale(0.5,0.5);
    opacity: 0;
  }
  6%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  14% {
    transform: translate3d(0, 64px, 0) rotateZ(0);
  
  }
  28% {
    transform: translate3d(64px, 64px, 0) rotateZ(360deg);

  }
  42% {
    transform: translate3d(64px, -64px, 0) rotateZ(0);
  }
  56% {
    transform: translate3d(-64px, -64px, 0) rotateZ(180deg);
  }
  70% {
    transform: translate3d(-64px, 64px, 0) rotateZ(360deg);
  }
  84% {
    transform: translate3d(0, 64px, 0) rotateZ(0);

  }
  90%{
    opacity: 1;
  }
  94%{
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) rotateZ(0) scale(0.5,0.5);
    opacity: 0;
  }
}

@keyframes coinJump {
  0%,
  90%,
  100%{
    transform: translate3d(0,0,0) scale(1,1);
  }
  94%{
    transform: translate3d(-5px,-5px,0) scale(1.25,1.23);
  }
}

@keyframes coinScale {
  0%,
  90%{
    transform: scale(0,0);
    opacity:1;
  }
  96%{
    transform: scale(1.5,1.5);
    opacity:1;
  }
  100%{
    transform: scale(2.5,2.5);
    opacity:0;
  }
}