* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: var(--text-color);
	accent-color: var(--color-d);
}

@font-face {
	font-display: swap;
	font-family: ark-latin;
	src: url("ark-pixel-16px-proportional-latin.woff2") format("woff2");
}

html,
button,
select {
	font-family: ark-latin, sans-serif;
	font-size: 16px;
}

:root {
	--color-a: oklch(0.41 0.0178 201.81);
	--color-b: oklch(0.62 0.0664 60.49);
	--color-c: oklch(0.33 0.0144 217.83);
	--color-c-highlight: oklch(from var(--color-c) 0.45 c h);
	--color-d: oklch(0.67 0.1326 259.65);
	--text-color: oklch(0.87 0 0);
}

button,
select {
	display: flex;
	place-items: center;
	padding: 0.25rem 0.5rem;
	border: none;
	background-color: var(--color-d);
	color: oklch(0.26 0 0);

	&:hover {
		background-color: oklch(from var(--color-d) 0.85 c h);
	}
}

button {
	cursor: pointer;
	&:disabled {
		cursor: default;
	}
}

button:has(> svg) {
	padding: 0;
	background: none;
	&:hover {
		background: none;
	}
}

html {
	min-width: 400px;
	min-height: 600px;
	background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='100' height='82' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23404e4fff'/><path d='M74.4-14.6l-24 41.1h48l-24-41.1zm0 82l-24 41.1h48l-24-41.1z'  stroke-width='1' stroke='none' fill='%23a37c5cff'/><path d='M0 0l24 41.1L48 0H0zm-1.6 26.5l-24 41.1h48l-24-41.1zm100 0l-24 41.1h48l-24-41.1z'  stroke-width='1' stroke='none' fill='%232c373aff'/><path d='M24 41.1l24 41.1 24-41.1H24z'  stroke-width='1' stroke='none' fill='%23726f69ff'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.app-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	max-width: 1200px;
	margin: 0 auto;
	background-color: var(--color-a);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}

.header {
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	border-bottom: 1px solid var(--color-c);
}

.title {
	font-size: 1.5rem;
	font-weight: bold;
}

.main-content {
	position: relative; /* for the loading screen in the file browser*/
	display: flex;
	flex: 1;
	overflow: hidden;
}

@media (min-width: 601px) {
	.filebrowser-toggle {
		display: none;
	}
}

.spacer {
	flex-grow: 1;
}