:root {
	background: var(--base03);
	color: var(--base0);

	font-family: monospace;
	font-size: 16px;

	/* Background tones (dark) */
	--base03:  #002b36;
	--base02:  #073642;

	/* Content tones (greys) */
	--base1:  #586e75;
	--base0:  #657b83;
	--base00:   #839496;
	--base01:   #93a1a1;

	/* Background tones (light) */
	--base2:   #eee8d5;
	--base3:   #fdf6e3;

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

	-webkit-tap-highlight-color: transparent; /* Prevent Chrome from displaying a blue box over links/buttons tapped on a touchscreen. */
}
@media (pointer: coarse) {
	html {
		font-size: 19px;
	}
}

body {
	max-width: 70rem;
	margin-left: auto;
	margin-right: auto;
	padding-left:  1rem;
	padding-right: 1rem;
}

* {
	scrollbar-color: var(--base0) transparent;
}
*::selection {
	background-color: var(--blue);
	color: var(--base03);
}

canvas {
	width:  100%;
	aspect-ratio: 3;
	border-radius: .3rem;
}

h1 {
	color: var(--magenta);
	font-size: 1.5rem;
	font-weight: bold;
}
h2 {
	color: var(--green);
	font-size: 1.3rem;
	font-weight: bold;
}

a {
	color: var(--blue);
	border-radius: .2rem;
}
a:hover {
	background: var(--base02);
}
a:focus {
	outline: 2px solid var(--blue);
	outline-offset: .1rem;
	text-decoration: none;
}

pre code.hljs {
	background: var(--base02);
	border-radius: .2rem;
}