<!-- #CodePenChallenge: Lightness -->
<!-- #CodePenChallenge: Lightness -->

<div class="fire">
	<div class="logs">
		<div class="log l1"></div>
		<div class="log l2"></div>
	</div>
	<div class="flames">
		<div class="flame f1"></div>
		<div class="flame f2"></div>
		<div class="flame f3"></div>
	</div>
	<div class="sparks">
		<div class="spark s1"></div>
		<div class="spark s2"></div>
		<div class="spark s3"></div>
		<div class="spark s4"></div>
		<div class="spark s5"></div>
		<div class="spark s6"></div>
		<div class="spark s7"></div>
		<div class="spark s8"></div>
	</div>
</div>

body {
	display: grid;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;

	background: black;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
}
.fire {
	position: relative;
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	align-self: end;
	justify-self: center;
	width: 300px;
	height: 300px;
	background: #880e4f;
	border-radius: 50%;
	box-shadow: 0 0 50px 50px #880e4f;
	animation: background 5s ease infinite;
}
.flame {
	position: absolute;
	bottom: 70px;
	width: 100px;
	height: 100px;
	background-color: red;
	border-radius: 0 70%;
	box-shadow: -10px -10px 0 10px orange, -20px -20px 0 20px yellow;
	animation: flicker 5s ease infinite;
}
.f1 {
	left: 50px;
}
.f3 {
	transform: rotateZ(45deg);
	left: 100px;
	bottom: 100px;
}
.f2 {
	transform: rotateZ(90deg);
	left: 150px;
}
.log {
	position: absolute;
	bottom: 15px;
	left: 50px;
	width: 200px;
	height: 50px;
	background-color: brown;
	border-radius: 10px;
}
.l1 {
	transform: rotateZ(20deg);
	box-shadow: 0 0 10px #3e2723;
}
.l2 {
	transform: rotateZ(-20deg);
	box-shadow: 0 0 10px #3e2723;
}
.l3 {
	transform: rotate3d(1, 1, 1, 40deg);
}
.l4 {
	transform: rotate3d(1, 1, 1, -40deg);
}
.spark {
	width: 5px;
	height: 5px;
	background-color: orangered;
	border-radius: 50%;
	box-shadow: 0 0 5px 3px orange;
	position: absolute;
	top: 150px;
	left: 150px;
	opacity: 0;
}
.s1 {
	animation: fadein 5s ease infinite, floatup 5s ease infinite,
		left 5s ease infinite;
}
.s2 {
	animation: fadein 5s 0.5s ease infinite, floatup 5s 0.5s ease infinite,
		right 5s 0.5s ease infinite;
}
.s3 {
	animation: fadein 5s 1s ease infinite, floatup 5s 1s ease infinite,
		farleft 5s 1s ease infinite;
}
.s4 {
	animation: fadein 5s 1.5s ease infinite, floatup 5s 1.5s ease infinite,
		farright 5s 1.5s ease infinite;
}
.s5 {
	animation: fadein 5s 2s linear infinite, floatup 5s 2s linear infinite;
}
.s6 {
	animation: fadein 5s 2.5s ease infinite, floatup 5s 2.5s ease infinite,
		left 5s 2.5s ease infinite;
}
.s7 {
	animation: fadein 5s 3s ease infinite, floatup 5s 3s ease infinite,
		right 5s 3s ease infinite;
}
.s8 {
	animation: fadein 5s 3.5s ease infinite, floatup 5s 3.5s ease infinite,
		farleft 5s 3.5s ease infinite;
}

@keyframes flicker {
	0%,
	100% {
		background-color: red;
		box-shadow: -10px -10px 0 10px orange, -15px -15px 0 15px yellow;
	}
	25%,
	75% {
		background-color: red;
		box-shadow: -10px -10px 0 10px orangered, -20px -20px 0 20px yellow;
	}
	50% {
		background-color: red;
		box-shadow: -10px -10px 0 10px orange, -15px -15px 0 15px yellow;
	}
}

@keyframes fadein {
	0%,
	100% {
		opacity: 0;
	}
	75% {
		opacity: 100%;
	}
}

@keyframes floatup {
	0% {
		top: 150px;
	}
	100% {
		top: -50%;
	}
}
@keyframes left {
	0% {
		left: 150px;
	}
	100% {
		left: 100px;
	}
}
@keyframes right {
	0% {
		left: 150px;
	}
	100% {
		left: 200px;
	}
}
@keyframes farleft {
	0% {
		left: 150px;
	}
	100% {
		left: 0px;
	}
}
@keyframes farright {
	0% {
		left: 150px;
	}
	100% {
		left: 300px;
	}
}
@keyframes background {
	0%,
	50%,
	100% {
		box-shadow: 0 0 50px 50px #880e4f;
	}
	25%,
	75% {
		box-shadow: 0 0 60px 60px #880e4f;
	}
}