:root {
	--color-pink-one: #dd4587;
	--color-pink-two: #ff4981;
	--color-blue-one: #4974a5;
	--color-blue-two: #6495ed;
	--color-lighthouse: #f3f3f3;
	--color-white: #ffffff;

	--primary-color: var(--color-pink-one);
	--primary-color-gradiated: var(--color-pink-two);
	--background-color: var(--color-lighthouse);
}

html {
	overflow: hidden;
}

body {
	overflow: hidden;
	height: 100vh;
	/* height: -webkit-fill-available; */
	width: 100vw;
	container-type: size;
	background: linear-gradient(90deg, var(--primary-color), var(--primary-color-gradiated));
	font-family: "Jost", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

div.full {
	position: fixed;
	inset: 0;
	width: fit-content;
	height: fit-content;
	margin: auto;
}

h1 {
	font-size: 10cqw;
	font-weight: 400;
	font-style: normal;
	color: var(--color-white);
}

h1.fire::before {
	display: inline-block;
	width: 12cqw;
	aspect-ratio: 1;
	content: '';
	background-color: var(--color-white);
}

.font-barcode {
	font-family: "Libre Barcode 39 Text", sans-serif;
}

.font-pacifico {
	font-family: "Pacifico", sans-serif;
}

.fire::before {
	mask: url('data:image/svg+xml; utf8, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 612 612" xml:space="preserve"><g><path d="M216.02,611.195c5.978,3.178,12.284-3.704,8.624-9.4c-19.866-30.919-38.678-82.947-8.706-149.952 c49.982-111.737,80.396-169.609,80.396-169.609s16.177,67.536,60.029,127.585c42.205,57.793,65.306,130.478,28.064,191.029 c-3.495,5.683,2.668,12.388,8.607,9.349c46.1-23.582,97.806-70.885,103.64-165.017c2.151-28.764-1.075-69.034-17.206-119.851 c-20.741-64.406-46.239-94.459-60.992-107.365c-4.413-3.861-11.276-0.439-10.914,5.413c4.299,69.494-21.845,87.129-36.726,47.386 c-5.943-15.874-9.409-43.33-9.409-76.766c0-55.665-16.15-112.967-51.755-159.531c-9.259-12.109-20.093-23.424-32.523-33.073 c-4.5-3.494-11.023,0.018-10.611,5.7c2.734,37.736,0.257,145.885-94.624,275.089c-86.029,119.851-52.693,211.896-40.864,236.826 C153.666,566.767,185.212,594.814,216.02,611.195z"/></g></svg>') no-repeat;
}

@media screen and (min-width: 767px) {
	h1 {
		font-size: 7cqw;
	}
	h1.fire::before {
		width: 10cqw;
	}

}