@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "InterDisplay";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/InterDisplay-Bold-optimized.woff2") format("woff2");
}
@font-face {
    font-family: "Iosevka";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Iosevka2.woff2") format("woff2");
}

:root {
    --color-purple: #b585ff;
    --color-blue: #3584e4;
    --color-green: #82e08c;
	--color-yellow: #f0c674;

	/* 
    --color-bg: #1b1f25;
    --color-bg-secondary: #1b1e23;
    --color-bg-ternary: #2e2e2e;
    --color-fg: white;
    --color-fg-secondary: #4e4e4e;
	*/

    --color-fg: #1b1f25;
    --color-bg-secondary: #1b1e23;
    --color-bg-ternary: #2e2e2e;
    --color-bg: white;
    --color-fg-secondary: #4e4e4e;

	--code-hl-fg: var(--color-fg);
	--code-fg: var(--color-bg);
	--code-bg: var(--color-bg-secondary);

    --width: 800px;

    --font-mono: "Iosevka", monospace;
    --font-sans: "InterDisplay", sans-serif;

    --ctx-block-radius: 8pt;
    --ctx-block-padding: 8pt;
    --ctx-block-border: 1pt solid #494949;

    --font-size: 18px;
    --h-coefficient: 1.5;

    --h4-font-size: calc(var(--font-size) * var(--h-coefficient));
    --h3-font-size: calc(var(--h4-font-size) * var(--h-coefficient));
    --h2-font-size: calc(var(--h3-font-size) * var(--h-coefficient));
    --h1-font-size: calc(var(--h2-font-size) * var(--h-coefficient) * var(--h-coefficient));

    --p1: 4pt;
    --p2: calc(var(--p1) * 2);
    --p3: calc(var(--p2) * 2);
    --p4: calc(var(--p3) * 2);
    --p5: calc(var(--p4) * 2);
}

main {
    max-width: var(--width);
    padding: 0 calc((100vw - var(--width)) / 2);
}

header {
    max-width: var(--width);
    padding: var(--p4) calc((100vw - var(--width)) / 2);
    background-color: #f1f0ec;
    background-image: radial-gradient(var(--color-fg-secondary) 1px, transparent 0);
    background-size: 40px 40px;
    background-position: -19px -19px;
}

.background {
    position: relative;
}

header > h1,
.heading {
    font-size: var(--h1-font-size);
    margin: 0;
    font-weight: 700;
    fill: var(--color-fg);
    color: var(--color-fg);
}

header > h2 {
    margin-top: 0;
    color: var(--color-fg);
}

body {
    padding: 0;
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-fg);

    font-size: var(--font-size);
    font-weight: 400;
    font-family: var(--font-sans);
}

/* text & headings */
p {
    line-height: 1.5;
}

p, h1, h2, h3, h4, .cmd-block2, .file, .visual-content, .meme {
	margin: 0 0 var(--p3) 0;
}

 h1, h2, h3, h4 {
	margin-top: var(--p4);
}

h2 { font-size: var(--h2-font-size); }
h3 { font-size: var(--h3-font-size); }
h4 { font-size: var(--h4-font-size); }

.meme {
    max-width: 500px;
}

/* formal context */
code,
pre {
    font-family: var(--font-mono);
    background-color: var(--code-bg);
	color: var(--code-fg);
    padding: 0pt 8pt;
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
}

code {
    padding: 0pt var(--p1);
}

.cmd-block2 code {
    padding: 0pt 8pt;
}


code.cmd-highlight {
	border-radius: 6pt;
	margin: 2pt;
}

pre.cmd-highlight {
	border-radius: 6pt;
	margin: 2pt;
	padding-left: 6pt;
}

.cmd-bash {
	padding: 4pt 8pt;
	border-top: var(--ctx-block-border);
	border-bottom: var(--ctx-block-border);
}

.hl-blue {
	background-color: var(--color-blue);
	color: var(--code-hl-fg);
}

.hl-green {
	background-color: var(--color-green);
	color: var(--code-hl-fg);
}

.hl-yellow {
	background-color: var(--color-yellow);
	color: var(--code-hl-fg);
}

.cmd-bash:first-child {
	border-top: none;
} .cmd-bash:last-child {
	border-bottom: none;
} .cmd-bash+.cmd-bash {
	border-top: none;
}

.cmd-block2,
.file {
	background-color: var(--color-bg-secondary);
    border: var(--ctx-block-border);
    border-radius: 8pt;
    box-shadow: #00000020 0 0 5pt 1pt;
    overflow-x: scroll;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.cmd-block2>* {
	width: 100%;
	box-sizing: border-box;
}

.visual-content {
    display: flex;
    overflow-x: scroll;
    width: 100%;
}

.visual-content > img {
    max-width: 100%;
}

.file > p {
    background-color: var(--color-bg-ternary);
	color: var(--code-fg);
    font-size: 0.8em;
    border-radius: 8pt 8pt 0 0;
    margin: 0;
    padding: 4pt 8pt;
}

.nav {
    position: fixed;
    left: 0;
    top: 0;
    font-size: 14pt;
    font-weight: 400;
	overflow-y: scroll;
	height: 100vh;
}

/* navigation */
.nav ul {
    list-style-type: none;
    padding: 0 8pt;
	display: inline-block;
	width: 100%;
}

.nav li {
    padding: 4pt 8pt;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.nav li p {
	margin: 0;
	padding: 0;
	line-height: 1;
}

.nav li a {
	display: block;
    color: #fafafa;
    text-decoration: none;
    padding: 4pt 8pt;
    box-sizing: border-box;
    border-radius: 8pt;
    width: fill;
	margin: 4pt 0;
	line-height: 1.4em;
}
.nav li a:hover {
    background-color: #ffffff17;
	/* color: var(--color-bg); */

    text-decoration: underline;
}

.nav > ul {
    display: none;
}

#nav-toggle:checked + ul {
    display: block;
}

.nav p {
    margin: 0;
    padding: 0;
}

.row {
    display: flex;
    flex-direction: row;
    gap: 12pt;
    max-width: 100vw;
    overflow-x: scroll;
}

.row > * {
    width: 100%;
    flex-grow: 1;
    height: fit-content;
}

p > code {
    white-space: nowrap;
    border-radius: 4pt;
}

a {
    color: inherit;
}

h4 > a,
h3 > a,
h2 > a,
h1 > a {
    text-decoration: none;
}

.source {
    color: white;
    display: block;
}

.file-download {
    display: block;
}

.tags {
    padding: 24pt 0;
}

.tags ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 12px;
}

.tags li {
    border-radius: 8pt;
    padding: var(--p1) var(--p2);
	font-size: 16px;
    border: var(--ctx-block-border);
    width: fit-content;
}

.tags li:before {
    content: "#";
}