@import url('./font-noto-sans.css');

:root {
	--background-color: rgb(34, 34, 34);
	--text-color: rgb(199, 199, 199);

	--tint-shade-50-pct: rgba(199, 199, 199, 50%);
	--tint-shade-10-pct: rgba(199, 199, 199, 10%);
	--tint-shade-5-pct: rgba(199, 199, 199, 5%);
}

@media (prefers-color-scheme: light) {
	:root {
		--text-color: rgb(34, 34, 34);
		--background-color: rgb(199, 199, 199);

		--tint-shade-50-pct: rgba(34, 34, 34, 50%);
		--tint-shade-10-pct: rgba(34, 34, 34, 10%);
		--tint-shade-5-pct: rgba(34, 34, 34, 5%);
	}
}

html, body {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

html {
	background-color: var(--background-color);
	color: var(--text-color);
	
	font-family: 'Noto Sans', sans-serif;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
}


/* Header */
header {
	display: flex;
	align-items: center;
	flex-direction: column;
}

header > h1 {
	font-size: 5vw;
	margin: 0;
}

header > hr {
	border-bottom-width: 0;
	border-right-width: 0;
	border-top-width: 1px;
	border-left-width: 0;
	margin-bottom: 8px;
	margin-top: 0;
	opacity: 0.75;
	width: 20vw;
}

header > label {
	font-size: 1.5vw;
	opacity: 0.5;
}

footer {
	position: fixed;
	display: flex;
	padding: 1em;
	z-index: 100;
	bottom: 0;
}

footer > a {
	transition: background-color 0.3s ease-in-out;
	background-color: var(--tint-shade-5-pct);
	color: var(--text-color);
	text-decoration: none;
	border-radius: 0.25em;
	padding: 0.25em 0.5em;
}

footer > a:hover {
	background-color: var(--tint-shade-10-pct);
}