html, body {background:black; }

pre {background:#f4f4f4; padding:10px; border:1px solid #ddd; overflow-x:auto;}
code {background:#f4f4f4; padding:2px 4px; border-radius:4px;	 font-family: Consolas, monospace;}

/* Reset default styles */

* {	margin: 0;	padding: 0;	box-sizing: border-box;	scroll-behavior: smooth;}
body {	line-height: 1.6;	overflow-x: hidden;}
img {max-width:100vw; display:block; margin:auto; }
a {text-decoration:none; font-weight:bold; }
a:hover {color:red; }
pre code {display: block;  padding: 0 10px 20px 10px; white-space: pre-wrap; font-size:16px; line-height:1.2em;}
img { display:block; max-width: 100%;  height: auto; margin:0 auto; }
span {display:inline-block;}
button, .button { font-family: inherit;  font-size: 16px; padding: 4px 6px; margin:0 4px; box-sizing: border-box; cursor:pointer; border-radius:6px; }
input,select,textarea {  font-family: inherit;  font-size: 16px; width:100%; max-width: 300px;  padding: 4px;  margin: 4px;  box-sizing: border-box; border:1px solid #888; }

@media (max-width: 768px) {
    * {
        font-size: 90%;
		}
}

/* ---------- FONTS ---------- */

/* // <weight>: Use a value from 200 to 900 */
.serif {  font-family: "Literata", serif;  font-optical-sizing: auto;  font-weight: 400;  font-style: normal;}

/* // <weight>: Use a value from 100 to 900 */
body, .sans {  font-family: "Inter", sans-serif;  font-optical-sizing: auto;  font-weight: 400;  font-style: normal;}

/* Google Material Icons */
.material-symbols-outlined { font-variation-settings:  'FILL' 1,  'wght' 400,  'GRAD' 0,  'opsz' 32;    display:inline-flex; vertical-align:middle; font-size:inherit !important; padding-bottom: 4px; color:inherit; }

/* ---------- TYPOGRAPHY ---------- */

div {font-size:1.2rem; }
h1 {font-size:3.1rem; line-height:0.9; font-weight:600; margin: 1rem 0 2rem 0; }
h2 {font-size:2.2rem; line-height:1.1; font-weight:650; margin: 1rem 0; }
h3 {font-size:1.8rem; line-height:1.1; font-weight:500; }
h4 {font-size:1.5rem; line-height:1.5; font-weight:700; }
h5 {font-size:1.5rem; line-height:1.5; font-weight:700; }
h6 {font-size:1.4rem; line-height:1.5; font-weight:700; }
p {font-size:1.4rem; line-height:1.4; margin: 1rem 0; }
.smalltext, .weefont {font-size:0.9rem; }

/* ---------- NAV BAR ---------- */

header {	background: #888;	opacity: 0.7;	z-index: 10;	position: fixed;	top:0;	left:0;	width:100vw;}

.nav-container {	margin: auto;	padding: 0.3rem 2rem;	display: flex;	justify-content: space-between;	align-items: center;	cursor: pointer;}
.logo {	font-size: 1.3rem;	font-weight:bold;	display:inline-block;	padding-right:10px;	text-decoration: none;}
.menu-btn {	font-size: 1.5rem;	cursor: pointer;	user-select: none;}

/* ---------- FULLPAGE MENU ---------- */

.fullpage-menu {position: fixed;	inset: 0;	background: #ccc;	color: #000;	transform: translateY(-100%);	transition: transform 0.5s ease;	z-index: 9;	overflow-y: auto;	display: flex;	justify-content: center;	align-items: left;}
.fullpage-menu.open {	transform: translateY(0); }
.fullpage-menu ul {	max-width: 1600px;	list-style: none;	text-align: left; }
.fullpage-menu a {	margin: 0.5rem 0;	display:inline-block;	padding-right:60px;	color: #000;	text-decoration: none;	font-size: 1.2rem; }
.fullpage-menu a:hover {	opacity: 0.7; }

.menu-content {	padding: 2rem;	width:100%;	max-width: 1600px;	margin:60px auto 0 auto; }

/* ---------- MAIN CONTENT ---------- */
.content {	max-width: 1600px;	margin: 40px auto;	padding: 20px; }

section {	margin-bottom: 2rem;}