@font-face {
	font-family: "lot";
	src: url("../otf/lot.otf") format("opentype");
}

@font-face {
	font-family: "noto";
	src: url("../ttf/NotoSans-VariableFont_wdth\,wght.ttf") format("truetype");
}

:root {
	--body-fill-color: #fed643;
	--logo-font-color: #fff5da;
	--logo-font-color: oklch(97% .09 89);
	--logo-font-outline-color: #322718BF;
	--logo-font-shadow-color: #222222;
	--copy-font-color: #322618;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	background-color: var(--body-fill-color);
	width: 100vw;
	height: 100vh;
	display: grid;
	place-items: center;
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
}

.logo {
	transform: translateY(-1.825rem);
	font-family: "lot";
	font-size: calc(100vw / 8);
	color: var(--logo-font-color);
	-webkit-text-stroke: 1px var(--logo-font-outline-color);
	filter: drop-shadow(.5vw .5vw var(--logo-font-shadow-color));
}

.footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 40px;
	display: grid;
	place-items: center;
	background-color: var(--logo-font-shadow-color);
}

.copyright {
	font-family: "noto";
	font-size: .65rem;
	font-weight: 400;
	color: #181818;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: center;
	color: white;
}