*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

:root {
    /* Breakpoints */
    --breakpoint-sm: 320px;
    --breakpoint-md: 672px;
    --breakpoint-lg: 1056px;
    --breakpoint-xl: 1312px;
    --breakpoint-xxl: 1584px;

    /* Grid */
    --grid-xs: calc(var(--grid-base) / 4);
    --grid-sm: calc(var(--grid-base) / 2);
    --grid-base: 16px;
    --grid-lg: calc(var(--grid-base) * 1.5);
    --grid-xl: calc(var(--grid-base) * 2);
    --grid-xxl: calc(var(--grid-base) * 3);
    --grid-xxxl: calc(var(--grid-base) * 4);

    /* Font stacks */
    --system-monospace: ui-monospace, Menlo, Consolas, Monaco, "Liberation Mono",
        "Lucida Console", monospace;

    --system-sans-serif: -apple-system, system-ui, BlinkMacSystemFont,
        "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;

    /* --system-serif: Georgia, Times, "Times New Roman", serif; */
    --system-serif: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
        P052, serif;

    /* Font sizes */
    --font-info: 18px;
    --font-code-bock: 18px;

    --font-xs: 0.5rem;
    --font-sm: 0.75rem;
    --font-base: 1rem;
    --font-lg: 1.25rem;
    --font-xl: 1.5rem;
    --font-xxl: 1.75rem;
    --font-xxl: 2rem;
    --font-xxxl: 2.5rem;

    /* Font sizes */
    --line-height-font-xs: 2;
    --line-height-font-sm: 1.75;
    --line-height-font-base: 1.5;
    --line-height-font-lg: 1.4;
    --line-height-font-xl: 1.3;
    --line-height-font-xxl: 1.2;
    --line-height-font-xxl: 1.1;
    --line-height-font-xxxl: 1.1;

    /* Line widths */
    --paragraph-width: 600px;

    /* Colors */
    --font-color-light: #111;
    --font-color-light-hover: #dc267f;
    --font-color-dark: #eee;
    --font-color-dark-hover: #1ce;
    --font-color-time-light: #444;
    --font-color-time-dark: #bbb;

    /* Background colors */
    --background-color-light: white;
    --background-color-dark: black;

    /* Transition timings */
    --transition-duration-color: 700ms;

    /* Dimensions */
    --grid-base-unit: 8px;
    --standard-content-padding: calc(3 * var(--grid-base-unit));
    --body-padding-x: calc(2 * var(--grid-base-unit));
    --body-padding-y: calc(2 * var(--grid-base-unit));
    --icon-size: calc(4 * var(--grid-base-unit));
    --grid-gap: calc(2 * var(--grid-base-unit));
    --grid-content-padding: calc(2 * var(--grid-base-unit));
    --col: calc(10 * var(--grid-base-unit));
    --col-1: var(--col);
    --col-2: calc(var(--col) * 2 + var(--grid-content-padding) * 1);
    --col-3: calc(var(--col) * 3 + var(--grid-content-padding) * 2);
    --col-4: calc(var(--col) * 4 + var(--grid-content-padding) * 3);
    --col-5: calc(var(--col) * 5 + var(--grid-content-padding) * 4);
    --col-6: calc(var(--col) * 6 + var(--grid-content-padding) * 5);
    --col-7: calc(var(--col) * 7 + var(--grid-content-padding) * 6);
    --col-8: calc(var(--col) * 8 + var(--grid-content-padding) * 7);
}

html {
    scrollbar-gutter: stable;
    font-size: 22px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
}

body {
    display: flex;
    justify-content: center;
    padding: var(--body-padding-y) var(--body-padding-x);
    font-family: var(--system-sans-serif);
    color: var(--font-color-light);
    background-color: var(--background-color-light);

    a:hover {
        color: var(--font-color-light-hover);
    }

    time {
        color: var(--font-color-time-light);
    }

    blockquote {
        border-color: var(--font-color-time-light);
        color: var(--font-color-time-light);
    }

    @media (prefers-color-scheme: dark) {
        color: var(--font-color-dark);
        background-color: var(--background-color-dark);

        a:hover {
            color: var(--font-color-dark-hover);
        }

        time {
            color: var(--font-color-time-dark);
        }

        blockquote {
            border-color: var(--font-color-time-dark);
            color: var(--font-color-time-dark);
        }
    }

    &[data-color-mode="light"] {
        color: var(--font-color-light);
        background-color: var(--background-color-light);

        a:hover {
            color: var(--font-color-light-hover);
        }

        time {
            color: var(--font-color-time-light);
        }

        blockquote {
            border-color: var(--font-color-time-light);
            color: var(--font-color-time-light);
        }
    }

    &[data-color-mode="dark"] {
        color: var(--font-color-dark);
        background-color: var(--background-color-dark);

        a:hover {
            color: var(--font-color-dark-hover);
        }

        time {
            color: var(--font-color-time-dark);
        }

        blockquote {
            border-color: var(--font-color-time-dark);
            color: var(--font-color-time-dark);
        }
    }
}

