/* The date this page was created on is unknown. It was created by James Petersen
 * This page was last updated on March 9, 2025 by James Petersen.
 * This page is at https://jamespetersen.ca/style/main, and may also be found on
 * other pages within subdomains. (Ex: https://documents.jamespetersen.ca/style/main)
 * (C) Copyright 2021,2025 James Petersen.
 */

@charset "UTF-8";
@import url("fonts/cmu/font");

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #111;
		--off-bg-color: #222;
		--color: #ddd;
		--link-color: #0aa;
		--link-active-color: #ee5555;
		--link-visited-color: #fa2a90;
		--code-border: 2px solid #444;
		--code-background-colour: #111;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--color: #383838;
		--off-bg-color: #d8d8d8;
		--bg-color: #e7e7e7;
		--link-color: #0052e7;
		--link-active-color: #ee0000;
		--link-visited-color: #941352;
		--code-border: 2px solid #ccc;
		--code-background-colour: #eee;
	}
}

:root {
	--link-decoration: underline;
	--link-hover-decoration: none;
	--font-serif: 'CMU Serif';
	--font-headings: 'CMU Serif';
	--font-headings-fallback: serif;
	--font-mono: 'CMU Typewriter';
	--font-sans: 'CMU Sans-Serif';
	--default-font-size: 18px;
	--code-border-radius: 10px;
	--code-block-padding: 5px;
	--code-inline-padding: 0px 3px;
	--tab-size: 4;
	--default-line-height: 1.6;
	--default-body-margin: 40px auto;
	--default-body-max-width: 1000px;
	--default-body-padding: 0 10px;
	--default-font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-headings), var(--font-headings-fallback);
}

a {
	text-decoration: var(--link-decoration);
}

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

a:visited {
	color: var(--link-visited-color);
}

body {
	color: var(--color);
	background-color: var(--bg-color);
	line-height: var(--default-line-height);
	margin: var(--default-body-margin);
	max-width: var(--default-body-max-width);
	padding: var(--default-body-padding);
	font-weight: var(--default-font-weight);
}

html {
	font-family: var(--font-sans), sans;
	font-size: var(--default-font-size);
}

p, p * {
	line-height: var(--default-line-height);
}

code, pre {
	font-family: var(--font-mono), monospace;
}

pre code {
	display: block;
	border: var(--code-border);
	border-radius: var(--code-border-radius);
	background-color: var(--code-background-colour);
	padding: var(--code-block-padding);
	overflow-x: scroll;
}

code.inline {
	overflow-wrap: anywhere;
	border: var(--code-border);
	border-radius: var(--code-border-radius);
	background-color: var(--code-background-colour);
	padding: var(--code-inline-padding);
}

.sans {
	font-family: var(--font-sans), sans;
}

pre { -moz-tab-size: var(--tab-size); }
pre { tab-size: var(--tab-size); }

a:hover {
	text-decoration: var(--link-hover-decoration);
}

#jp_footer_reflect_page {
	overflow-wrap: anywhere;
}

a.novisited:visited {
	color: var(--link-color);
}

a.novisited.nocolor:visited {
	color: var(--color);
}

hr {
	width: 100%;
}

a.nocolor {
	color: var(--color);
}

.noscroll {
	overflow: hidden;
}

a:active, a.novisited:active {
	color: var(--link-active-color);
}

q {
	quotes: "“" "”" "'" "'";
}

.right {
	text-align: right;
}

.row-flexbox {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 1cm;
}