@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
        --sans-serif: "Inter", sans-serif;
        --mono-space: "Source Code Pro", monospace;

        --background-clr: white;
        --foreground-clr: black;
        --hyperlink-clr: black;
        --dim-clr: gray;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        box-sizing: border-box;

        font-size: 12px;
        font-feature-settings:
                "calt",
                "tnum",
                "case",
                "zero" 1;
        font-variant-numeric: slashed-zero;
        text-rendering: geometricPrecision;

        scroll-behavior: smooth;
}

body {
        margin-top: 4vh;
        background-color: var(--background-clr);
}

nav,
main,
header,
article {
        margin-left: 1.4em;
        margin-right: 1.4em;

        color: var(--foreground-clr);

        font-family: var(--sans-serif);
        font-weight: normal;
}

article {
        margin: 0;
        max-width: 48em;
        line-height: 1.5;
}

li {
        color: var(--foreground-clr);
}

p {
        margin-bottom: 1.5rem;
}

li p {
        margin: 0;
}

h1,
h2,
h3 {
        font-size: 1.2em;
        font-weight: 700;
}

code {
        font-weight: 500;
        font-family: var(--mono-space);
}

a {
        color: var(--hyperlink-clr);
}

a:hover {
        background-color: var(--hyperlink-clr);
        color: var(--background-clr);
        text-decoration: none;
}

.gallery {
        display: flex;
}

img {
        max-height: 96vh;
        padding: 0.5rem;
}

@media (width <= 50em) {
        .gallery {
                display: block;
        }

        img {
                max-width: 80vw;
        }
}

hr {
        border: 1px solid var(--foreground-clr);
        border-bottom: 0px;
}

blockquote {
        border-top: none;
        border-right: none;
        border-bottom: none;
        border-left: 2px solid;
        border-color: darkgray;

        margin: 0;
        padding-left: 1em;
}

.gap {
        padding-right: 1em;
}

.dim {
        color: var(--dim-clr);
}

.foregroundclr {
        color: var(--foreground-clr);
}

.backgroundclr {
        color: var(--background-clr);
}

.hyperlinkclr {
        color: var(--hyperlink-clr);
}