@import "hyena_navbar.css";
@import "hyena_images.css";
@import "hyena_code.css";

:root {
	--color-bg-contrast: hsl(0, 0%, 10%);
	--color-bg: hsl(0, 0%, 15%);
	--color-half-contrast: hsl(0, 0%, 60%);
	--color-contrast: hsl(0, 0%, 75%);
	--color-text: hsl(0, 0%, 85%);
	--color-focus: white;
	--src-img: url('/img/icon.png');

	--navbar-height: 64px;
	--max-width: 1200px;
	--padding-standard: 1.4rem;
	--logo-size: 48px;
	--top-margin: 64px;
}
[data-theme="light"] {
	--color-bg: hsl(0, 0%, 85%);
	--color-bg-contrast: hsl(0, 0%, 70%);
	--color-half-contrast: hsl(0, 0%, 40%);
	--color-contrast: hsl(0, 0%, 25%);
	--color-text: hsl(0, 0%, 15%);
	--color-focus: black;
}

* {
	padding: 0;
}
html, body {
	margin: 0;
	scrollbar-gutter: stable;
}
h1 {
	color: var(--color-focus);
}
body {
	font-family: "Exo 2", "Orbitron", Arial, Helvetica, sans-serif;
	background-color: var(--color-bg);
	color: var(--color-text);
	display: flex;
	flex-direction: column;
	padding-top: var(--top-margin);
}
content {
	max-width: 1200px;
	align-self: center;
	
	padding-left: 50px;
	padding-right: 50px;
}
h1 {
	font-size: 3.8em;
	font-family: "Orbitron", Arial, Helvetica, sans-serif;
}
h2 {
	font-weight: 600;
	font-size: 2.6em;
	color: royalblue;
}
h3 {
	font-weight: 300;
	font-size: 2.0em;
}

@media screen and (max-width: 700px) {
	h1 { font-size: 3.6em; }
	h2 { font-size: 2.2em; }
	h3 { font-size: 1.5em; }
}
img {
	width: 100%;
}
p {
	margin-bottom: 2em;
	font-size: 1.2em;
}
pre {
	white-space: pre-wrap;
	margin: 1.6em;
}
@media screen and (max-width: 700px) { pre { margin: 0.5em; margin-bottom: 1.6em; } }