@font-face {
	font-family: 'Cozette';
	src: url('../fonts/CozetteCrossedSevenVector.woff2') format('woff2');
}

:root {
	color-scheme: light dark;
	/* Solarized pallette */

	/* Background Tones */
	--base03: #002b36;
	--base02: #073642;
	--base2: #eee8d5;
	--base3: #fdf6e3;

	/* Content Tones */
	--base01: #586e75;
	--base00: #657b83;
	--base0: #839496;
	--base1: #93a1a1;

	/* Accent Colors */
	--yellow: #b58900;
	--orange: #cb4b16;
	--red: #dc322f;
	--magenta: #d33682;
	--violet: #6c71c4;
	--blue: #268bd2;
	--cyan: #2aa198;
	--green: #859900;
}

body {
	background-color: light-dark(var(--base3), var(--base02));
	color: light-dark(var(--base00), var(--base0))
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: light-dark(var(--base01), var(--base1))
}

a {
	color: var(--blue);
	text-decoration: none;

	&:visited {
		color: var(--magenta);
	}

	&:hover {
		cursor: pointer;
	}
}

blockquote {
	background-color: light-dark(var(--base2), var(--base03));
	padding: 0.1em 1.0em;
	border-radius: 0.5em;
	border: 2px solid light-dark(var(--base00), var(--base0));
}

/*
p {

	code {
		background-color: light-dark(var(--base2), var(--base03));
		padding: 0.2em 0.3em;
		border-radius: 0.2em;
		font-family: 'Cozette', monospace;
	}

}
*/

pre {
	padding: 0.1em 1.0em;
	border-radius: 0.5em;

	code {
		font-family: 'Cozette', monospace;
	}
}

img {
	border-radius: 0.5em;
	border: 2px solid light-dark(var(--base00), var(--base0));
}

button {
	/* https://uiverse.io/Voxybuns/lucky-fireant-71 */
	--button_radius: 0.25em;
	--button_outline_color: light-dark(var(--base00), var(--base0));
	font-size: 22px;
	border: none;
	cursor: pointer;
	padding: 0;
	border-radius: var(--button_radius);
	background: var(--button_outline_color);

	span.face {
		display: block;
		box-sizing: border-box;
		border: 2px solid var(--button_outline_color);
		border-radius: var(--button_radius);
		padding: 0.1em 0.2em;
		background: light-dark(var(--base2), var(--base03));
		color: var(--button_outline_color);
		transform: translateY(-0.2em);
		transition: transform 0.1s ease;

		&:hover {
			transform: translateY(-0.33em);
		}

		&:active {
			transform: translateY(0);
		}

	}
}