body {  /* or pagecontainer for fonts? */
	font-family: 'Andika', serif; 
	font-size: 12px; 
	background: var(--bg);
	color: var(--fg);
}

.pagecontainer {
	display: flex;
	min-height: 100vh;
}

.sidebar {
	width: 100px; 
	display: flex; 
	flex-direction: column;
	gap: 10px; 
	background-color: var(--panel); 
	padding-right: 20px; 
	padding-left: 10px;
}

.sidebar_entry {
	border: 1px solid var(--border);
	padding: 0.5rem;
	margin-bottom: 0.25rem;
	border-radius: 0.25rem;
	word-wrap: break-word;
	overflow-wrap: break-word;
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--panel);
}

.main {
	flex: 1; /* Takes up all remaining space to the right. */ 
	padding: 20px; 
}

h2 {
	color: var(--green);
}

h3 {
	color: var(--blue);
}

.hiddenlink a {
  color: inherit;
  text-decoration: inherit;
}

a { 
	color: var(--orange);
}

/* To handle mobile. */
/*
@media (max-width: 768px) {
	.pagecontainer {
		flex-direction: column; 
	}

	.sidebar {
		width: 100%; 
		flex-direction: row; 
		justify-content: center; 
		gap: 20px; 
		padding: 15px; 
	}

	.main {
		padding: 20px; 
	}
}
*/

:root {
	theme: test_dark test_light citruszest; 
	--bg: #121212;
	--fg: #BFBFBF;
	--fg-muted: #BFBFBF; /* need to differentiate from fg */
	--border: #eeeeee;
	--panel: #232323;
	--orange: #FF7431;
	--green: #00CC7A;
	--red: #FF5454;
	--blue: #00bfff;
}

@media (prefers-color-scheme: dark) {
	/* TODO: requires JS too I think, especially to switch. */
}