:root {
	--bg: #1e1f21;
	--fg: #eeeeee;
	--fg-link: #88a2bc;
	--code-bg: #0e0f11;
	--code-fg: #eeeeee;
	--quote-bg: #0e0f11;
	--quote-fg: #bbbbbb;
}

html,
body {
	height: 100%;
	padding-left: 1px;
	padding-bottom: 10px;
}

body {
	background: var(--bg);
	color: var(--fg);
	font-family: serif;
	font-size: 16px;
	max-width: 50%;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#main-container {
    display: flex; /* Rende il contenitore flex per allineare i figli orizzontalmente */
    width: 100%; /* Assicura che occupi tutto lo spazio disponibile limitato dal body */
    flex: 1;
}

#side-bar {
    width: 200px; /* Imposta una larghezza fissa per la tua sidebar. Puoi modificarla. */
    padding-right: 20px; /* Aggiunge spazio tra la sidebar e il contenuto */
    flex-shrink: 0; /* Impedisce alla sidebar di rimpicciolirsi se il contenuto è troppo grande */
}

article {
	flex: 1;
}

/* --- Regole per le immagini dentro l'articolo --- */
article img {
    max-width: 300px; /* Limita la larghezza massima. Puoi aumentare o diminuire questo numero a tuo piacimento! */
    height: auto; /* Fa in modo che l'altezza si adatti automaticamente per non deformare l'immagine */
}

/* header */
header h1 {
	/* font-size: 35px; */
	font-style: italic;
}

header a {
	color: var(--fg-link);
	text-decoration: none;
}
/* links */
a {
	color: var(--fg-link);
	text-decoration: underline;
	text-decoration-style: dotted;
}

a:hover {
	background: var(--fg-link);
	color: var(--fg);
	font-style: italic;
}

blockquote {
	color: var(--quote-fg);
	display: block;
	margin-left: 20px;
}

code {
	color: var(--code-fg);
	padding: 0.1em 0.25em;
}

pre {
	color: var(--code-fg);
	padding: 2px 2px;
	overflow-x: auto;
	margin: 1rem 0;
}

pre code {
	background: none;
	padding: 0;
}