:root {
	--dark-theme-link: fuchsia;
	--dark-theme-background: #1e1e1e;
	--dark-theme-text: #f5eaea;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--dark-theme-background);
		color: var(--dark-theme-text);
	}

	a {
		color: var(--dark-theme-link);
	}
}

header {
	width: calc(100% - 2rem);
	text-align: left;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

#home {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin: 1rem;
}

#home > img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	padding: 1rem;
}

header > div {
	margin: 1rem 0 1rem 1rem;
}

header h1 {
	margin: 0;
}

body {
	max-width: 720px;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: start;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	margin: auto;
	padding: 1rem;
}

footer {
	text-align: center;
	margin: .5rem auto;
	color: #383838;
	font-size: .75rem;
}

/* Code block styling for light and dark modes */
pre, code {
	background-color: #f5f5f5;
	border-radius: 4px;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	max-width: 100%;
}

code {
	padding: 2px 4px;
	font-size: 0.9em;
}

pre {
	padding: 1rem;
	overflow-x: scroll;
	border: 1px solid #e0e0e0;
}

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

@media (prefers-color-scheme: dark) {
	pre, code {
		background-color: #2d2d2d;
		color: #f8f8f2;
	}
	
	pre {
		border-color: #404040;
	}
}