:root {
	--fg: #D3C6AA;
	--bg: #2D353B;
	--bg1: #343F44;
	--blue: #7FBBB3;
	--dark-blue: #3A515D;
	--green: #A7C080;
	--dark-green: #425047;
	--red: #E67E80;
}

html {
	color: var(--fg);
	background-color: var(--bg);
	font-size: 100%;

	max-width: 100%;
	max-width: 100vw;
	max-width: 100dvw;
}

body {
	max-width: 80%;
	max-width: 80vw;
	max-width: 80dvw;
	
	margin: 0 2rem 0 2rem;
}

a {
	color: var(--green);
	font-weight: bold;
}

codeblock {
	color: var(--red);
	background-color: var(--bg1);
}

code {
	color: var(--red);
	background-color: var(--bg1);
}

@media (min-width: 576px) {
	body {
		display: block;
		margin: auto;
		max-width: 75%;
		max-width: 75vw;
		max-width: 75dvw;
	}
}

@media (min-width: 768px) {
	body {
		display: block;
		margin: auto;
		max-width: 66%;
		max-width: 66vw;
		max-width: 66dvw;
	}
}

@media (min-width: 992px) {
	body {
		display: block;
		margin: auto;
		max-width: 50%;
		max-width: 50vw;
		max-width: 50dvw;
	}
}

@media (min-width: 1200px) {
	body {
		display: block;
		margin: auto;
		max-width: 50%;
		max-width: 50vw;
		max-width: 50dvw;
	}
}

@media (min-width: 1400px) {
	body {
		display: block;
		margin: auto;
		max-width: 50%;
		max-width: 50vw;
		max-width: 50dvw;
	}
}

/* Orientation */
@media (orientation: landscape) {
	body {
		display: block;
		margin: auto;
		max-width: 50%;
		max-width: 50vw;
		max-width: 50dvw;
	}
}

/* User Preferences */
@media (prefers-color-scheme: dark) {}
@media (prefers-reduced-motion: reduce) {}

/* High Resolution */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {}