index.css

* {
	box-sizing: border-box;
	margin: 0;
}

/* Global focus outline reset */
*:focus:not(:focus-visible) {
	outline: none;
}

/* Firefox */
* {
	scrollbar-color: var(--theme-dim-light) transparent;
}

/* Webkit */
/* Make scrollbars transparent except for main page scrollbar. */
::-webkit-scrollbar,
::-webkit-scrollbar-track {
	background-color: transparent;
}
body::-webkit-scrollbar,
body::-webkit-scrollbar-track {
	background: var(--theme-bg-gradient);
}

::-webkit-scrollbar-thumb {
	background-color: var(--theme-dim-light);
	border: 4px solid transparent;
	background-clip: content-box;
	border-radius: 10px;
}

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}
}

/*
	Ensure that the auto-hiding/showing address bar on iOS Safari
	always has a background color matching our theme.
*/
html {
	background: var(--theme-bg-gradient-bottom);
}

/*
	Use a pseudo-element to add a gradient background that covers the entire viewport.
	Using a regular fixed background does not work properly on mobile browsers like iOS Safari.
*/
body::before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -999;
	background: var(--theme-bg-gradient);
}

body {
	color: var(--theme-text);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
}

nav ul {
	list-style: none;
	padding: 0;
}

.content > section > * + *,
.content > section > blockquote > * + *,
.content > section > :is(ul, ol) > li > * + *,
.content details > * + *, 
.content * > astro-slot > * + * {
	margin-top: 1.25rem;
}

.content > section > :is(ul, ol) > li > * + * {
	margin-bottom: 1.25rem;
}

.content > section > :is(ul, ol) > li,
.content > section > :is(ul, ol) > li > * + *,
.content > section > :is(ul, ol) > li > :is(ul, ol) > li,
.content > section > :is(ul, ol) > li > :is(ul, ol) > li > * + * {
	margin-top: 0.5rem;
}

.content > section > :first-child {
	margin-top: 0;
}

.content > section > :is(ul, ol),
.content > section > :is(ul, ol) :is(ul, ol) {
	padding-inline-start: 1.5em;
}

/* Typography */
:is(h1, h2, h3, h4, h5, h6),
.content > section > .heading-wrapper {
	margin-bottom: 1rem;
	font-weight: bold;
	line-height: 1.3;
}

:is(h1, h2, h3, h4, h5, h6) + *,
.content > section > .heading-wrapper + * {
	margin-top: 0;
}

h1,
h2 {
	max-width: 40ch;
}

:is(h2):not(:first-child),
.heading-wrapper:not(:first-child):is(.level-h2) {
	margin-top: 4rem;
}

:is(h3, h4):not(:first-child),
.heading-wrapper:not(:first-child):is(.level-h3, .level-h4) {
	margin-top: 3rem;
}

:is(h5, h6):not(:first-child),
.heading-wrapper:not(:first-child):is(.level-h5, .level-h6) {
	margin-top: 2rem;
}

:is(h1, h2, h3, h4, h5, h6, .heading-wrapper) + :is(h1, h2, h3, h4, h5, h6, .heading-wrapper):not(:first-child) {
	margin-top: 0;
}

:is(h1, h2, h3, h4, h5) code {
	--border-radius: 4px;
	--padding-block: 0.1rem;
	--padding-inline: 0.4rem;
	font-weight: 400;
}

h1 {
	font-size: 2.5rem; /* 40px */
	font-weight: 900;
}

@media (min-width: 37.75em) {
	h1 {
		font-size: 3rem; /* 48px */
	}
}

h2 {
	font-size: 1.875rem; /* 30px */
}

h3 {
	font-size: 1.5rem; /* 24px */
}

h4 {
	font-size: 1.25rem; /* 20px */
}

h5 {
	font-size: 1rem; /* 16px */
}

.heading-wrapper {
	--icon-size-x: 2rem;
	--icon-size-y: 1.5rem;
	margin-inline-end: var(--icon-size-x);
}

.heading-wrapper:not(:first-child) {
	margin-block: 0;
}

.heading-wrapper > * {
	display: inline;
	margin-bottom: 0;
}

.heading-wrapper > .anchor-link {
	position: relative;
	display: inline-flex;
	margin-inline-end: calc(-1 * var(--icon-size-x));
	width: var(--icon-size-x);
	height: var(--icon-size-y);
	color: var(--theme-text-light);
	text-decoration: none;
	justify-content: center;
	vertical-align: baseline;
}

