:root {
	color-scheme: light dark;

	--colour_bg: #08090e;
	--colour_fg: #cdd6f4;
	--colour_ourple: #cba6f7;

	@media(prefers-color-scheme: light) {
		--colour_bg: #bcc0cc;
		--colour_fg: #08090e;
		--colour_ourple: #8839ef;
	}

}

* {
	color: var(--colour_fg);
	background-color: var(--colour_bg);
	font-family: Iosevka, monospace;
	font-size: 106%;
}

body {
	display: grid;
	grid-template-rows: auto max-content;
	height: 100vh;
	margin-top: 0;
	margin-bottom: 0;
}

.nav {
	text-align: center;
	line-height: 50%;
}

.nav-current {
	color: var(--colour_bg);
	background-color: var(--colour_ourple);
}

.badges {
	justify-self: center;
	padding-bottom: 1%;
}

.yappin {
	text-align: left;
	padding: 2%;
}