body{
  background-color: grey;
}
.lavaLamp::before{
  content: '';
  position: absolute;
  width: 20vh;
  height: 9vh;
  bottom: -1vh;
  left: 0;
  border-radius: 100%;
  background-color: rgba(0,0,0,.8);
  -webkit-filter: blur(2vh);
          filter: blur(2vh);
  -webkit-transform: scaleY(.3);
          transform: scaleY(.3);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}
.lavaLamp::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(-90deg, rgba(255,255,255,0), rgba(255,255,255,.3) 8%, rgba(255,255,255,0), rgba(255,255,255,.4) 100%);
  border-radius: 10vh 10vh 5vh 5vh;
}
.lavaLamp{
  position: absolute;
  width: 14vh;
  height: 40vh;
  top: 50%;
  left: 50%;
  margin-top: -20vh;
  margin-left: -7vh;
  background-color: #1a1a1a;
  border-radius: 10vh 10vh 5vh 5vh;
  box-shadow: 0 0 0 rgba(255,255,255,0);
  -webkit-transform: scaleX(1) scaleY(1);
          transform: scaleX(1) scaleY(1);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  transition: all 300ms ease-in-out 0s;
  -webkit-animation-name: lavaJump;
          animation-name: lavaJump;
  -webkit-animation-duration: 800ms;
          animation-duration: 800ms;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.lavaLamp:hover{
  box-shadow: 0 0 10vh rgba(255,255,255,1);
  transition: all 300ms ease-in-out 0s;
}
.lavaDiv{
  position: absolute;
  width: 100%;
  height: 60%;
  top: 26%;
  left: 0;
  background-color: #74279d;
  overflow: hidden;
}
.lavaDiv .innerLava{
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  background-color: #74279d;
  -webkit-filter: blur(.2vh) contrast(100%) brightness(1500%) hue-rotate(30deg);
          filter: blur(.2vh) contrast(100%) brightness(1500%) hue-rotate(30deg);
  transition: all 500ms ease-in-out 0s;
  image-rendering: crisp-edges;
}
.innerLava .innerLava{
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  -webkit-filter: blur(2vh) contrast(500%) brightness(15000%);
          filter: blur(2vh) contrast(500%) brightness(15000%);
}
.lavaDiv .floorDiv, .lavaDiv .ceilDiv{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background-color: #900101;
}
.lavaDiv .ceilDiv{
  top: 70%;
}
.lavaDiv .bubbleDiv{
  position: absolute;
  top: 100%;
  left: 30%;
  width: 15%;
  height: 15%;
  border-radius: 100%;
  background-color: #900101;
  -webkit-animation-name: bubbleAnim;
          animation-name: bubbleAnim;
  -webkit-animation-duration: 6000ms;
          animation-duration: 6000ms;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;;
  -webkit-animation-delay: 0s;;
          animation-delay: 0s;
}
.lavaDiv div:nth-of-type(4){
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
  left: 50%;
}
.lavaDiv div:nth-of-type(5){
  -webkit-animation-delay: 2000ms;
          animation-delay: 2000ms;
  width: 20%;
  height: 20%;
}
@-webkit-keyframes bubbleAnim{
  0%{top: 80%;}
  100%{top: -20%;}
}
@keyframes bubbleAnim{
  0%{top: 80%;}
  100%{top: -20%;}
}
@-webkit-keyframes lavaJump{
  0%{-webkit-transform: scaleX(1) scaleY(1);transform: scaleX(1) scaleY(1);}
  20%{-webkit-transform: scaleX(1.03) scaleY(.96);transform: scaleX(1.03) scaleY(.96);}
  40%{-webkit-transform: scaleX(.9) scaleY(1.08);transform: scaleX(.9) scaleY(1.08);}
  60%{-webkit-transform: scaleX(1.05) scaleY(.94);transform: scaleX(1.05) scaleY(.94);}
  85%{-webkit-transform: scaleX(.96) scaleY(1.03);transform: scaleX(.96) scaleY(1.03);}
  100%{-webkit-transform: scaleX(1) scaleY(1);transform: scaleX(1) scaleY(1);}
}
@keyframes lavaJump{
  0%{-webkit-transform: scaleX(1) scaleY(1);transform: scaleX(1) scaleY(1);}
  20%{-webkit-transform: scaleX(1.03) scaleY(.96);transform: scaleX(1.03) scaleY(.96);}
  40%{-webkit-transform: scaleX(.9) scaleY(1.08);transform: scaleX(.9) scaleY(1.08);}
  60%{-webkit-transform: scaleX(1.05) scaleY(.94);transform: scaleX(1.05) scaleY(.94);}
  85%{-webkit-transform: scaleX(.96) scaleY(1.03);transform: scaleX(.96) scaleY(1.03);}
  100%{-webkit-transform: scaleX(1) scaleY(1);transform: scaleX(1) scaleY(1);}
}