:root {
	color-scheme			: light dark;
	--bg-color			: light-dark(white, #161616);
	--fg-color			: light-dark(black, white);

	--link-color			: light-dark(#483d8b, #add8e6);

	--navbar-bg-color		: light-dark(whitesmoke, #202020);
	--navbar-border-color		: gray;

	--accent-color-one		: #3875D3;
	--accent-color-two		: #793434; 

	--green				: light-dark(#696a00, #b8bb26);
	--yellow			: light-dark(#8e6b00, #d8a657);
	--red				: light-dark(#931101, #fb4934);
	--blue				: #3875D3;

	--syntax-var-color		: light-dark(#696a00, #eeffde);
	--syntax-value-color		: light-dark(#8e6b00, #ffe0b0);
	--syntax-program-color		: light-dark(#931101, #ffcac4);

	--content-margin		: 8px;
}

body {
	display				: flex;
	flex-wrap			: wrap;
	margin				: 0;
	background-color		: var(--bg-color);
}
main {
	margin				: 0 10px;
}
a {
	text-decoration			: inherit;
	color				: inherit;
}
p {
	margin				: var(--content-margin);
}
p a {
	color				: var(--link-color);
}
pre {
	border: thin dashed gray; 

	padding: 10px;
	margin: var(--content-margin);

	width: fit-content;
	max-width: 85vw;
	overflow-y: scroll;
}

#navbar {
	flex-grow			: 1;
	display				: flex;
	align-items			: center;
	justify-content			: space-between;
	width				: 100%;

	background			: var(--navbar-bg-color);
	border-bottom			: 1px solid var(--navbar-border-color);

	padding				: 4px 12px;
}
#navbar a {
	color				: inherit;
}
#navbar-left a {
	animation			: blink_keyframes 2s steps(1) infinite;
	padding				: 0 4px;
}
#navbar-center a {
	font-weight			: bold;
}
#navbar-right a {
	text-decoration			: underline;
	margin				: 5px;
}

@keyframes blink_keyframes {
	0% {
		background-color	: var(--fg-color);
		color			: var(--navbar-bg-color);
	}
	50% {
		background-color	: var(--navbar-bg-color);
		color			: var(--fg-color);
	}
	100% {
		background-color	: var(--fg-color);
		color			: var(--navbar-bg-color);
	}
}

li {
	color				: var(--accent-color-two);
}
li span {
	color				: var(--fg-color);
}

.accent {
	color				: var(--accent-color-one);
	font-style			: italic;
}
.dim {
	opacity				: 70%;
}

.green {
	color				: var(--green);
}
.yellow {
	color				: var(--yellow);
}
.red {
	color				: var(--red);	
}
.syntax-var {
	color				: var(--syntax-var-color);
}
.syntax-value {
	color				: var(--syntax-value-color);
}
.syntax-program {
	color				: var(--syntax-program-color);
}