blog.css

h2 {
	margin-bottom: 0.25rem;
}
time {
	opacity: 0.8;
}
.discussion {
	margin-left: 1rem;
}

.post-entry {
	margin-bottom: 2rem;
}

section h2:nth-child(n + 2) {
	margin-top: 3rem;
	margin-bottom: -2rem;
}

@font-face {
	font-family: "Euler Math";
	src: url("fonts/Euler-Math.otf") format("opentype");
}
math {
	font-family: "Euler Math";
	font-size: 1.1rem;
	color: #8d00d9;
}

.table-wrapper {
	margin-left: -7rem;
	width: 52rem;
	background-color: #00000010;
	overflow: auto;
}
table {
	width: 100%;
	border-collapse: collapse;
}
th, td {
	padding: 0.25rem 0.5rem;
	border: 0.25rem solid #ffffff;
}

pre {
	margin-left: -7rem;
	width: 52rem;
	font-size: 0.85rem;
	padding: 0.75rem;
	overflow: auto;
	background-color: #00000008;
}
pre code {
	font-family: 'Roboto Mono', monospace;
	color: #000000;
}

.expansible-code {
	position: relative;
}
.expansible-code > input {
	appearance: none;
	margin: 0;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0.25rem;
	z-index: 1;
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
	cursor: pointer;
}
.expansible-code > input::before {
	content: "Expand";
}
.expansible-code > .highlighted {
	height: 20em;
	overflow: hidden;
}
.expansible-code > label {
	position: absolute;
	left: -0.75rem;
	top: -0.75rem;
	width: calc(100% + 1.5rem);
	height: calc(100% + 1.5rem);
	padding-block: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	background-image: linear-gradient(to bottom, transparent, #d0d0d0);
	cursor: pointer;
	font-size: 0;
}
.expansible-code > input:checked + .highlighted {
	height: auto;
	overflow: visible;
}
.expansible-code > input:checked, .expansible-code > input:checked ~ label {
	display: none;
}

.diagram {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: -7rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	width: 52rem;
}
.diagram > * {
	max-width: 100%;
	height: auto;
}
.diagram > iframe {
	width: 100%;
}
.epilepsy {
	display: block;
	font-weight: normal;
	background-color: #db4f37;
	color: #ffffff;
	padding: 1rem;
	margin-bottom: 1rem;
}

blockquote {
	border-left: 0.375rem solid #ed79a9;
	background-color: #f2befa;
	margin: 1rem 0;
	padding: 0.5rem;
}
blockquote > :first-child {
	margin-top: 0;
}
blockquote > :last-child {
	margin-bottom: 0;
}

aside {
	position: absolute;
	left: 100%;
	margin-top: -0.5rem;
	width: 15rem;
	padding: 0.5rem;
	background-color: #fce5ff;
	z-index: 1;
}
aside > :first-child {
	margin-top: 0;
}
aside > :last-child {
	margin-bottom: 0;
}

.only-dark {
	display: none;
}

@media all and (prefers-color-scheme: light) {
	.hljs-section, .hljs-title {
		color: #00779f !important; /* Contrast */
	}
}

@media all and (prefers-color-scheme: dark) {
	math {
		color: #cd91ed;
	}
	aside {
		background-color: #361c39;
	}
	blockquote {
		border-left-color: #9c2254;
		background-color: #4e2554;
	}
	.table-wrapper {
		background-color: #ffffff10;
	}
	pre {
		background-color: #00000080;
	}
	th, td {
		border-color: #160117;
	}
	pre code {
		color: #ffffff;
	}
	.hljs-comment {
		color: #7f8591 !important; /* Constrast */
	}
	.expansible-code > label {
		background-image: linear-gradient(to bottom, transparent, #000000);
	}
	.only-light {
		display: none;
	}
	.only-dark {
		display: block;
	}
}

@media screen and (max-width: 1300px) {
	.aside-group {
		display: flex;
		flex-direction: column;
	}
	.aside-group > :nth-child(2) {
		margin-top: 0;
	}
	.aside-group > :last-child {
		margin-bottom: 0;
	}
	.aside-group > aside {
		order: 1000;
		margin-top: 1rem;
	}

	aside {
		position: static;
		width: 100%;
	}
}

@media screen and (max-width: 1000px) {
	pre, .diagram, .table-wrapper {
		margin-left: 0;
		width: 100%;
	}
}