:root {
	color-scheme: light dark;
	/* Variables */
	--background-color: #FFFFFF;
	--text-color: #000;
	--light-text-color: #C4C4C4;
	--highlight-color: #EB212E;
	--code-background-color: #F3F3F3;
}

* {
	margin: 0;
	padding: 0;
}

@font-face {
	font-family:'Cartridge Bold';
	src: url('/fonts/Cartridge-Bold.woff') format('woff'),
		 url('/fonts/Cartridge-Bold.woff2') format('woff2');
}

@font-face {
	font-family:'Calluna Light';
	src: url('/fonts/Calluna-Light.woff') format('woff'),
		 url('/fonts/Calluna-Light.woff2') format('woff2');
}

@font-face {
	font-family:'IBM Plex Mono';
	src: url('/fonts/IBMPlexMono-Regular.woff') format('woff'),
		 url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}

body {
	color: var(--text-color);
	background-color: var(--background-color);
	padding: 16px;
}

.content {
	font-family: 'Calluna Light', serif;
	font-weight: 300;
}

h1 {
	font-size: 26px;
	font-weight: 300;
	padding: 30px 0px 0px 0px;
}

h2 {
	font-size: 20px;	
	font-weight: 300;
}

p {
	font-weight: 300;
	font-size: 20px;
	line-height: 150%;
}

ul {
	list-style-type: square;
}

li {
	font-weight: 300;
	line-height: 30px;
}

hr {
    border: 0;
    border-bottom: 1px dotted var(--highlight-color);
}

blockquote { 
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
	font-weight: 300;
	font-size: 16px;
	line-height: 26px;
}

sup a {
	border-bottom: none !important;
}

a {
	color: var(--highlight-color);
	text-decoration: none;
	border-bottom: 1px dotted var(--highlight-color);
}

a:hover {
	color: var(--highlight-color);
	text-decoration: none;
	border-bottom: 1px solid var(--highlight-color);
}

.header {
	text-align: center;
    padding: 30px 0px 30px 0px;
}

.header a {
	color: var(--text-color);
	text-decoration: none;
	border-bottom: none;
}

.header a:hover {
	color: var(--text-color);
	text-decoration: none;
	border-bottom: none;
}

.title {
	font-family: 'Cartridge Bold', serif;
	font-weight: 400;
	font-size: 40px;
	color: var(--text-color);
	padding: 30px 0px 0px 0px;
}

.title a {
	color: var(--text-color);
	text-decoration: none;
	border-bottom: none;
}

.title a:hover {
	color: var(--text-color);
	text-decoration: none;
	border-bottom: none;
}

.date {
	font-family: 'Cartridge Bold', serif;
	font-weight: 400;
	font-size: 16px;
	color: var(--light-text-color);
	padding: 5px 0px 0px 0px;
}

.footer {
	font-family: 'Calluna Light', serif;
	font-weight: 400;
	font-size: 14px;
	color: var(--light-text-color);
}

.footer a {
	font-size: 16px;
	color: var(--highlight-color);
	text-decoration: none;
	border-bottom: 1px dotted var(--highlight-color);
}

.footer a:hover {
	font-size: 16px;
	color: var(--highlight-color);
	text-decoration: none;
	border-bottom: 1px solid var(--highlight-color);
}

.footnotes p {
    font-size: 16px !important;
}

pre {
	width: auto;
	left: 0;
	right: 0;
	overflow-x: auto;
	background-color: var(--code-background-color);
	padding: 5px;
	line-height: 1.25;
}

code {
	font-family: 'IBM Plex Mono', monospace !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	background-color: var(--code-background-color);
	line-height: 1.25;
}

/* Splash Syntax Highlighting */
.splash-keyword {
	color: #9B2393; /* Xcode light theme: purple */
}

.splash-string {
	color: #C41A16; /* Xcode light theme: red */
}

.splash-type {
	color: #0F68A0; /* Xcode light theme: blue */
}

.splash-call {
	color: #326D74; /* Xcode light theme: teal */
}

.splash-property {
	color: #326D74; /* Xcode light theme: teal (same as function calls) */
}

.splash-number {
	color: #1C00CF; /* Xcode light theme: blue-purple */
}

.splash-comment {
	color: #536570; /* Xcode light theme: gray */
	font-style: italic;
}

/* Dark mode adjustments - Dracula theme */
@media (prefers-color-scheme: dark) {
	.splash-keyword {
		color: #FF79C6; /* Dracula: pink */
	}
	
	.splash-string {
		color: #F1FA8C; /* Dracula: yellow */
	}
	
	.splash-type {
		color: #8BE9FD; /* Dracula: cyan */
	}
	
	.splash-call {
		color: #50FA7B; /* Dracula: green */
	}
	
	.splash-property {
		color: #BD93F9; /* Dracula: purple */
	}
	
	.splash-number {
		color: #BD93F9; /* Dracula: purple */
	}
	
	.splash-comment {
		color: #6272A4; /* Dracula: comment blue */
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--background-color: #222831;
		--text-color: #eeeeee;
		--light-text-color: #6b778d;
		--highlight-color: #32e0c4;
		--code-background-color: #393e46;
	}
}