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

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

: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);
	--min-width: 350px;
}

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

	/* hover styles only where a pointer can actually hover, so a tap does not stick */
	@media (hover: hover) {
		&:hover {
			background-color: oklch(from var(--color-d) 0.85 c h);
		}
	}
}

select:disabled {
	background-color: var(--color-d);
	color: oklch(0.5 0 0);
	@media (hover: hover) {
		&:hover {
			background-color: var(--color-d);
		}
	}
}

input:disabled {
	color: oklch(0.5 0 0);
}

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

svg {
	flex-shrink: 0;
}

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

html {
	min-width: var(--min-width);
	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>");
}

html,
body,
#root,
.app-container {
	height: 100%;
}

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

	& > .app-header {
		display: flex;
		gap: 1.5rem;
		justify-content: space-between;
		padding: 1rem;
		border-bottom: 1px solid var(--color-c);
		& > .app-buttons {
			display: flex;
			flex-wrap: wrap;
			gap: 1.5rem;
			justify-content: end;
			& > .signin-offline-group {
				& > .offline-button {
					text-wrap: nowrap;
					width: min-content;
				}
			}
			& > div {
				display: flex;
				gap: 1.5rem;
			}
		}
	}

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

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

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

.spacer {
	flex-grow: 1;
}

input {
	background: none;
	border: 1px solid var(--color-c);
	padding: 0.25rem;
}

.cover {
	position: relative;
	height: 25%;
	border-top: 1px solid var(--color-c);
	display: flex;
	justify-content: center;
	& > img {
		padding: 0.5rem;
		object-fit: contain;
		max-height: 100%;
		max-width: 100%;
	}
	& > .video-element {
		display: none;
	}
}