body {
	margin: 0;
	padding: clamp(16px, 2rem, 64px);
	background-color: rgb(55,60,70);
	background-repeat: no-repeat;
	background-position: top left;
	background-image: url("bg.png");
	background-image: image-set(
		url("bg.png") 1x,
		url("bg_2x.png") 2x,
		url("bg_3x.png") 3x
	);
}

@media (max-width: 600px) and (orientation: portrait) {
	body {
		padding: 20px;
		background-image: image-set(
			url("bg_portrait.png") 1x,
			url("bg_portrait_2x.png") 2x,
			url("bg_portrait_3x.png") 3x
		);
	}
} 

h1 {
	font-family: Woffopolis, Roboto, sans-serif;
	font-weight: 500;
	font-size: clamp(1.6rem, 8vw, 2.4rem); 
	letter-spacing: 0.15em;
	line-height: 1;
	white-space: nowrap;
	color: white;
	pointer-events: none;
	margin: 0;
}

h2 {
	font-family: Woffopolis, Roboto, sans-serif;
	font-weight: 400;
	font-size: clamp(0.6rem, 3.15vw, 0.95rem);
	letter-spacing: 0.11em;
	line-height: 1.2;
	white-space: nowrap;
	color: white;
	pointer-events: none;
	padding-left: 2px;
	margin: 0.5rem 0 0 0;
}

@font-face {
	font-family: Woffopolis;
	src: url("/static/fonts/Woffopolis-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
	font-family: Woffopolis;
	src: url("/static/fonts/Woffopolis-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}