@layer vars, basics, page;

@layer vars {
	:root {
		--link: cyan;
		--color: #fffa;
		--background: #111;
	}
}

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

@layer page {
	html {
		font-size: 10px;
		color: var(--color);
		background: var(--background);
	}

	body {
		padding: 2em;
	}

	.results {
		margin-top: 1em;

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

		> div {
			font-size: 1.5em;
			border: 1px solid color-mix(in lch, transparent, var(--color) 20%);
			padding: 1em;
		}

		canvas {
			width: 20em;
		}
	}

	#filmstrip {
		display: flex;
		overflow-x: scroll;
	}
}