/* Float anchor links to the left of headings on larger screens. */
@media (min-width: 50em) {
	.heading-wrapper {
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;
		align-items: baseline;
		margin-inline-start: calc(-1 * var(--icon-size-x));
	}

	.heading-wrapper > .anchor-link {
		margin-inline-end: 0;
	}
}

.heading-wrapper > .anchor-link {
	opacity: 0.5;
}

@media (hover: hover) {
	.heading-wrapper > .anchor-link {
		opacity: 0;
	}
}

.heading-wrapper:hover > .anchor-link,
.anchor-link:focus {
	opacity: 1;
}

p,
.content ul {
	line-height: 1.65;
}

p,
.content ul {
	color: var(--theme-text-light);
}

small,
.text_small {
	font-size: 0.833rem;
}

a {
	color: var(--theme-accent-secondary);
	text-underline-offset: 0.08em;
	align-items: center;
	gap: 0.5rem;
}

article > section :is(ul, ol) > * + * {
	margin-top: 0.25rem;
}

article > section nav :is(ul, ol) > * + * {
	margin-top: inherit;
}

article > section li > :is(p, pre, blockquote):not(:first-child) {
	margin-top: 1rem;
}

article > section nav :is(ul, ol) {
	padding-left: inherit;
}

article > section nav {
	margin-top: 1rem;
	margin-bottom: 2rem;
}

article > section ::marker {
	font-weight: bold;
	color: var(--theme-text-light);
}

article > section iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

a > code {
	position: relative;
	color: var(--theme-text-accent);
	text-underline-offset: var(--padding-block);
}

a:hover,
a:focus {
	text-decoration: underline;
}

a:focus {
	outline: 2px solid currentColor;
	outline-offset: 0.25em;
}

strong {
	font-weight: 600;
	color: inherit;
}

/* Supporting Content */
code {
	--border-radius: 3px;
	--padding-block: 0.2rem;
	--padding-inline: 0.3rem;
	font-family: var(--font-mono);
	font-size: 0.85em;
	color: var(--theme-code-inline-text);
	background-color: var(--theme-code-inline-bg);
	padding: var(--padding-block) var(--padding-inline);
	margin: calc(var(--padding-block) * -1) 0;
	border-radius: var(--border-radius);
	word-break: break-word;
}

pre.astro-code > code {
	all: unset;
}

/*RTL Fix Code dir*/
[dir='rtl'] code {
	unicode-bidi: plaintext;
}

table,
pre {
	position: relative;
	--padding-block: 1rem;
	--padding-inline: 2rem;
	padding: var(--padding-block) var(--padding-inline);
	padding-right: calc(var(--padding-inline) * 2);
	margin-left: calc(var(--padding-inline) * -1);
	margin-right: calc(var(--padding-inline) * -1);
	font-family: var(--font-mono);

	font-size: 0.85rem;
	overflow-y: hidden;
	overflow-x: auto;
	-webkit-text-size-adjust: none;
}

.content kbd {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	border-radius: 0.25rem;
	padding: 0.125rem 0.375rem;
	border: 1px solid var(--theme-shade-subtle);
	box-shadow: 0 3px var(--theme-shade-subtle);
	background-color: var(--theme-bg-offset);
}

.theme-dark .content kbd {
	border-color: var(--theme-divider);
	background-color: var(--theme-divider);
}

thead {
	font-family: var(--font-body);
}

table {
	width: 100%;
	padding: var(--padding-block) 0;
	margin: 0;
	border-collapse: collapse;
	line-height: 1.8;
}

/* Zebra striping */
tbody tr:nth-of-type(odd) {
	background: var(--theme-divider);
}
th {
	font-weight: bold;
}
td,
th {
	padding: 6px;
	text-align: left;
}

pre {
	--glow-border: 1px solid var(--theme-glow-highlight);
	border-top: var(--glow-border);
	border-bottom: var(--glow-border);
	box-shadow: 0 0 var(--theme-glow-blur) var(--theme-glow-diffuse), inset 0 0 var(--theme-glow-blur) var(--theme-glow-diffuse);
	/* override inline styles generated by shiki */
	background-color: var(--theme-code-bg) !important;
	color: var(--theme-code-text) !important;
	line-height: 1.65;
}

blockquote code {
	background-color: var(--theme-bg);
}

@media (min-width: 37.75em) {
	pre {
		--padding-inline: 1.25rem;
		border: var(--glow-border);
		margin-left: 0;
		margin-right: 0;
	}
}

pre:focus {
	outline: 4px solid var(--theme-accent);
}

