* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 16px;
}

/* ---------------- BASE ---------------- */

body {
	font-family: verdana, sans-serif;
	text-align: center;
	background: #0f1720;
	color: #d6dde3;

	font-size: 1.2rem;
	line-height: 1.6;
}

/* ---------------- TEXT ---------------- */

strong {
	color: #ffffff;
	font-weight: 700;
	font-size: 1.05em;
}

p {
	padding-bottom: 15px;
}

/* ---------------- LINKS ---------------- */

a {
	color: #20c997;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

a:hover {
	opacity: 0.85;
	text-decoration: underline;
}

/* ---------------- HEADINGS ---------------- */

h1 {
	font-weight: bold;
	font-size: 2rem;
	color: #e6edf3;
	margin-bottom: 10px;
}

h2 {
	font-weight: bold;
	font-size: 1.5rem;
	color: #e6edf3;

	margin-top: 18px;
	margin-bottom: 8px;
}

/* ---------------- ICONS ---------------- */

.github-icon {
	font-size: 28px;
}

li svg {
	color: #20c997;
	min-width: 16px;
}

/* ---------------- BUTTON ---------------- */

.github-button {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 16px;

	background-color: #1b2a36;
	color: #ffffff;

	border-radius: 6px;
	text-decoration: none;
	font-weight: 500;
}

.github-button:hover {
	background-color: #223544;
}

/* ---------------- LISTS ---------------- */

ul {
	margin: 0;
	padding-left: 18px;
}

ul ul {
	margin: 4px 0;
	padding-left: 18px;
}

li {
	display: flex;
	align-items: center;
	gap: 8px;

	padding: 2px 0;
	margin: 1px 0;

	font-weight: 500;
	font-size: 1.05rem;
	color: #c9d4dc;
}

/* ---------------- HEADER / NAV ---------------- */

header {
	background: #16222c;
	padding: 20px;
	color: #c9d4dc;
}

nav {
	position: sticky;
	top: 0;

	background: #16222c;
	border-bottom: 1px solid rgba(255,255,255,0.08);

	padding: 5px 15px;
	color: #c9d4dc;
	height: 40px;
}

/* ---------------- NAV ITEMS ---------------- */

.navitems,
.indexitems {
	color: #8fa0ad;
	text-decoration: none;
	font-size: 1.15rem;
}

/* ---------------- MAIN ---------------- */

main {
	flex: 1;
}

/* ---------------- SCROLL ---------------- */

.scroll-container {
	overflow-x: auto;
	overflow-y: hidden;

	scrollbar-width: none;
	-ms-overflow-style: none;
}

.scroll-container::-webkit-scrollbar {
	display: none;
}

/* ---------------- LAYOUT ---------------- */

section {
	display: flex;
	justify-content: center;
	margin: 20px;
}

/* ---------------- SIDEBAR ---------------- */

aside {
	position: fixed;
	top: 51px;
	left: 0;

	width: 350px;
	height: calc(94vh - 51px);

	overflow-y: auto;

	padding: 20px;

	background: #1b2a36;
	border: 1px solid rgba(255,255,255,0.06);

	border-radius: 12px;
	text-align: left;

	/* smooth scrolling feel */
	scroll-behavior: smooth;
}

/* ================= SCROLLBAR (WebKit) ================= */
aside::-webkit-scrollbar {
	width: 8px;
}

aside::-webkit-scrollbar-track {
	background: transparent;
}

aside::-webkit-scrollbar-thumb {
	background: rgba(144, 164, 174, 0.25);
	border-radius: 10px;
}

aside::-webkit-scrollbar-thumb:hover {
	background: rgba(144, 164, 174, 0.45);
}

/* ================= SCROLLBAR (Firefox) ================= */
aside {
	scrollbar-width: thin;
	scrollbar-color: rgba(144, 164, 174, 0.25) transparent;
}

/* ---------------- CONTENT BOXES ---------------- */

.plain {
	flex: 1 1 400px;
	padding: 20px;
	margin-bottom: 15px;
	max-width: 100vw;

	color: #d6dde3;
	line-height: 1.7;

	border-radius: 12px;
	text-align: left;
}

article {
	flex: 1 1 400px;

	background: #1b2a36;
	border: 1px solid rgba(255,255,255,0.06);

	padding: 20px;
	margin-bottom: 15px;
	max-width: 100vw;

	color: #d6dde3;
	line-height: 1.7;

	border-radius: 12px;
	text-align: left;
}

/* ---------------- ARTICLE FOOTER ---------------- */

article footer {
	text-align: right;
	padding-top: 15px;
	padding-bottom: 15px;
}

/* ---------------- BLOCKQUOTE ---------------- */

blockquote {
	padding-left: 20px;
	color: #8fa0ad;
}

/* ---------------- FOOTER ---------------- */

footer {
	clear: both;
	text-align: center;
	padding: 20px;

	border-top: 1px solid rgba(255,255,255,0.08);
	color: #8fa0ad;

	font-size: 1rem;
}

/* ---------------- FIGCAPTION ---------------- */

figcaption {
	font-style: italic;
	font-size: 1rem;
	color: #8fa0ad;
}

/* ---------------- RESPONSIVE ---------------- */

@media (min-width: 768px) {
	body {
		font-size: 1.05rem;
		line-height: 1.6;
	}

	h1 {
		font-size: 1.6rem;
	}

	h2 {
		font-size: 1.2rem;
	}

	li {
		font-size: 0.95rem;
	}

	.navitems,
	.indexitems {
		font-size: 1rem;
	}

	article,
	.plain {
		max-width: 70vw;
		line-height: 1.65;
	}

	footer {
		font-size: 0.9rem;
	}

	figcaption {
		font-size: 0.9rem;
	}

	aside {
		position: sticky;
	}
}