@import url('berkeley.css');

:root {
	font-family: 'BerkeleyMono', sans-serif;
	--fontSize: 13px;
}

@Supports (font-variation-settings: normal) {
	:root {
		font-family: 'BerkeleyMono var', sans-serif;
	}
}

:root[theme="dark"] {
	--color-background: #2c2e34;
	--color-foreground: #c5cdd9;

	--color-black: #3e4249;
	--color-red: #ec7279;
	--color-green: #a0c980;
	--color-yellow: #deb974;
	--color-blue: #6cb6eb;
	--color-magenta: #d38aea;
	--color-cyan: #5dbbc1;
	--color-white: #c5cdd9;

	--color-bright-black: #3e4249;
	--color-bright-red: #ec7279;
	--color-bright-green: #a0c980;
	--color-bright-yellow: #deb974;
	--color-bright-blue: #6cb6eb;
	--color-bright-magenta: #d38aea;
	--color-bright-cyan: #5dbbc1;
	--color-bright-white: #c5cdd9;


	--color-primary: var(--color-red);
	--color-primary-variant: var(--color-bright-cyan);
}

:root[theme="light"] {
	--color-background: #fafafa;
	--color-foreground: #4b505b;

	--color-foreground-mix: #E2E2DF;
	
	--color-black: #4b505b;
	--color-red: #d05858;
	--color-green: #608e32;
	--color-yellow: #be7e05;
	--color-blue: #5079be;
	--color-magenta: #b05ccc;
	--color-cyan: #3a8b84;
	--color-white: #fafafa;
	
	--color-bright-black: #4b505b;
	--color-bright-red: #d05858;
	--color-bright-green: #608e32;
	--color-bright-yellow: #be7e05;
	--color-bright-blue: #5079be;
	--color-bright-magenta: #b05ccc;
	--color-bright-cyan: #3a8b84;
	--color-bright-white: #fafafa;

	--color-primary: var(--color-red);
	--color-primary-variant: var(--color-bright-cyan);
}

:root {
	background: var(--color-background);
	color: var(--color-foreground);

	--default-padding: calc(var(--lineHeight) * 0.5);
	--max-body-width: calc(var(--lineHeight) * 64);
}

*:has(> .main-container) {
	display: grid;
	grid-template-columns: 1fr fit-content 1fr;
}

.main-container {
	max-width: var(--max-body-width);
	grid-column: 2;
}

::selection {
	background: var(--color-primary);
}

:root[theme=light] ::selection {
	color: var(--color-background);
}

h1 > a:hover,
h2 > a:hover,
h3 > a:hover,
h4 > a:hover,
h5 > a:hover,
h6 > a:hover,
a:hover {
	text-decoration: underline dashed;
	color: var(--color-primary);
}

a {
	color: inherit;
	//color: var(--color-foreground);
	text-decoration: none;
}

a::before {
	content: '[';
	padding-right: 0.2em;
}

a::after {
	content: ']';
	padding-left: 0.2em;
}

a:hover::selection {
	color: var(--color-background);
}

/*
card h1:first-of-type,
card h2:first-of-type,
card h3:first-of-type {
	padding-left: calc(var(--default-padding) / 2);
	padding-right: calc(var(--default-padding) / 2);
	box-shadow: var(--default-padding) var(--default-padding) 0px;
	 display: inline-block;
}*/

card h1:first-of-type,
card h2:first-of-type,
card h3:first-of-type {
	/*margin-top: var(--default-padding);*/
	margin-left: var(--default-padding);
	display: flex;
}

r-cell[span]:has(> card) { display: flex; }
r-cell[span] > card { flex: 1; }

card h1:first-of-type::after,
card h2:first-of-type::after,
card h3:first-of-type::after {
	content: "";
	background: var(--color-background);
	flex: 1;
	margin: auto var(--default-padding);
	height: var(--default-padding);
	opacity: 75%;

	clip-path: polygon(
		0% 0%,
		calc(100% - var(--default-padding)) 0%,
		100% 100%,
		0% 100%
	);
}

:root[theme=dark] .light-only { display: none; }
:root[theme=light] .dark-only { display: none; }

:root[theme=light] card {
	background: var(--color-foreground-mix);
	//color: var(--color-background);

	//border: dashed 0.25em var(--color-foreground);

	padding: var(--default-padding);
	--corner: calc(var(--default-padding) * 2);
	--corner-double: calc(var(--default-padding) * 4);

	margin-bottom: calc(var(--default-padding) * 2);

	box-sizing: border-box;
	display: inline-block;
}

:root[theme=dark] card {
	background: var(--color-foreground);
	color: var(--color-background);

	padding: var(--default-padding);
	--corner: calc(var(--default-padding) * 2);
	--corner-double: calc(var(--default-padding) * 4);

	margin-bottom: calc(var(--default-padding) * 2);
	display: inline-block;
}

:root card[stripe] {
	padding-bottom: calc(var(--lineHeight) * 2);
	position: relative;
}

:root card[stripe]::after {
	content: "";
	width: 100%;
	height: var(--lineHeight);

	background: url('/static/res/stripes-color.svg');
	background-size: contain;
	background-repeat: repeat-x;

	position: absolute;
	bottom: var(--default-padding);
	left: 0;
	right: 0;
}

card[corner] {
	clip-path: polygon(
		0% 0%,
		calc(100% - var(--corner)) 0%,
		100% var(--corner),
		100% 100%,
		0% 100%
	);
}

card[corner="2"] {
	clip-path: polygon(
		0% 0%,
		calc(100% - var(--corner-double)) 0%,
		100% var(--corner-double),
		100% 100%,
		0% 100%
	);
}

i.fa-nbsp {
	padding-right: var(--default-padding);
}