.transition-colors {
    transition: color var(--transition-duration-color),
        background-color var(--transition-duration-color);
}

form {
    label {
        display: block;
    }
}

h1 {
    font-size: var(--font-xxl);
    line-height: var(--line-height-font-xxl);
    margin-top: calc(1rem * var(--line-height-font-xxl));
}

h2 {
    font-size: var(--font-xl);
    line-height: var(--line-height-font-xl);
    margin-top: calc(1rem * var(--line-height-font-xl));
}

h3 {
    font-size: var(--font-lg);
    line-height: var(--line-height-font-lg);
    margin-top: calc(1rem * var(--line-height-font-lg));
}

h4 {
    font-size: var(--font-base);
    line-height: var(--line-height-font-base);
    margin-top: calc(1rem * var(--line-height-font-base));
}

h5 {
    font-size: var(--font-sm);
    line-height: var(--line-height-font-sm);
    margin-top: calc(1rem * var(--line-height-font-sm));
}

.no-margin {
    margin: 0;
}

p {
    font-size: var(--font-base);
    line-height: var(--line-height-font-base);
    margin-top: calc(1rem * var(--line-height-font-base));
}

ul,
ol {
    font-size: var(--font-base);
    line-height: var(--line-height-font-base);
    margin-top: var(--standard-content-padding);
}

a {
    color: inherit;
    font-size: inherit;
    line-height: inherit;

    &.disabled {
        pointer-events: none;
        opacity: 0.5;
    }
}

pre {
    font-size: var(--font-code-bock);
    margin-top: var(--standard-content-padding);
}

code {
    font-size: var(--font-code-bock);
    font-family: var(--system-monospace);

    &:not(.hljs) {
        padding: 0 var(--grid-sm);
        border-radius: var(--grid-xs);
        color: gold;
        background: #2b2b2b;
    }
}

button,
[role="button"] {
    cursor: pointer;
}

img,
svg {
    display: block;
}

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

blockquote {
    margin-top: calc(1rem * var(--line-height-font-base));
    padding-left: var(--standard-content-padding);
    border-left-width: 4px;
    border-left-style: solid;
}

/**
 * Iconify Material Symbols
 * https://api.iconify.design/material-symbols.css?icons=light-mode-outline-rounded,dark-mode-rounded,computer-outline-rounded
 */
