@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');

:root {
	color-scheme: light dark;
	/* color-scheme: light; */

	font-family: "Noto Sans Mono", "Noto Sans", sans-serif, monospace;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	font-variation-settings:
		"wdth" 100;
}

body {
	position: relative;
	margin: 0;
}

.banner {
	display: flex;
}

.banner-left {
	/* flex: 1; */
}

.banner-title {
	font-family: "Noto Serif", serif;
	font-size: 8rem;
	font-weight: 100;
	line-height: 1.2;
}

.banner-logo-img {
	height: 100%;
}

.section-wrapper {
	display: flex;
	flex-direction: row;
}

.section-title {
	position: sticky;
	top: 0;
	align-self: start;
	writing-mode: sideways-lr;
	text-align: end;
	padding-right: 0.5rem;
	font-family: "Noto Serif", serif;
	font-size: 2.6rem;
	font-weight: 100;
}

.section-container {
	flex-grow: 1;
}

.footer {
	text-align: center;

	font-weight: 900;

	font-size: 23vw;
	font-variation-settings:
		"wdth" 100;

	/* font-size: 28vw; */
	/* font-variation-settings: */
	/* 	"wdth" 62.5; */
}