@font-face {
	font-family: "Nasin Nanpa";
	src: url("/fonts/nasin-nanpa.otf");
}
@font-face {
	font-family: "Jua";
	src: url("/fonts/jua.ttf");
}
@font-face {
	font-family: "Hachi Maru Pop";
	src: url("/fonts/hachi-maru-pop.ttf");
}
@font-face {
	font-family: "Cherry Bomb One";
	src: url("/fonts/cherry-bomb-one.ttf");
}

/* uwu */
:root {
	color-scheme: light dark;
	:has(#theme-light:checked) {
		color-scheme: light;
	}
	:has(#theme-dark:checked) {
		color-scheme: dark;
	}

	--shadow:    #00000080;
	/* catppuccin :) */
	--crust:     light-dark(#dce0e8, #181926);
	--mantle:    light-dark(#e6e9ef, #1e2030);
	--base:      light-dark(#eff1f5, #24273a);
	--surface-0: light-dark(#ccd0da, #363a4f);
	--surface-1: light-dark(#bcc0cc, #494d64);
	--surface-2: light-dark(#acb0be, #5b6078);
	--overlay-0: light-dark(#9ca0b0, #6e738d);
	--overlay-1: light-dark(#8c8fa1, #8087a2);
	--overlay-2: light-dark(#7c7f93, #939ab7);
	--text:      light-dark(#4c4f69, #cad3f5);
	--subtext-1: light-dark(#5c5f77, #b8c0e0);
	--subtext-0: light-dark(#6c6f85, #a5adcb);
	--rosewater: light-dark(#dc8a78, #f4dbd6);
	--flamingo:  light-dark(#dd7878, #f0c6c6);
	--pink:      light-dark(#ea76cb, #f5bde6);
	--mauve:     light-dark(#8839ef, #c6a0f6);
	--red:       light-dark(#d20f39, #ed8796);
	--maroon:    light-dark(#e64553, #ee99a0);
	--peach:     light-dark(#fe640b, #f5a97f);
	--yellow:    light-dark(#df8e1d, #eed49f);
	--green:     light-dark(#40a02b, #a6da95);
	--teal:      light-dark(#179299, #8bd5ca);
	--sky:       light-dark(#04a5e5, #91d7e3);
	--sapphire:  light-dark(#209fb5, #7dc4e4);
	--blue:      light-dark(#1e66f5, #8aadf4);
	--lavender:  light-dark(#7287fd, #b7bdf8);
	--light-flamingo: hsl(from var(--flamingo) h s calc(l + 10));
	--light-pink: hsl(from var(--pink) h s calc(l + 10));
	--light-mauve: hsl(from var(--mauve) h s calc(l + 10));
	--light-red: hsl(from var(--red) h s calc(l + 10));
	--light-maroon: hsl(from var(--maroon) h s calc(l + 10));
	--light-peach: hsl(from var(--peach) h s calc(l + 10));
	--light-yellow: hsl(from var(--yellow) h s calc(l + 10));
	--light-green: hsl(from var(--green) h s calc(l + 10));
	--light-teal: hsl(from var(--teal) h s calc(l + 10));
	--light-sky: hsl(from var(--sky) h s calc(l + 10));
	--light-sapphire: hsl(from var(--sapphire) h s calc(l + 10));
	--light-blue: hsl(from var(--blue) h s calc(l + 10));
	--light-lavender: hsl(from var(--lavender) h s calc(l + 10));
}

radio-picker {
	display: flex;
	overflow: hidden;
	label {
		box-sizing: border-box;
		font-size: 0.6em;
		text-align: center;
		width: 2.2em;
		height: 2.2em;
		padding: 0.25em;
		user-select: none;
		&:has(input:checked) {
			background: var(--overlay-0);
		}
		box-shadow: inset 0 0 0 0 var(--shadow);
		padding: 0.5em;
		cursor: pointer;
		background: var(--surface-0);
		&:hover { background: var(--surface-1); }
		&:active { background: var(--surface-2); }

		&:first-child {
			border-radius: 1em 0 0 1em;
		}
		&:last-child {
			border-radius: 0 1em 1em 0;
		}
	};
	input {
		opacity: 0;
		position: absolute;
		pointer-events: none;
	}
}

a {
	color: var(--blue);
	&:hover { color: var(--light-blue); }
	transition: color ease-in-out 0.5s;
	text-decoration: none;
}

body {
	background-color: var(--base);
	color: var(--text);
	margin: 0;
}

html[lang="tok"] > body {
	font-family: Nasin Nanpa;

	name {
		font-family: "Jua";
		border: 2px solid var(--text);
		border-radius: 1em;
		padding: 0 0.25em;
	}
}

html[lang="en"] > body {
	font-family: Hachi Maru Pop;

	nav {
		font-size: 1.5em
	}
}

nav {
	display: flex;
	background-color: var(--mantle);
	gap: 1em;
	padding: 0.25em 1em;
	font-size: 2em;

	spacer {
		flex-grow: 1;
	}

	box-shadow: 0 0 1em 0.2em var(--shadow);
}

pre {
	display: inline;
}

main {
	margin: 2em;
}

h1 {
	font-size: 3em;
}

@keyframes pinwheel {
	0% {
		cursor: url("/pinwheel-1.png"), wait;
	}
	16.7% {
		cursor: url("/pinwheel-2.png"), wait;
	}
	33.3% {
		cursor: url("/pinwheel-3.png"), wait;
	}
	50% {
		cursor: url("/pinwheel-4.png"), wait;
	}
	66.6% {
		cursor: url("/pinwheel-5.png"), wait;
	}
	83.3% {
		cursor: url("/pinwheel-6.png"), wait;
	}
}

timer {
	display: flex;
	flex-direction: column;
	background-color: var(--surface-1);
	border-radius: 1em;
	margin: 4em 0;

	text-align: center;

	cursor: url("/pinwheel.webp"), wait;
	animation: 0.2s linear 0s infinite pinwheel;

	box-shadow: 0 0 2px 0.5em var(--surface-1);

	countdown {
		display: flex;
		flex-direction: column;
		gap: 1em;

		text-align: center;
		font-family: Hachi Maru Pop;
		font-size: 1.5em;
		.aka {
			font-family: Nasin Nanpa;
			font-size: 0.75em;
			display: block;
			color: var(--subtext-0);
			margin-top: 0.5em;
			margin-bottom: -0.5em;
		}
		row {
			display: flex;
			justify-content: center;
			gap: 1em;
		}
		.count {
			display: inline-block;
			border-radius: 2em;
			width: 2em;
			height: 2em;
			padding: 0.5em;
			text-align: center;
			color: var(--crust);
			box-shadow: inset 0.3px 0.6px 2px 0px #fff;
			user-select: none;

			&.weeks {
				background-image: linear-gradient(-30deg, var(--maroon), var(--light-maroon));
			}
			&.weekdays {
				background-image: linear-gradient(-30deg, var(--peach), var(--light-peach));
			}
			&.days {
				background-image: linear-gradient(-30deg, var(--sapphire), var(--light-sapphire));
			}
			&.hours {
				background-image: linear-gradient(-30deg, var(--yellow), var(--light-yellow));
			}
			&.minutes {
				background-image: linear-gradient(-30deg, var(--green), var(--light-green));
			}
			&.seconds {
				background-image: linear-gradient(-30deg, var(--flamingo), var(--light-flamingo));
			}
			&.totalSeconds {
				background-image: linear-gradient(-30deg, var(--pink), var(--light-pink));
				width: 6em;
			}

			.label {
				display: block;
				font-size: 0.5em;
			}
		}
	}

	loading {
		width: 90%;
		margin: 1em 5%;
	}
}

loading {
	background-image: linear-gradient(105deg, var(--mauve), var(--teal));
	height: 1em;
	border-radius: 0.5em;
	overflow: hidden;
	box-shadow: inset 0px 0px 2px 1px #fff8;
	loading-bar {
		display: block;
		width: 100%;
		height: 100%;
		background-color: var(--crust);
	}
}

@media (width <= 450px) {
	nav {
		font-size: 1.5em;
	}

	main {
		margin: 2em 0;
	}
	
	timer {
		border-radius: 0;
		gap: 0.5em;

		countdown row {
			gap: 0.5em;
		}
	}
}