CSS quests

@top: #b9dd70;
@front: #83d281;
@side: #6aaf96;
body {
  min-height: 100vh;
  background: linear-gradient(to bottom, #cee7d4 0%, #f5f4c9 100%);
  overflow: hidden;
}

.cube {
  width: 20px;
  height: 20px;
  transform-origin: 0 0;
}

.cactus {
  position: relative;
  top: 20%;
  left: 350px;
  width: 100px;
  height: 300px;
}

.middle {
  position: absolute;
  top: 0;
  left: 20px;
}

.fork {
  position: absolute;
  top: 25px;
  left: 37px;
}

.fork-left {
  position: absolute;
  top: 80px;
  left: 3px;
}

.right {
  position: absolute;
  top: 0px;
  left: 54px;
}

.left {
  position: absolute;
  left: -14px;
  top: 70px;
}

.top {
  background-color: @top;
  transform: rotate(210deg) skew(-30deg) scaleY(0.864);
}

.front {
  height: 160px;
  background: @front;
  transform: rotate(-30deg) skewX(-30deg) translate(0, -17px) scaleY(0.864);
}

.side {
  width: 160px;
  background: @side;
  transform: rotate(90deg) skewX(-30deg) scaleY(0.864) translate(-180px, 0);
}

.fork {
  .front {
    height: 25px;
  }
}

.right {
  .front {
    height: 40px;
  }
  .side {
    width: 40px;
    transform: rotate(90deg) skewX(-30deg) scaleY(0.864) translate(-60px, 0);
  }
}

.fork-left {
  .front {
    height: 25px;
  }
}

.left {
  .front {
    height: 45px;
  }
  .side {
    width: 45px;
    transform: rotate(90deg) skewX(-30deg) scaleY(0.864) translate(-65px, 0);
  }
}

.shadow {
  position: absolute;
  left: -70px;
  top: 96px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
  width: 20px;
  height: 200px;
  transform: rotate(210deg) skew(-30deg) scaleY(0.864);
}