.icon--material-symbols {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.icon--material-symbols--light-mode-outline-rounded {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 15q1.25 0 2.125-.875T15 12t-.875-2.125T12 9t-2.125.875T9 12t.875 2.125T12 15m0 2q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17M2 13q-.425 0-.712-.288T1 12t.288-.712T2 11h2q.425 0 .713.288T5 12t-.288.713T4 13zm18 0q-.425 0-.712-.288T19 12t.288-.712T20 11h2q.425 0 .713.288T23 12t-.288.713T22 13zm-8-8q-.425 0-.712-.288T11 4V2q0-.425.288-.712T12 1t.713.288T13 2v2q0 .425-.288.713T12 5m0 18q-.425 0-.712-.288T11 22v-2q0-.425.288-.712T12 19t.713.288T13 20v2q0 .425-.288.713T12 23M5.65 7.05L4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7t-.687.288t-.713-.288M18 19.425l-1.05-1.075q-.275-.3-.275-.712t.275-.688q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3M16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275M4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.288.688t-.288.712L6 19.425q-.275.3-.7.288t-.725-.288M12 12'/%3E%3C/svg%3E");
}

.icon--material-symbols--dark-mode-rounded {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 21q-3.775 0-6.387-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.325-.05.575.088t.4.362t.163.525t-.188.575q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.275-.175.563-.162t.512.137q.25.125.388.375t.087.6q-.35 3.45-2.937 5.725T12 21'/%3E%3C/svg%3E");
}

.icon--material-symbols--computer-outline-rounded {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 21q-.425 0-.712-.288T1 20t.288-.712T2 19h20q.425 0 .713.288T23 20t-.288.713T22 21zm2-3q-.825 0-1.412-.587T2 16V5q0-.825.588-1.412T4 3h16q.825 0 1.413.588T22 5v11q0 .825-.587 1.413T20 18zm0-2h16V5H4zm0 0V5z'/%3E%3C/svg%3E");
}

.icon--material-symbols--house-rounded {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M7 20q-.825 0-1.412-.587T5 18v-7.15l-2 1.525q-.35.25-.75.213T1.6 12.2t-.2-.75t.4-.65l8.975-6.875q.275-.2.588-.3t.637-.1t.638.1t.587.3L16 6.05V5.5q0-.625.438-1.062T17.5 4t1.063.438T19 5.5v2.85l3.2 2.45q.325.25.388.65t-.188.75t-.65.388t-.75-.213l-2-1.525V18q0 .825-.587 1.413T17 20h-1q-.825 0-1.412-.587T14 18v-2q0-.825-.587-1.412T12 14t-1.412.588T10 16v2q0 .825-.587 1.413T8 20zm3-9.975h4q0-.8-.6-1.313T12 8.2t-1.4.513t-.6 1.312'/%3E%3C/svg%3E");
}

/**
 * Iconify Material Design Icons
 * https://api.iconify.design/mdi.css?icons=github,linkedin,rss-box,house
 */
.icon--mdi {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.icon--mdi--github {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2'/%3E%3C/svg%3E");
}

.icon--mdi--linkedin {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93zM6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37z'/%3E%3C/svg%3E");
}

.icon--mdi--rss-box {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m2.5 12A1.5 1.5 0 0 0 6 16.5A1.5 1.5 0 0 0 7.5 18A1.5 1.5 0 0 0 9 16.5A1.5 1.5 0 0 0 7.5 15M6 10v2a6 6 0 0 1 6 6h2a8 8 0 0 0-8-8m0-4v2a10 10 0 0 1 10 10h2A12 12 0 0 0 6 6'/%3E%3C/svg%3E");
}

.icon--mdi--house {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z'/%3E%3C/svg%3E");
}

/* Layouts */
.home-page-layout {
    display: grid;
    grid-template-columns: var(--col-6) var(--col-7) var(--col-1);
    gap: var(--grid-gap);

    @media screen and (max-width: 1440px) {
        grid-template-columns: var(--col-5) var(--col-6) var(--col-1);
    }

    @media screen and (max-width: 1280px) {
        grid-template-columns: var(--col-4) var(--col-5) var(--col-1);
    }

    @media screen and (max-width: 1024px) {
        display: flex;
        flex-direction: column;
        width: 100%;

        .side-controls {
            order: -1;
        }
    }
}

.post-page-layout {
    display: grid;
    grid-template-columns: var(--col-3) var(--col-8) var(--col-3);
    gap: var(--grid-gap);

    @media screen and (max-width: 1440px) {
        grid-template-columns: var(--col-3) var(--col-6) var(--col-3);
    }

    @media screen and (max-width: 1280px) {
        grid-template-columns: var(--col-2) var(--col-6) var(--col-2);
    }

    @media screen and (max-width: 1024px) {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
    }
}

.side-controls {
    display: flex;
    flex-direction: column;
    gap: var(--standard-content-padding);
    align-items: flex-end;
    line-height: 0;

    @media screen and (max-width: 1024px) {
        flex-direction: row;

        /* Order on home page controlled manually in .home-page-layout */
    }
}

.bento-box {
    display: grid;
    grid-template-columns: repeat(var(--columns, auto-fill), var(--col));
    grid-auto-rows: var(--col);
    gap: var(--grid-gap);
}

.bento-item {
    padding: var(--grid-content-padding);

    /* &:has(.bento-icon) {
        align-self: center;
        justify-self: center;
        height: var(--col);
        width: var(--col);
        line-height: 0;
    } */
}

.bento-icon {
    display: inline-block;
    margin: 0;
    padding: 0;
    height: var(--icon-size);
    width: var(--icon-size);
    border: none;
    font-size: var(--icon-size);
    line-height: inherit;
    color: inherit;
    background: none;
}

.site-intro {
    h2 {
        font-weight: normal;
    }
}

.site-intro-social-icons {
    display: flex;
    gap: var(--standard-content-padding);
    font-size: var(--icon-size);
}

.latest-posts {
    & > *:not(:last-child) {
        margin-bottom: calc(2 * var(--standard-content-padding));
    }

    h1 {
        font-size: var(--font-xl);
        line-height: var(--line-height-font-xl);
    }

    h2 {
        font-size: var(--font-lg);
        line-height: var(--line-height-font-lg);
    }

    h3 {
        font-size: var(--font-base);
        line-height: var(--line-height-font-base);
    }

    h4 {
        font-size: var(--font-sm);
        line-height: var(--line-height-font-sm);
    }

    h5 {
        font-size: var(--font-xs);
        line-height: var(--line-height-font-xs);
    }
}

.post {
    font-family: var(--system-serif);

    h1,
    p:first-of-type {
        margin: 0;
    }
}

.post-preview {
    h1 {
        font-size: var(--font-lg);
    }
}

.post-info {
    font-size: var(--font-info);
    color: var(--font-color-time-light);
    margin: calc(2 * var(--grid-base-unit)) 0;

    & time {
        font-weight: bold;
        text-transform: uppercase;
    }
}