body, html {
	padding: 0;
	margin: 0;
}

.forest {
	position: relative;
	overflow: hidden;
	height: 600px; width: 800px;
	background: #11012b;
}

.forest:before {
		content: '';
		position: absolute;
		top: 54px; left: 145px;
		width: 500px; height: 500px;
		border-radius: 50%;
		background-image: linear-gradient(180deg, #1e003f 83%, transparent 83%);
	}

.forest *, .forest *:after, .forest *:before {
		content: '';
		position: absolute;
	}

.tree0 {
	top: 97px; left: 393px;
	width: 14px;
	border-radius: 100% 100% 0 0;
	border-bottom: 380px solid #160036;
	border-right: 11px solid transparent;
	border-left: 11px solid transparent;
}

.tree0:before {
		top: -6px; left: 15px;
		width: 132px; height: 111px;
		border-radius: 0 0 100% 0;
		border-bottom: 30px solid #160036;
		border-right: 14px solid #160036;
	}

.tree0:after {
		top: -6px; left: -147px;
		width: 132px; height: 111px;
		border-radius: 0 0 0 100%;
		border-bottom: 30px solid #160036;
		border-left: 14px solid #160036;
	}
.tree1 {
	top: 60px; left: 238px;
	width: 42px;
	border-bottom: 420px solid #0c002b;
	border-right: 14px solid transparent;
}
.tree1:before {
		top: -10px; left: 43px;
		width: 37px; height: 61px;
		border-radius: 0 0 100% 0;
		border-bottom: 36px solid #0c002b;
		border-right: 22px solid #0c002b;
	}
.tree1:after {
		top: 90px; left: -78px;
		width: 56px; height: 80px;
		border-radius: 0 0 0 100%;
		border-bottom: 36px solid #0c002b;
		border-left: 22px solid #0c002b;
	}
.tree2 {
	top: 50px; left: 427px;
	width: 39px;
	border-bottom: 430px solid #0c002b;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
}
.tree2:before {
		top: 222px; left: -285px;
		width: 16px;
		border-radius: 20px 20px 0 0;
		border-bottom: 200px solid #0c002b;
		border-right: 11px solid transparent;
		border-left: 11px solid transparent;
	}
.tree2:after {
		top: 0px; left: -83px;
		width: 10px;
		border-bottom: 460px solid #160036;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
	}
.tree3 {
	position: absolute;
	top: 120px;
	left: 575px;
	width: 18px;
	border-bottom: 360px solid #0c002b;
	border-right: 11px solid transparent;
	border-left: 11px solid transparent;
}
.tree3:before {
		content: '';
		position: absolute;
		top: -50px;
		left: -73px;
		width: 70px;
		height: 156px;
		border-radius: 0 0 0 110px;
		border-bottom: 40px solid #0c002b;
		border-left: 18px solid #0c002b;
	}

.skewer {
	top: 194px; left: 223px;
	width: 17px; height: 60px;
	border-radius: 10px;
	background: #3d3543;
	box-shadow: 0 38px #56565a, 0 64px #56565a, 327px 0 #3d3543, 327px 38px #56565a, 327px 64px #56565a;
}

.skewer:before {
		top: 121px; left: 3px;
		width: 11px; height: 156px;
		background: #babac2;
		box-shadow: 328px 0 #babac2;
	}

.skewer:after {
		top: 191px; left: 342px;
		width: 40px; height: 15px;
		border-radius: 0 0 20px 0;
		background: #948f9f;
		transform-origin: top left;
		transform: skewY(65deg);
	}

.skewer > div:nth-child(1) {
		top: 29px; left: 17px;
		width: 311px; height: 10px;
		background: #babac2;
	}

.skewer > div:nth-child(3) {
		top: 11px; left: 63px;
		width: 45px; height: 6px;
		border-radius: 4px;
		background: #a9a8af;
		box-shadow: 185px 44px #a9a8af;
		z-index: 1;
	}

.skewer > div:nth-child(3):after {
			content: '';
			position: absolute;
			top: 0;
			left: -8px;
			height: 18px;
			width: 7px;
			background: #a9a8af;
			transform: skewX(-40deg);
		}

.skewer > div:nth-child(3):before {
			content: '';
			position: absolute;
			top: 28px;
			left: 231px;
			height: 22px;
			width: 7px;
			background: #a9a8af;
			transform: skewX(-40deg);
		}

.skewer > div:nth-child(4) {
		top: 51px; left: 78px;
		width: 30px; height: 6px;
		border-radius: 4px;
		background: #a9a8af;
		z-index: 1;
	}

.skewer > div:nth-child(4):before {
			top: -12px; left: -8px;
			height: 18px; width: 7px;
			background: #a9a8af;
			transform: skewX(45deg);
		}

.fire {
	top: 200px; left: 190px;
	width: 400px; height: 280px;
	overflow: hidden;
}

.fire:before {
		top: 74px; left: 68px;
		width: 273px; height: 273px;
		border-radius: 50%;
		background: red;
		box-shadow: inset 0 14px 0 37px #560000;
		opacity: 0.3;
		animation: fireBack 5s ease infinite;
	}

.fire > div:nth-child(1) {
		bottom: 0px; left: 137px;
		width: 26px; height: 80px;
		border-radius: 20px;
		background: #fc1244;
		transform-origin: bottom left;
		transform: rotate(-34deg) translateY(34px);
	}

.fire > div:nth-child(1):before {
			bottom: 0px; left: 0;
			width: 26px; height: 70px;
			border-radius: 20px;
			background: #fe6749;
			transform: translateY(13px);
		}

.fire > div:nth-child(2) {
		bottom: 0px; left: 142px;
		width: 26px; height: 80px;
		border-radius: 20px;
		background: #fc1244;
		animation: fire 1.5s -0.1s ease infinite;
	}

.fire > div:nth-child(2):before {
			bottom: 0px; left: 0;
			width: 26px; height: 70px;
			border-radius: 20px;
			background: #fe6749;
			animation: fire 1.5s -0.6s ease infinite;
		}

.fire > div:nth-child(2):after {
			bottom: 0px; left: 0;
			width: 26px; height: 70px;
			border-radius: 20px;
			background: #fea42a;
			animation: fire 1.5s -0.2s ease infinite;
		}

.fire > div:nth-child(3) {
		bottom: 0px; left: 169px;
		width: 26px; height: 110px;
		border-radius: 20px;
		background: #fc1244;
		animation: fire 1.5s -0.9s ease infinite;
	}

.fire > div:nth-child(3):before {
			bottom: 0px; left: 0;
			width: 26px; height: 70px;
			border-radius: 20px;
			background: #fe6749;
			animation: fire 1.5s -0.5s ease infinite;
		}

.fire > div:nth-child(3):after {
			bottom: 0px; left: 0;
			width: 26px; height: 70px;
			border-radius: 20px;
			background: #fea42a;
			animation: fire 1.5s -0.2s ease infinite;
		}

.fire > div:nth-child(4) {
		bottom: 0px; left: 196px;
		width: 26px; height: 110px;
		border-radius: 20px;
		background: #fc1244;
		animation: fire 1.5s -0.4s ease infinite;
	}

.fire > div:nth-child(4):before {
			bottom: 0px; left: 0;
			width: 26px; height: 70px;
			border-radius: 20px;
			background: #fe6749;
			animation: fire 1.5s -0.1s ease infinite;
		}

.fire > div:nth-child(4):after {
			bottom: 0px; left: 0;
			width: 26px; height: 70px;
			border-radius: 20px;
			background: #fea42a;
			animation: fire 1.5s -0.8s ease infinite;
		}

.fire > div:nth-child(5) {
		bottom: 0px; left: 222px;
		width: 26px; height: 110px;
		border-radius: 20px;
		background: #fc1244;
		animation: fire 1.5s -0.3s ease infinite;
	}

.fire > div:nth-child(5):before {
			bottom: 0px; left: 0;
			width: 26px; height: 70px;
			border-radius: 20px;
			background: #fe6749;
			animation: fire 1.5s -0.6s ease infinite;
		}

.fire > div:nth-child(5):after {
			bottom: 0px; left: 0;
			width: 26px; height: 70px;
			border-radius: 20px;
			background: #fea42a;
			animation: fire 1.5s ease infinite;
		}

.fire > div:nth-child(6) {
		bottom: 0px; left: 248px;
		width: 26px; height: 100px;
		border-radius: 20px;
		background: #fc1244;
		animation: fire 1.5s -0.7s ease infinite;
	}

.fire > div:nth-child(6):before {
			bottom: 0px; left: 0;
			width: 26px; height: 70px;
			border-radius: 20px;
			background: #fe6749;
			animation: fire 1.5s -0.2s ease infinite;
		}

.fire > div:nth-child(6):after {
			bottom: 0px; left: 0;
			width: 26px; height: 70px;
			border-radius: 20px;
			background: #fea42a;
			animation: fire 1.5s -0.5s ease infinite;
		}

.fire > div:nth-child(7) {
		bottom: 0px; left: 228px;
		width: 26px; height: 80px;
		border-radius: 20px;
		background: #fc1244;
		transform: translateY(40px) rotate(33deg);
		transform-origin: right bottom;
	}

.fire > div:nth-child(7):before {
			bottom: 0px; left: 0;
			width: 26px; height: 70px;
			border-radius: 20px;
			background: #fe6749;
			transform: translateY(6px);
		}

.log1 {
	top: 468px; left: 394px;
	width: 86px; height: 30px;
	border-radius: 20px;
	background: #7a3b28;
	box-shadow: inset 78px -9px 0 -30px #501219, inset 56px 0 0 #671d0e;
}

.log1:before {
		top: 11px; left: 67px;
		width: 8px; height: 8px;
		border-radius: 50%;
		background: #671d0e;
		box-shadow: 0 0 0 4px #813a2e, 0 0 0 7px #671d0e;
	}

.log1:after {
		top: 1px; left: -71px;
		width: 30px; height: 10px;
		border-radius: 10px;
		background: #7a3b28;
		transform-origin: bottom right;
		transform: rotate(43deg);
		box-shadow: inset -20px 0 0 0 #501219;
	}
.log2 {
	top: 465px; left: 306px;
	width: 102px; height: 32px;
	border-radius: 20px;
	background: #813a2e;
	box-shadow: inset -86px -20px 0 -30px #501219, inset -69px 0 #671d0e;
}
.log2:before {
		top: 12px; left: 13px;
		width: 8px; height: 8px;
		border-radius: 50%;
		background: #671d0e;
		box-shadow: 0 0 0 5px #813a2e, 0 0 0 8px #671d0e;
	}
.log2:after {
		top: 34px; left: 103px;
		width: 32px; height: 8px;
		border-radius: 8px;
		background: #813a2e;
		box-shadow: inset 24px 0 #501219;
		transform-origin: bottom left;
		transform: rotate(-2deg);
	}
.log3 {
	top: 458px; left: 409px;
	width: 56px; height: 30px;
	border-radius: 30px;
	background: #671d0e;
	box-shadow: inset 71px -5px 0 -35px #501219;
	transform-origin: bottom left;
	transform: rotate(-28deg);
}
.log3:after {
		top: -35px; left: -31px;
		width: 8px; height: 8px;
		border-radius: 50%;
		background: #671d0e;
		box-shadow: 0 0 0 5px #813a2e, 0 0 0 8px #671d0e;
	}
.log3:before {
		top: -45px; left: -24px;
		width: 32px; height: 70px;
		border-radius: 30px;
		background: #813a2e;
		box-shadow: inset 0 -37px #671d0e;
		transform-origin: bottom left;
		transform: rotate(-20deg);
	}
.log4 {
	top: 434px; left: 376px;
	width: 32px; height: 81px;
	border-radius: 30px;
	background: #813a2e;
	box-shadow: inset 0 50px #671d0e;
	transform-origin: top left;
	transform: rotate(-24deg);
}
.log4:before {
		top: 49px; left: -11px;
		width: 8px; height: 30px;
		border-radius: 8px;
		background: #813a2e;
		box-shadow: inset 0 -22px #671d0e;
		transform: rotate(-22deg);
	}
.log4:after {
		top: 62px; left: 12px;
		width: 8px; height: 8px;
		border-radius: 50%;
		background: #671d0e;
		box-shadow: 0 0 0 5px #813a2e, 0 0 0 8px #671d0e;
	}
	
.rock1 {
	top: 485px; left: 346px;
	width: 60px; height: 30px;
	border-radius: 30px 30px 2px 2px;
	background: #948f9f;
	overflow: hidden;
}
	
.rock1:before {
		top: -41px; left: -12px;
		width: 60px; height: 60px;
		border-radius: 50%;
		background: #babac2;
	}
	
.rock1:after {
		top: 10px; left: 35px;
		width: 30px; height: 30px;
		border-radius: 50%;
		background: #877c93;
	}
.rock2 {
	top: 496px; left: 386px;
	width: 39px; height: 21px;
	border-radius: 30px 30px 2px 2px;
	background: #5d4b4e;
}
.rock2:before {
		top: 37px; left: -101px;
		width: 28px; height: 17px;
		border-radius: 20px 20px 4px 4px;
		background: #5d4b4e;
	}
.rock2:after {
		top: 56px; left: -38px;
		width: 22px; height: 7px;
		border-radius: 50%;
		background: #000000;
	}
.rock3 {
	top: 537px; left: 442px;
	width: 24px; height: 13px;
	border-radius: 14px 14px 2px 2px;
	background: #3d3543;
	overflow: hidden;
}
.rock3:before {
		top: -10px; left: -2px;
		width: 20px; height: 20px;
		border-radius: 50%;
		background: #5d4b4e;
	}
.rock4 {
	top: 537px; left: 458px;
	width: 40px; height: 20px;
	border-radius: 20px 20px 2px 2px;
	background: #604c74;
	overflow: hidden;
}
.rock4:before {
		top: -25px; left: -7px;
		width: 40px; height: 40px;
		border-radius: 50%;
		background: #756581;
	}
.rock5 {
	top: 459px; left: 532px;
	width: 38px; height: 20px;
	border-radius: 20px 20px 2px 2px;
	background: #5d4b4e;
}

.shadows1 {
	top: 545px; left: 442px;
	width: 26px; height: 12px;
	border-radius: 50%;
	background: black;
}

.shadows1:before {
		top: 4px; left: 13px;
		width: 41px; height: 13px;
		border-radius: 50%;
		background: black;
	}

.shadows1:after {
		top: 7px; left: 155px;
		width: 20px; height: 7px;
		border-radius: 50%;
		background: black;
	}
.shadows2 {
	top: 526px; left: 527px;
	width: 43px; height: 10px;
	border-radius: 50%;
	background: black;
}
.shadows2:before {
		top: 3px; left: 23px;
		width: 24px; height: 20px;
		border-radius: 50%;
		background: black;
		transform: rotate(-34deg);
	}
.shadows2:after {
		top: -50px; left: 4px;
		width: 41px; height: 9px;
		border-radius: 50%;
		background: black;
	}
.shadows3 {
	top: 533px; left: 177px;
	width: 58px; height: 16px;
	border-radius: 50%;
	background: black;
}
.shadows3:before {
		top: 3px; left: 41px;
		width: 24px; height: 30px;
		border-radius: 50%;
		background: black;
		transform: rotate(-34deg);
	}
.shadows3:after {
		top: -62px; left: 31px;
		width: 47px; height: 8px;
		border-radius: 50%;
		background: black;
	}

.bunch1 {
	top: 500px; left: 567px;
	width: 59px; height: 30px;
	border-radius: 20px 20px 0 0;
	background: #390070;
}

.bunch1:before {
		top: -10px; left: 17px;
		width: 27px; height: 22px;
		border-radius: 50%;
		background: #390070;
	}

.bunch1:after {
		top: 19px; left: 43px;
		width: 11px; height: 20px;
		border-radius: 20px 0 0;
		background: #11012b;
	}

.bunch1 > div:nth-child(1) {
		top: 22px; left: 6px;
		width: 5px; height: 9px;
		border-radius: 100% 0 0 0;
		background: #11012b;
	}

.bunch1 > div:nth-child(1):before {
			top: 0; left: 5px;
			border-bottom: 9px solid #11012b;
			border-right: 16px solid transparent;
		}

.bunch1 > div:nth-child(1):after {
			top: -4px; left: 12px;
			width: 10px; height: 20px;
			border-radius: 0 30px 0 0;
			background: #11012b;
			transform-origin: top left;
			transform: rotate(-12deg);
		}

.bunch1 > div:nth-child(2) {
		top: 15px; left: 30px;
		width: 17px; height: 20px;
		border-radius: 0 100px 0 0;
		background: #11012b;
	}
.bunch2 {
	top: 471px; left: 138px;
	width: 98px; height: 29px;
	border-radius: 20px 20px 0 0;
	background: #390070;
}
.bunch2:before {
		top: -20px; left: 13px;
		width: 28px; height: 28px;
		border-radius: 50%;
		background: #390070;
		box-shadow: 44px 0 #390070, 23px -5px 0 2px #390070;
	}
.bunch2:after {
		top: 19px; left: 54px;
		width: 20px; height: 20px;
		border-radius: 0 0 16px 0;
		background: #0c002b;
		transform-origin: top right;
		transform: rotate(-30deg);
	}
.bunch2 > div:nth-child(1) {
		top: 16px; left: 17px;
		width: 20px; height: 40px;
		border-radius: 0 100% 0 0;
		background: #0c002b;
	}
.bunch2 > div:nth-child(1):before {
			top: -2px; left: 11px;
			width: 17px; height: 30px;
			border-radius: 0 100% 0 0;
			background: #0c002b;
		}
.bunch2 > div:nth-child(1):after {
			top: -4px; left: 17px;
			width: 20px; height: 30px;
			border-radius: 100% 0 0;
			background: #0c002b;
			box-shadow: 12px 3px #0c002b;
		}

.pig {
	top: 20px; left: 20px;
	z-index: 1;
}

.pig__body {
		top: -46px; left: 61px;
		width: 175px; height: 120px;
		border-radius: 50%;
		background-image: linear-gradient(0deg, #f45f87 20%, #ffb6ca 20%);
		box-shadow: inset -20px 73px 0 -40px #e895b6;
	}

.pig__body:before {
			top: 50px; left: 53px;
			width: 81px; height: 62px;
			border-radius: 50%;
			background: #ffb6ca;
		}

.pig__leg1 {
		top: 38px; left: 68px;
		width: 22px;
		border-top: 55px solid #ffb6ca;
		border-left: 22px solid transparent;
		border-right: 11px solid transparent;
	}

.pig__leg1:before {
			top: -56px; left: -13px;
			width: 22px;
			border-top: 55px solid #f789aa;
			border-left: 22px solid transparent;
			border-right: 16px solid transparent;
			z-index: -1;
		}

.pig__leg2 {
		top: 38px; left: 170px;
		width: 20px;
		border-top: 56px solid #ffb6ca;
		border-left: 19px solid transparent;
		border-right: 10px solid transparent;
	}

.pig__leg2:before {
			top: -57px; left: -35px;
			width: 20px;
			border-top: 56px solid #f789aa;
			border-left: 18px solid transparent;
			border-right: 10px solid transparent;
			z-index: -1;
		}

.pig__nose {
		top: 12px; left: 221px;
		width: 48px; height: 40px;
		border-radius: 0 0 100% 0;
		background-image: linear-gradient(90deg, #e895b6 85%, #dd507f 85%);
	}

.pig__nose:before {
			top: -11px; left: 9px;
			width: 39px; height: 11px;
			background-image: linear-gradient(90deg, #e895b6 82%, #dd507f 82%);
		}

.pig__head {
		top: -22px; left: 179px;
		width: 74px; height: 75px;
		border-radius: 50%;
		background: #ffb6ca;
		box-shadow: inset -77px 123px 0 -111px #e895b6;
	}

.pig__head:before {
			top: 25px; left: 44px;
			width: 16px; height: 9px;
			box-sizing: border-box;
			border-radius: 20px 20px 0 0;
			border-left: 3px solid #11012b;
			border-top: 3px solid #11012b;
			border-right: 3px solid #11012b;
		}

.pig__ear {
		top: -38px; left: 205px;
		width: 47px; height: 34px;
		box-sizing: border-box;
		border-radius: 10px 2px 32px;
		background: #f98aac;
		box-shadow: inset 0 14px #d56595;
		transform-origin: bottom left;
		transform: rotate(-3deg);
	}

.pig__tail {
		top: -32px; left: 45px;
		width: 24px; height: 18px;
		border-radius: 20px 25px 0 10px;
		border-top: 6px solid #e592b2;
		border-left: 6px solid #e592b2;
		border-right: 6px solid #e592b2;
		background: transparent;
	}

.pig__tail:before {
			top: -19px; left: -3px;
			width: 13px; height: 25px;
			border-radius: 1px 25px 20px 5px;
			border-top: 6px solid #e592b2;
			border-right: 6px solid #e592b2;
			border-bottom: 6px solid #e592b2;
			background: transparent;
		}

.pig__tail:after {
			top: 27px; left: 27px;
			width: 12px; height: 12px;
			border-radius: 50%;
			background: #f45f87;
			box-shadow: 13px 4px 0 -3px #f45f87, 5px 12px 0 -4px #f45f87;
		}

@keyframes fire {
	0% { transform: translateY(0); }
	32% { transform: translateY(30px); }
	50% { transform: translateY(20px); }
	70% { transform: translateY(10px); }
	90% { transform: translateY(18px); }
	100% { transform: translateY(0); }
}
@keyframes fireBack {
	0% { transform: scale(1); }
	32% { transform: scale(1.1); }
	50% { transform: scale(1.05); }
	70% { transform: scale(1.2); }
	90% { transform: scale(1.05); }
	100% { transform: scale(1); }
}