body { 
		background-color: black; 
}

.firepit {
		position: relative;
		top: 20%;
		width: 100px;
		height: 100px;
		margin: 120px auto;
		transform-origin: center bottom;
		transform: scaleY(3);
		-webkit-transform: scaleY(3);
		-moz-transform: scaleY(3);
		-ms-transform: scaleY(3);
		-o-transform: scaleY(3);
}

.flame {
		position: absolute;
		bottom: 0px;
		border-radius: 8% 50% 50% 50%;
		transform: rotate(45deg);
}

.flameLayer {
		bottom: 0;
		position: absolute;
		/* animation description */
		animation-name: layerRandomize;
		animation-delay: 10ms;
		animation-duration: 200ms;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in;
		animation-direction: alternate;
}

.red {
	width: 50px; height: 50px;
	background-color: rgba(255, 37, 19, 0.5);
	border: 0px;
	box-shadow: 0px 0px 5px 4px rgba(255, 37, 19, 0.5);
	/* animation description */
	animation-name: flickRed;
	animation-delay: 10ms;
	animation-duration: 500ms;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
	animation-direction: alternate;
}

.orange {
		left: 5px;
		width: 40px; height: 40px;

		background-color: rgba(245, 96, 21, 0.6);
		box-shadow: 0px 0px 12px 6px rgba(245, 96, 21, 0.6);

		/* animation description */
		animation-name: flickOrange;
		animation-delay: 5ms;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in;
		animation-direction: alternate;
}

.yellow {
		left: 10px;
		width: 30px; height: 30px;
	
		background-color: rgba(254, 182, 69, 0.6);
		box-shadow: 0px 0px 12px 6px rgba(254, 182, 69, 0.6);

		/* animation description */
		animation-name: flickYellow;
		animation-delay: 	0ms;
		animation-duration: 405ms;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in;
		animation-direction: alternate;
}

.white {
		left: 10px; bottom: -5px;
		width: 30px; height: 30px;

		background-color: rgba(255, 255, 255, 0.6);
		box-shadow: 0px 0px 9px 4px rgba(255, 255, 255, 1);

		/* animation description */
		animation-name: flickWhite;
		animation-delay: 0ms;
		animation-duration: 522ms;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in;
		animation-direction: alternate;
}

.offset {
		position: absolute;
		left: 10px; bottom: -45px;
		width: 50px; height: 50px;

		border-radius: 50%;

		/* animation description */
		animation-name: flickOffset;
		animation-delay: 0ms;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in;
		animation-direction: alternate;
}

.glow {
		/* TODO: Fix glow */
		left: -20px; bottom: -10px;
		width: 70px; height: 70px;
		background: radial-gradient(
			ellipse at center,
			rgba(255, 40, 20, 0.1) 0%,
			rgba(255, 40, 20, 0.05) 100%
		);
		opacity: 0.6;

		/* animation description */
		animation-name: flickGlow;
		animation-delay: 0ms;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in;
		animation-direction: alternate;
}

.black {
	background-color: rgba(0, 0, 0, 1);
	box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 1);
}

.blue {
	display: none; 		/* TODO: Add this blue flame */
	background: rgba(0, 0, 255, 0.9);
	box-shadow: 0px 0px 15px 10px rgba(0, 0, 255, 1);
}

@keyframes layerRandomize {
	  0% { transform: rotate(-1deg); }
	 20% { transform: rotate( 1deg); }
	 40% { transform: rotate(-1deg); }
	 60% { transform: rotate( 1deg); }
	 80% { transform: rotate( 2deg); }
	100% { transform: rotate( 1deg); }
}

@keyframes flickRed {
	0% {
		width: 50px; height: 45px;
		border-top-left-radius: 15%;
	}
	20% {
		width: 50px; height: 49px;
		border-top-left-radius: 2%;
	}
	40% {
		width: 50px; height: 47px;
		border-top-left-radius: 7%;
	}
	60% {
		width: 50px; height: 51px;
		border-top-left-radius: 0%;
	}
	80% {
		width: 50px; height: 48px;
		border-top-left-radius: 2%;
	}
	100% {
		width: 52px; height: 50px;
		border-top-left-radius: 8%;
	}
}

@keyframes flickOrange {
	0% {
		width: 40px; height: 36px;
		opacity: 0.5;
	}
	25% {
		width: 38px; height: 38px;
	}
	50% {
		width: 35px; height: 40px;
	}
	75% {
		width: 39px; height: 42px;
	}
	100% {
		width: 41px; height: 44px;
		opacity: 1;
	}
}

@keyframes flickYellow {
	0% {
		width: 29px; height: 30px;
	}
	33% {
		width: 32px; height: 30px;
	}
	66% {
		width: 30px; height: 30px;
	}
	100% {
		width: 27px; height: 30px;
	}
}

@keyframes flickWhite {
	0% {
		width: 32px; height: 35px;
		opacity: 0.01;
	}
	50% {
		width: 35px; height: 32px;
		opacity: 0.2;
	}
	100% {
		width: 33px; height: 34px;
		opacity: 0.1;
	}
}

/* TODO: Improve this offset so I can add a blue offset too */
@keyframes flickOffset {
	0% 		{ left:  6px; width: 49px; height: 45px;	}
	100% 	{ left: 12px; width: 40px; height: 48px;  }
}

@keyframes flickGlow {
	  0% { width: 90px; height: 90px; }
	100% { left: -30px; width: 110px; height: 110px; }
}