@font-face {
	font-family: Lexend;
	src: local(Lexend), url(/fonts/Lexend.ttf);
}

@font-face {
	font-family: lxgw;
	src: url(/fonts/LXGWWenKai-Regular.ttf);
}

@font-face {
	font-family: noto sans arabic;
	src: url(/fonts/NotoSansArabic-VariableFont_wdth\,wght.ttf);
}

@font-face {
	font-family: jetbrains;
	src: local(Jetbrains Mono), url(/fonts/JetBrainsMono-VariableFont_wght.ttf);
}

@font-face {
	font-family: jetbrains;
	font-style: italic;
	src: local(Jetbrains Mono), url(/fonts/JetBrainsMono-Italic-VariableFont_wght.ttf);
}

body {
	--font-size: clamp(1rem, 0.8929rem + 0.5357vw, 1.375rem);
	--font-size-h1: calc(var(--font-size) * 1.8);
	--font-size-h2: calc(var(--font-size) * 1.6);
	--font-size-h3: calc(var(--font-size) * 1.3);
	--font-size-h4: calc(var(--font-size) * 1.2);
	--font-size-small: calc(var(--font-size) * 0.8);
	background-color: var(--bg);
	color: var(--text);
	font-family: Lexend, lxgw, noto sans arabic;
	font-size: var(--font-size);
	margin: 0;
	--header: #83254f;
}

@media (prefers-color-scheme: dark) {
	body {
		--bg: #121212;
		--text: #fff9f2;
		--link: #f4999c;
	}
}

@media (prefers-color-scheme: light) {
	body {
		--bg: #fff9f2;
		--text: #121212;
		--link: #e56b6f;
	}
}

hr {
	border: 1px solid var(--text);
	margin: 2em 0;
	opacity: .3;
}

#header {
	background-color: var(--header);
	display: flex;
	padding: 1rem;
	justify-content: space-between;
	align-items: center;
	user-select: none;
	position: sticky;
	top: 0;
	z-index: 2;

	& a {
		color: #fff9f2;
	}

	& .nav {
		display: flex;
		gap: 2rem;
	}
}

[id] {
	scroll-margin-top: 3em;
}

a,
a:visited {
	color: var(--link);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.external-link::after {
	content: '☍';
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.5;
}

h1 {
	font-size: var(--font-size-h1);
}

h2 {
	font-size: var(--font-size-h2);
	margin-top: 1.5em;
}

h3 {
	font-size: var(--font-size-h3);
	margin-top: 1.5em;
}

h4 {
	font-size: var(--font-size-h4);
	margin-top: 1.5em;
}

main {
	margin: 1em auto;
	max-width: 800px;
	padding: 0 1em;

	& .footnote-ref {
		vertical-align: baseline;
	}
}

p {
	line-height: 2;
	hyphens: auto;
	margin: 1em 0;
	text-align: justify;
	text-indent: 2em;

	&:has(br) {
		text-indent: 0;
	}
}

blockquote {
	margin: 1em 2em;
	padding: 0 1.5em;
	position: relative;
	border-left: 4px solid var(--link);

	&>p {
		text-indent: 0;
	}
}

[dir="rtl"] {
	font-size: var(--font-size-h4);
}

img {
	width: -webkit-fill-available;
	display: block;
	margin: 1em;
}

details {
	margin: 1em 0 1em 1em;

	&>summary {
		cursor: pointer;
		line-height: 2;
		user-select: none;
	}
}

ul {
	list-style: disc;
}

ul,
ol {
	padding-inline-start: 3em;
	line-height: 2;
}

li {
	margin: .5em 0;
}

li::marker {
	color: var(--link);
}

code[class*="language-"],
pre[class*="language-"] {
	font-family: jetbrains !important;
}

code {
	font-family: jetbrains, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	hyphens: none;
	color: #fff9f2;
}

:not(pre)>code {
	background-color: #222;
	padding: .2em;
	border-radius: 4px;
}

:not(pre)>code[class*="language-"],
pre[class*="language-"] {
	background-color: #222 !important;
}

.footnotes-list {
	font-size: var(--font-size-small);
}

.footnotes-list p {
	text-indent: 0;
}

.pages {
	display: flex;
	gap: 1em;
	justify-content: center;
	flex-wrap: wrap;
	margin: 2em;
}

.grid {
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: .5em;

	&>* {
		line-height: 2;
	}

	&>:nth-child(2n-1) {
		text-align: right;
	}
}

.date {
	opacity: .5;
	text-indent: 0;
	font-family: jetbrains, 'Courier New', Consolas, monospace;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	font-size: var(--font-size-small);
	line-height: 2;
}

p:has(.katex-display) {
	text-indent: 0;
}

.katex {
	font-size: 1em !important;
	user-select: none;
}

.spoiler {
	background-color: var(--text);
	transition: all .2s;
	cursor: help;
	border-radius: 4px;

	&:focus {
		background-color: transparent;
	}
}

.prev-next {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1em;

	& p {
		text-indent: 0;
	}

	& a {
		display: flex;
		align-items: center;
	}
}

::selection {
	color: #fff9f2;
	background-color: var(--header);
}

@media only screen and (max-width: 480px) {
	p {
		text-align: start;
		text-indent: 0;
	}

	ul,
	ol {
		padding-inline-start: 2em;
	}

	.grid {
		grid-template-columns: 1fr;

		&>:nth-child(2n-1) {
			text-align: left;
		}

		&>:nth-child(2n) {
			margin-left: 1em;
		}
	}
}