/* SPDX-FileCopyrightText: 2025 Komfyute <komfyute@outlook.com> */
/* SPDX-License-Identifier: MPL-2.0 */

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

:root {
	--background: #252A34;
	--foreground: #EAEAEA;
	--primary: #08D9D6;
	--secondary: #FF2E63;

	font-family: 'Noto Sans';
	font-size: large;
}

* {
	margin: 0;
	padding: 0;
}

body {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--background);
	color: var(--foreground);
}

header {
	padding: 10px;
	display: flex;
	align-items: center;
	background-color: var(--primary);
	color: var(--background);
	font-size: 1rem;
}

header>h1 {
	flex: 1;
	font-size: 2em;
}

header>a {
	margin: 0 0.5em;
	padding: 0.2em;
	border: 0.2em solid;
	border-radius: 0.4em;
	color: var(--background);
	font-weight: bold;
	text-decoration: none;
}

header>a:hover {
	color: var(--secondary);
}

main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: scroll;
	scroll-behavior: smooth;
	scroll-snap-type: y proximity;
}

section {
	flex: 1 0 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	scroll-snap-align: start;
}

section>h2 {
	color: var(--primary);
}

section a {
	color: var(--secondary);
}

section p {
	margin: 0.5em 0;
}

#home {
	align-items: start;
	font-size: min(8vw, 6rem);
}

#home>h2 {
	color: var(--foreground);
	font-size: 1em;
}

#home>h3 {
	font-size: 0.75em;
	font-style: italic;
}

#about {
	width: 80%;
	max-width: 50em;
}

@media screen and (max-width: 500px) {
	:root {
		font-size: medium;
	}

	header {
		padding: 5px;
		font-size: 0.8rem;
	}
}