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

html {
  font-size: 100%;
}

body {
  font-family: sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

.main {
  width: 400px;
  -webkit-filter: drop-shadow(0px 40px 40px rgba(82, 115, 78, 0.4));
          filter: drop-shadow(0px 40px 40px rgba(82, 115, 78, 0.4));
}

.scene {
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);
          transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);
}

.plant {
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin 30s linear infinite;
          animation: spin 30s linear infinite;
  will-change: transform;
}

.shadow {
  position: absolute;
  bottom: 0;
  left: calc(50% - 25%);
  width: 50%;
  height: 50%;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: rotateX(90deg) translateX(0%) translateY(50%) translateZ(1vmin);
          transform: rotateX(90deg) translateX(0%) translateY(50%) translateZ(1vmin);
  border-radius: 50%;
}
.shadow:before, .shadow:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: inherit;
}
.shadow:before {
  -webkit-filter: blur(16px);
          filter: blur(16px);
  width: 100%;
  height: 100%;
  background: linear-gradient(#1B502F, #52734E);
  opacity: .25;
}
.shadow:after {
  -webkit-filter: blur(20px);
          filter: blur(20px);
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
  background: linear-gradient(black, black);
  opacity: .9;
}

:root.safari .img {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.img {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  z-index: 2;
  z-index: 3;
  z-index: 4;
  z-index: 5;
  z-index: 6;
  z-index: 7;
  z-index: 8;
  z-index: 9;
  z-index: 10;
  z-index: 11;
  z-index: 12;
  z-index: 13;
  z-index: 14;
  z-index: 15;
  z-index: 16;
  z-index: 17;
  z-index: 18;
  z-index: 19;
  z-index: 20;
  z-index: 21;
  z-index: 22;
  z-index: 23;
  z-index: 24;
  z-index: 25;
  z-index: 26;
  z-index: 27;
  z-index: 28;
  z-index: 29;
  z-index: 30;
  z-index: 31;
  z-index: 32;
}
.img:nth-of-type(1) {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
.img .img__content {
  -webkit-animation-delay: -0.2s !important;
          animation-delay: -0.2s !important;
}
.img:nth-of-type(2) {
  -webkit-transform: rotateY(11.25deg);
          transform: rotateY(11.25deg);
}
.img .img__content {
  -webkit-animation-delay: -0.4s !important;
          animation-delay: -0.4s !important;
}
.img:nth-of-type(3) {
  -webkit-transform: rotateY(22.5deg);
          transform: rotateY(22.5deg);
}
.img .img__content {
  -webkit-animation-delay: -0.6s !important;
          animation-delay: -0.6s !important;
}
.img:nth-of-type(4) {
  -webkit-transform: rotateY(33.75deg);
          transform: rotateY(33.75deg);
}
.img .img__content {
  -webkit-animation-delay: -0.8s !important;
          animation-delay: -0.8s !important;
}
.img:nth-of-type(5) {
  -webkit-transform: rotateY(45deg);
          transform: rotateY(45deg);
}
.img .img__content {
  -webkit-animation-delay: -1s !important;
          animation-delay: -1s !important;
}
.img:nth-of-type(6) {
  -webkit-transform: rotateY(56.25deg);
          transform: rotateY(56.25deg);
}
.img .img__content {
  -webkit-animation-delay: -1.2s !important;
          animation-delay: -1.2s !important;
}
.img:nth-of-type(7) {
  -webkit-transform: rotateY(67.5deg);
          transform: rotateY(67.5deg);
}
.img .img__content {
  -webkit-animation-delay: -1.4s !important;
          animation-delay: -1.4s !important;
}
.img:nth-of-type(8) {
  -webkit-transform: rotateY(78.75deg);
          transform: rotateY(78.75deg);
}
.img .img__content {
  -webkit-animation-delay: -1.6s !important;
          animation-delay: -1.6s !important;
}
.img:nth-of-type(9) {
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
}
.img .img__content {
  -webkit-animation-delay: -1.8s !important;
          animation-delay: -1.8s !important;
}
.img:nth-of-type(10) {
  -webkit-transform: rotateY(101.25deg);
          transform: rotateY(101.25deg);
}
.img .img__content {
  -webkit-animation-delay: -2s !important;
          animation-delay: -2s !important;
}
.img:nth-of-type(11) {
  -webkit-transform: rotateY(112.5deg);
          transform: rotateY(112.5deg);
}
.img .img__content {
  -webkit-animation-delay: -2.2s !important;
          animation-delay: -2.2s !important;
}
.img:nth-of-type(12) {
  -webkit-transform: rotateY(123.75deg);
          transform: rotateY(123.75deg);
}
.img .img__content {
  -webkit-animation-delay: -2.4s !important;
          animation-delay: -2.4s !important;
}
.img:nth-of-type(13) {
  -webkit-transform: rotateY(135deg);
          transform: rotateY(135deg);
}
.img .img__content {
  -webkit-animation-delay: -2.6s !important;
          animation-delay: -2.6s !important;
}
.img:nth-of-type(14) {
  -webkit-transform: rotateY(146.25deg);
          transform: rotateY(146.25deg);
}
.img .img__content {
  -webkit-animation-delay: -2.8s !important;
          animation-delay: -2.8s !important;
}
.img:nth-of-type(15) {
  -webkit-transform: rotateY(157.5deg);
          transform: rotateY(157.5deg);
}
.img .img__content {
  -webkit-animation-delay: -3s !important;
          animation-delay: -3s !important;
}
.img:nth-of-type(16) {
  -webkit-transform: rotateY(168.75deg);
          transform: rotateY(168.75deg);
}
.img .img__content {
  -webkit-animation-delay: -3.2s !important;
          animation-delay: -3.2s !important;
}
.img:nth-of-type(17) {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.img .img__content {
  -webkit-animation-delay: -3.4s !important;
          animation-delay: -3.4s !important;
}
.img:nth-of-type(18) {
  -webkit-transform: rotateY(191.25deg);
          transform: rotateY(191.25deg);
}
.img .img__content {
  -webkit-animation-delay: -3.6s !important;
          animation-delay: -3.6s !important;
}
.img:nth-of-type(19) {
  -webkit-transform: rotateY(202.5deg);
          transform: rotateY(202.5deg);
}
.img .img__content {
  -webkit-animation-delay: -3.8s !important;
          animation-delay: -3.8s !important;
}
.img:nth-of-type(20) {
  -webkit-transform: rotateY(213.75deg);
          transform: rotateY(213.75deg);
}
.img .img__content {
  -webkit-animation-delay: -4s !important;
          animation-delay: -4s !important;
}
.img:nth-of-type(21) {
  -webkit-transform: rotateY(225deg);
          transform: rotateY(225deg);
}
.img .img__content {
  -webkit-animation-delay: -4.2s !important;
          animation-delay: -4.2s !important;
}
.img:nth-of-type(22) {
  -webkit-transform: rotateY(236.25deg);
          transform: rotateY(236.25deg);
}
.img .img__content {
  -webkit-animation-delay: -4.4s !important;
          animation-delay: -4.4s !important;
}
.img:nth-of-type(23) {
  -webkit-transform: rotateY(247.5deg);
          transform: rotateY(247.5deg);
}
.img .img__content {
  -webkit-animation-delay: -4.6s !important;
          animation-delay: -4.6s !important;
}
.img:nth-of-type(24) {
  -webkit-transform: rotateY(258.75deg);
          transform: rotateY(258.75deg);
}
.img .img__content {
  -webkit-animation-delay: -4.8s !important;
          animation-delay: -4.8s !important;
}
.img:nth-of-type(25) {
  -webkit-transform: rotateY(270deg);
          transform: rotateY(270deg);
}
.img .img__content {
  -webkit-animation-delay: -5s !important;
          animation-delay: -5s !important;
}
.img:nth-of-type(26) {
  -webkit-transform: rotateY(281.25deg);
          transform: rotateY(281.25deg);
}
.img .img__content {
  -webkit-animation-delay: -5.2s !important;
          animation-delay: -5.2s !important;
}
.img:nth-of-type(27) {
  -webkit-transform: rotateY(292.5deg);
          transform: rotateY(292.5deg);
}
.img .img__content {
  -webkit-animation-delay: -5.4s !important;
          animation-delay: -5.4s !important;
}
.img:nth-of-type(28) {
  -webkit-transform: rotateY(303.75deg);
          transform: rotateY(303.75deg);
}
.img .img__content {
  -webkit-animation-delay: -5.6s !important;
          animation-delay: -5.6s !important;
}
.img:nth-of-type(29) {
  -webkit-transform: rotateY(315deg);
          transform: rotateY(315deg);
}
.img .img__content {
  -webkit-animation-delay: -5.8s !important;
          animation-delay: -5.8s !important;
}
.img:nth-of-type(30) {
  -webkit-transform: rotateY(326.25deg);
          transform: rotateY(326.25deg);
}
.img .img__content {
  -webkit-animation-delay: -6s !important;
          animation-delay: -6s !important;
}
.img:nth-of-type(31) {
  -webkit-transform: rotateY(337.5deg);
          transform: rotateY(337.5deg);
}
.img .img__content {
  -webkit-animation-delay: -6.2s !important;
          animation-delay: -6.2s !important;
}
.img:nth-of-type(32) {
  -webkit-transform: rotateY(348.75deg);
          transform: rotateY(348.75deg);
}
.img .img__content {
  -webkit-animation-delay: -6.4s !important;
          animation-delay: -6.4s !important;
}
.img:first-of-type {
  position: relative;
}
.img:nth-of-type(4n + 1) .img__content {
  -webkit-animation: wave 1s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: wave 1s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.img:nth-of-type(3n + 1) .img__content {
  opacity: .8;
}
.img:nth-of-type(2n) .img__content {
  display: none;
  opacity: .2;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotateY(-1turn);
            transform: rotateY(-1turn);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotateY(-1turn);
            transform: rotateY(-1turn);
  }
}
@-webkit-keyframes spin-shadow {
  to {
    -webkit-transform: rotateZ(1turn);
            transform: rotateZ(1turn);
  }
}
@keyframes spin-shadow {
  to {
    -webkit-transform: rotateZ(1turn);
            transform: rotateZ(1turn);
  }
}
@-webkit-keyframes wave {
  0% {
    -webkit-transform: skewY(-2deg);
            transform: skewY(-2deg);
  }
  100% {
    -webkit-transform: skewY(2deg);
            transform: skewY(2deg);
  }
}
@keyframes wave {
  0% {
    -webkit-transform: skewY(-2deg);
            transform: skewY(-2deg);
  }
  100% {
    -webkit-transform: skewY(2deg);
            transform: skewY(2deg);
  }
}