@import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");
:root {
	--glitter: url("glitter.png");
}
.fire::before,
.fire::after {
	content: "";
	position: absolute;
	inset: 0;
}
.fire::before {
	content: "";
	background-image: var(--glitter), var(--glitter),
		linear-gradient(
			0deg,
			white 0px,
			#ff8951 5px,
			#dcbc169c 30%,
			transparent 70%
		),
		radial-gradient(ellipse at bottom, transparent 30%, black 60%);
	background-size: 350px 500px, 400px 650px, 100% 100%, 100% 100%;
	background-blend-mode: hard-light, color-dodge, multiply;
	background-position: 0px 0px, 0px 0px, var(--gradientPos);
	background-repeat: repeat, repeat, repeat, no-repeat;
	mix-blend-mode: color-dodge;
	filter: brightness(3.7) blur(7px) contrast(6);
	animation: fire 1.75s linear infinite;
	box-shadow: inset 0 -40px 50px -60px #63bbc5;
}
@keyframes fire {
	0% {
		background-position: center 0px, center 0px, 50% 100%, center center;
	}
	100% {
		background-position: center -500px, center -650px, 50% 100%, center center;
	}
}
html,
body {
	min-width: 100%;
	min-height: 100%;
	overflow: hidden;
}
.fire {
	width: 100%;
	height: 100%;
	text-align: center;
	overflow: hidden;
}
img {
	margin-top: 5%;
	width: 20%;
}
h1 {
	color: #A80030;
	font-family: "Creepster", system-ui;
}