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

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: radial-gradient(#ddf7e3 0vmin, #9fe8b0 60vmin);
}

div.shamrock-shake {
  width: 100vmin;
  height: 110vmin;
  display: flex;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(-95deg, transparent 0vmin, transparent 4vmin, #c9f2d2 4vmin, #c9f2d2 7vmin, transparent 7vmin) calc(-5vmin + 34vmin) calc(-5vmin + 42vmin)/10vmin 45vmin no-repeat, linear-gradient(15deg, #c9f2d2 0vmin, #c9f2d2 5vmin, transparent 5vmin) calc(-5vmin + 42vmin) calc(-5vmin + 67vmin)/40vmin 20vmin no-repeat, linear-gradient(-165deg, #9fe8b0 0vmin, #9fe8b0 7vmin, transparent 7vmin) calc(-5vmin + 32vmin) calc(-5vmin + 40vmin)/40vmin 20vmin no-repeat, linear-gradient(95deg, transparent 0vmin, transparent 4vmin, #9fe8b0 4vmin, #a8eab7 7vmin, transparent 7vmin) calc(-5vmin + 68vmin) calc(-5vmin + 40vmin)/10vmin 50vmin no-repeat, linear-gradient(0deg, #b4edc1 0vmin, #b4edc1 3vmin) calc(-5vmin + 44vmin) calc(-5vmin + 40vmin)/20vmin 50vmin no-repeat, linear-gradient(-95deg, #b4edc1 0vmin, #b4edc1 10vmin, transparent 3vmin) calc(-5vmin + 25vmin) calc(-5vmin + 40vmin)/20vmin 50vmin no-repeat, linear-gradient(95deg, #b4edc1 0vmin, #b4edc1 10vmin, transparent 3vmin) calc(-5vmin + 65vmin) calc(-5vmin + 40vmin)/20vmin 50vmin no-repeat, linear-gradient(-95deg, transparent 0vmin, transparent 4vmin, #c9f2d2 4vmin, #c9f2d2 7vmin, transparent 7vmin) calc(-5vmin + 37vmin) calc(-5vmin + 63vmin)/10vmin 45vmin no-repeat, linear-gradient(95deg, transparent 0vmin, transparent 4.5vmin, #9fe8b0 4.5vmin, #a8eab7 7vmin, transparent 7vmin) calc(-5vmin + 65vmin) calc(-5vmin + 60vmin)/10vmin 50vmin no-repeat, linear-gradient(0deg, #b4edc1 0vmin, #b4edc1 3vmin) calc(-5vmin + 45vmin) calc(-5vmin + 40vmin)/20vmin 70vmin no-repeat, linear-gradient(-95deg, #b4edc1 0vmin, #b4edc1 10vmin, transparent 3vmin) calc(-5vmin + 27vmin) calc(-5vmin + 50vmin)/20vmin 60vmin no-repeat, linear-gradient(95deg, #b4edc1 0vmin, #b4edc1 10vmin, transparent 3vmin) calc(-5vmin + 63vmin) calc(-5vmin + 50vmin)/20vmin 60vmin no-repeat, linear-gradient(-98deg, transparent 0vmin, transparent 4vmin, #d2ddd2 4vmin, #d2ddd2 5vmin, #ec4e51 5vmin, #ec4e51 6vmin, #d2ddd2 6vmin, #d2ddd2 7vmin, transparent 7vmin) calc(-5vmin + 39vmin) calc(-5vmin + 22vmin)/10vmin 45vmin no-repeat, radial-gradient(ellipse at bottom, #f2fcf4 10vmin, #c9f2d2 15vmin, transparent 1vmin) calc(-5vmin + 30vmin) calc(-5vmin + 23vmin)/50vmin 12vmin no-repeat, radial-gradient(ellipse at bottom, #f2fcf4 15vmin, #c9f2d2 20vmin, transparent 1vmin) calc(-5vmin + 30vmin) calc(-5vmin + 29vmin)/50vmin 12vmin no-repeat, radial-gradient(ellipse, #ee6568 2vmin, #ea373a 4vmin, transparent 1vmin) calc(-5vmin + 52vmin) calc(-5vmin + 19vmin)/18vmin 18vmin no-repeat, radial-gradient(ellipse, #76de8e 0vmin, transparent 30vmin) calc(-5vmin + 30vmin) calc(-5vmin + 101vmin)/50vmin 12vmin no-repeat;
}

div.shamrock-shake:after {
  content: "";
  display: block;
  position: absolute;
  width: 27vmin;
  height: 27vmin;
  top: 36vmin;
  left: 36vmin;
  z-index: 99;
  background: radial-gradient(ellipse 3vmin 16.9vmin at 25% 100%, #b4edc1 99.5%, transparent 100%) 1.8vmin 0/27vmin 27vmin no-repeat, radial-gradient(ellipse 3vmin 16.9vmin at 75% 100%, #b4edc1 99.5%, transparent 100%) -1.8vmin 0/27vmin 27vmin no-repeat, radial-gradient(ellipse 6.8vmin 18.7vmin at 25% 100%, #ffbc09 99.5%, transparent 100%) 1.8vmin 0/27vmin 27vmin no-repeat, radial-gradient(ellipse 6.8vmin 18.7vmin at 75% 100%, #ffbc09 99.5%, transparent 100%) -1.8vmin 0/27vmin 27vmin no-repeat;
}