blockquote {
	margin: 2rem 0 2rem 0;
	padding: 1.25em 1.5rem;
	border-left: 8px solid var(--theme-divider);
	background-color: var(--theme-bg-offset);
	border-radius: 0 0.25rem 0.25rem 0;
	line-height: 1.7;
	/* Indicates the blockquote boundaries for forced colors users, transparent is changed to a solid color */
	outline: 1px solid transparent;
}

img,
video {
	max-width: 100%;
}

.content video {
	box-shadow: 0 0 var(--theme-glow-blur) var(--theme-glow-diffuse);
}

.content details {
	--details-padding-block: 0.25rem;
	--details-padding-inline: 1rem;
	--details-corners: 0.5rem;
	border-radius: var(--details-corners);
	border: 1px solid var(--theme-shade-subtle);
	padding: var(--details-padding-block) var(--details-padding-inline);
}

.content details:hover {
	background: var(--theme-bg-offset);
}

.content details[open] {
	background: var(--theme-bg-offset);
	padding-bottom: 1rem;
}

.content details summary {
	margin: calc(-1 * var(--details-padding-block)) calc(-1 * var(--details-padding-inline));
	padding: var(--details-padding-block) var(--details-padding-inline);
	font-weight: bold;
	cursor: pointer;
}

.content details summary::marker,
.content details summary::-webkit-details-marker {
	color: var(--theme-accent-secondary);
}

.content details[open] > summary {
	border-bottom: 1px solid var(--theme-shade-subtle);
}

.content details pre {
	--padding-inline: 1.25rem;
	border: var(--glow-border);
	margin-left: 0;
	margin-right: 0;
}

.flex {
	display: flex;
	align-items: center;
}

button {
	display: flex;
	align-items: center;
	justify-items: center;
	gap: 0.25em;
	padding: 0.33em 0.67em;
	border: 0;
	background: var(--theme-bg);
	display: flex;
	font-size: 1rem;
	align-items: center;
	gap: 0.25em;
	border-radius: 99em;
	color: var(--theme-text);
	background-color: var(--theme-bg);
}

h2.heading {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	margin-top: 1.5rem;
}

.header-link {
	font-size: 1rem;
	padding: 0.1rem 0 0.1rem 0;
	transition: border-inline-start-color 100ms ease-out, background-color 200ms ease-out;
}

.header-link a {
	display: inline-flex;
	gap: 0.5em;
	width: 100%;
	font: inherit;
	color: var(--theme-text-lighter);
	text-decoration: none;
}

.header-link:hover,
.header-link:focus,
.header-link:focus-within {
	border-inline-start-color: var(--theme-accent-secondary);
}

.header-link:hover a,
.header-link a:focus {
	color: var(--theme-text);
	text-decoration: underline;
}
.header-link svg {
	opacity: 0.6;
}
.header-link:hover svg {
	opacity: 0.8;
}

.header-link.depth-3 {
	padding-inline-start: 1rem;
}
.header-link.depth-4 {
	padding-inline-start: 2rem;
}

/* Add line and padding on the left side */
.header-link {
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--theme-divider);
}
.header-link.depth-3 {
	padding-inline-start: 2rem;
}
.header-link.depth-4 {
	padding-inline-start: 3rem;
}

/* Apply different TOC styling for wide viewports showing the right sidebar */
@media (min-width: 72em) {
	h2.heading {
		padding-left: calc(1rem + 4px);
	}

	.header-link {
		border-inline-start-width: 4px;
	}
}

/* Highlight TOC header link matching the current scroll position */
.current-header-link {
	background-color: var(--theme-bg-accent);
	/* Indicates the current heading for forced colors users in older browsers */
	outline: 1px solid transparent;
}

@media (forced-colors: active) {
	.current-header-link {
		border: 1px solid CanvasText;
	}
}

.current-header-link a {
	color: var(--theme-text);
}

/* Screenreader Only Text */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.focus\:not-sr-only:focus,
.focus\:not-sr-only:focus-visible {
	position: static;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/*
	Add the correct amount of scroll padding to ensure that linked headings are always visible
	and have enough distance to the viewport edge and potential fixed navigation bars.

	Please note that this can't be done with `scroll-margin` on the scroll targets themselves
	due to lack of iOS Safari browser support.
*/
html {
	/* Mobile TOC is displayed above page content */
	scroll-padding-top: calc(1.5rem + var(--theme-navbar-height) + var(--theme-mobile-toc-height));
}

@media (min-width: 72em) {
	html {
		/* Regular TOC is displayed as a sidebar */
		scroll-padding-top: calc(1.5rem + var(--theme-navbar-height));
	}
}

@media (prefers-reduced-motion: reduce) {
	details svg {
		/* Removes the collapsible sidebar svg animation */
		transition: none !important;
	}
}