/* Color palette ........................................................... */
:root {
	color-scheme: light dark;
	/* Brand colors */
	--palette-primary: #6BD3F2;
	--palette-primary-contrast: black;
	--palette-secondary: #F5EA20;
	--palette-secondary-contrast: black;
}

/* Main content ............................................................ */
body {
	margin: 0;
	display: grid;
	place-items: center;
	min-height: 100vh;
	min-height: 100svh;

	/* Font */
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	font-family: system-ui, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", Roboto, Helvetica, Arial, sans-serif;
}
section {
	padding: 12px;
	max-width: 512px;
}

/* Selection ............................................................... */
::selection {
	background: var(--palette-secondary);
	color: var(--palette-secondary-contrast);
}

/* Focus ................................................................... */
:root {
	--outline-style: dotted;
	--outline-width: 2px;
	--focus-outline: var(--outline-style) var(--outline-width) var(--palette-primary);
	--focus-outline-offset: 1px;
}
:focus-visible {
	outline: var(--focus-outline);
	outline-offset: var(--focus-outline-offset);
}