*,
*::before,
*::after
{
	box-sizing: border-box;
	line-height: 1.5em;
	margin: 0;
	padding: 0;
}

:root
{
	--color_main: #EEE ;
	--color_background: #000e0e;
	--color_disabled: #AAA;
	--color_highlight: MediumSeaGreen;
	--page-width: 40em;
}

.negative
{
	--color_highlight: Crimson;
}

html
{
	color: var( --color_main );
	font-family: monospace;
	font-size: clamp( 1em, 2vw, 2vh );
	font-weight: bold;
}

body
{
	background: var( --color_background );
}

.limit_width
{
	margin: 3em auto;
	padding: 0 1em;
	max-width: var( --page-width );
}

p
{
	margin: 2rem 0;
}

h1, h2, h3, h4, h5, h6
{
	text-align: center;
	margin: 1rem auto;
	font-size: 1.5em;
}

h1
{
	font-size: 2.5em;
}

del,
small
{
	font-size: 0.75rem;
	color: var( --color_disabled );
}

del
{
	text-decoration: line-through dotted;
}

a,
a:link,
a:visited,
a:active,
a:hover,
mark
{
	color: var( --color_highlight );
	background: transparent;
}

a,
a:link,
a:visited,
a:active,
a:hover
{
	cursor: pointer;
	&:hover
	{
		text-decoration: underline;
	}
}

.button_styled,
button
{
	all: unset;

	display: block;
	
	text-align: center;

	padding: 0.25em 1em;
	margin: 1rem auto;

	color: var( --color_highlight );

	background: var( --color_background );
	outline: 1px solid var( --color_highlight );

	cursor: pointer;
	
	&:hover
	{
		text-decoration: underline;
	}
}

.fullscreen_canvas
{
	position: fixed;
	display: block;
	width: 100dvw;
	height: 100dvh;
}