* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	outline: 1px solid rgba(255,255,255,0);
	-webkit-tap-highlight-color: rgba(255,255,255,0);
  }
  
  *:before,
  *:after{
   content: '';
   display: block;
   position: absolute;
  }
  
  html, body {
	width: 100vw;
	height: 100vh;
	background: rgba(27,24,32,1);
  }
  
  body{
	width: 600px;
	height: 480px;
	margin: calc(50vh - 240px) auto 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: bottom;
	border-radius: 50%;
	animation: shake 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) infinite;
	overflow: hidden;
  }
  
  @keyframes shake{
	0%{
	  transform: translateY(-1%);
	opacity: 1;
	}
	50%{
	  transform: translateY(0%) scaleY(1.08) scaleX(.98) rotateX(-10deg);
	  opacity: .89;
	}
	100%{
	  transform: translateY(-1%);
		opacity: 1;
	}
  }
  
  body:before,
  body:after{
	z-index: 2;
	width: 13px;
	height: 34px;
	background: #e79926;
	transform: translateY(-100%);
	border-radius: 50%;
	will-change: border-radius;
	opacity: 0;
  }
  
  body:before{
	animation: flameLeft 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) infinite;
	width: 21px;
	animation-delay: 0s;
	box-shadow: 0px -5px 0px 0 rgba(255,255,255,.13);
  }
  
  body:after{
	animation: flameRight 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) infinite;
	animation-delay: .28s;
	box-shadow: 0px -5px 0px 0 rgba(255,255,255,.13);
  }
  
  @keyframes flameLeft{
	0%{
	  transform: translateY(-100%) scaleX(.55) scaleY(.34) rotateZ(13deg);
	  opacity: 0;
	  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	}
	21%{
	  opacity: 1;
	  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	}
	67%,100%{
	  transform: translateX(-150%) translateY(-200%) rotateZ(-34deg);
	  opacity: 0;
	  border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
	}
  }
  
  @keyframes flameRight{
	0%{
	  transform: translateY(-100%) scaleX(2) scaleY(.34) rotateZ(-13deg);
	  opacity: 0;
	  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	}
	21%{
	  opacity: 1;
	  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	}
	55%,100%{
	  transform: translateX(100%) translateY(-200%) rotateZ(34deg);
	  opacity: 0;
	  border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
	}
  }
  
  .volcano{
	width: 144px;
	height: 89px;
	position: relative;
	background: #49494b;
	background-image: radial-gradient(ellipse at center, rgba(205, 67, 0,0) 55%,rgba(205,67,0,.21) 89%);
	border-radius: 50%;
	 box-shadow: inset 0px 34px 0px 0px rgba(0,0,0,0.13), inset 0px -13px 0px 0px rgba(51,51,59,1), 0px 2px 0px 0px rgba(0,0,0,.34), inset 0px -15px 0px 0px rgba(255,255,255,.03), inset 0px -14px 0px 0px rgba(0,0,0,1), 0px 13px 0px 8px rgba(0,0,0,.55), 0px 15px 0px 8px rgba(255,255,255,.21), 0px 30px 0px 21px rgba(48,47,54,1), 0px 32px 0px 21px rgba(0,0,0,1);
  }
  
  .volcano:before{
	width: 100%;
	height: 100%;
	top: -34px; 
	background-color: #e79926;
	  background-image: radial-gradient(ellipse at center, rgba(205, 67, 0,0) 55%,rgb(255, 83, 0) 100%);
	border-radius: 50%;
	transform: scaleY(.55) scaleX(.67);
	transform-origin: bottom;
	  animation: spin 1s linear infinite;
	box-shadow: inset 0px 5px 1px 0px rgba(0,0,0,.21), 0px 5px 89px 5px rgba(118, 72, 2, .55);
  }
  
  @keyframes spin{
	0%{
	  transform: scaleY(.55) scaleX(.67);
	}
	8%{
  transform: scaleY(.55) scaleX(.67) translateY(1px) skewX(2deg);
	}
	100%{
	  transform: scaleY(.55) scaleX(.67);
	}
  }
  
  .volcano:after{
	width: 17%;
	height: 21%;
	left: 25%;
	top: 25%;
	background: rgb(105, 61, 7);
	background-image: linear-gradient(to top, rgba(173,0,0,.21) 0%, rgba(173,0,0,.13) 55%, rgba(173,0,0,.34) 100%);
	transform: scaleY(.67) scaleX(.67);
	border-radius: 68% 32% 31% 69% / 51% 49% 51% 49%;
	animation: stone 4s cubic-bezier(0.175, 0.885, 0.320, 1.275) infinite ;
	box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0,1);
  }
  
  @keyframes stone{
	0%{
	  transform: translateY(34%) scaleY(.67) scaleX(.89) rotatez(34deg);
	}
	21%{
	  transform: translateY(40%) scaleY(.62) scaleX(.83) rotatez(21deg);
	}
	100%{
	  transform: translateY(34%) scaleY(.67) scaleX(.89) rotatez(34deg);
	}
  }
  
  @media screen and (max-width: 480px){
	body{
	width: 300px;
	height: 240px;
	margin: calc(50vh - 120px) auto 0 auto;
	}
  }