@font-face {
	font-family: "Noto Sans";
	src: url("font/NotoSans-VariableFont_wdth,wght.ttf");
}

@font-face {
	font-family: "Noto Sans Mono";
	src: url("font/NotoSansMono-VariableFont_wdth,wght.ttf");
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--color-black: #1D1D21;
	--color-white: #F9FFFE;
	--color-link: #3C44AA;
	--color-background: #FED83D;
	--color-accent: #F9801D;
}

body {
	width: 100%;
	min-height: 100vh;
	height: auto;

	display: flex;
	flex-direction: column;

	background-color: var(--color-background);
	color: var(--color-black);
	font-family: "Noto Sans";
	font-weight: 600;
	text-align: center;
}

nav {
	position: sticky;
	width: 100%;
	min-height: 2rem;
	height: auto;

	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0 1rem;

	background-color: var(--color-accent);
}

main {
	padding: 1rem 0;
	width: 100%;
	flex-grow: 1;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

a {
	text-decoration: none;
	color: #3C44AA;
}

input, select, button {
	font: inherit;
	padding: 0.5rem 0;
	width: 12rem;
	border: 2px solid var(--color-accent);
	background-color: var(--color-inherit);
	outline: none;
	appearance: textfield;
	text-align: inherit;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

input[type="color"] {
	cursor: pointer;
	padding: 0;
}

input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
}

input[type="color"]::-moz-color-swatch {
	border: none;
}

button {
	cursor: pointer;
}

label {
	margin-bottom: -0.5rem;
}

hr {
	margin: 1rem 0;
	width: 4rem;
	border: 1px solid var(--color-accent);
}

code {
	font-family: "Noto Sans Mono";
	color: var(--color-white);
	background-color: var(--color-black);
	padding: 0.5rem 1rem;
}

/* Utility */

.invisible {
	display: none;
}

/* Controls */

.c-imagepreview {
	width: 12rem;
	height: 12rem;
	border: 2px solid var(--color-accent);
	image-rendering: pixelated;
}

.c-filedrop {
	padding: 1rem 0rem;
	width: 12rem;
	border: 2px dashed var(--color-accent);
}

.c-colorpreview {
	width: 12rem;
	height: 3rem;
	border: 2px solid var(--color-accent);
}