@layer theme {

:root {

    --text-size-regular: 1.25rem;
    --line-height-regular: calc(1.75 / 1.25);
    --text-size-title: 4.5rem;
    --line-height-title: 1;
    --text-subtitle: 3.75rem;
    --text-heading1: 3.75rem;
    --text-heading3: 2.25rem;
    --text-heading4: 1.85rem;
    --container-box: 48rem;

    --radius-md: 0.375rem;
    --radius-box: 1rem;
    --container-6xl: 72rem /* 1152px */;

    --hover-decoration: solid;
    --border-width: calc(var(--spacing));
    --border-style: dashed;

    --spacing: 0.25rem;

    --color-background: oklch(92.8% 0.006 264.531);
    --color-text: oklch(21% 0.034 264.665);
    --color-muted-text: oklch(37.3% 0.034 259.733);
    --color-selection-background: oklch(21% 0.034 264.665);
    --color-selection: oklch(1 0 100);
    --color-link: oklch(49.6% 0.265 301.924);
    --color-link-hover: oklch(38.1% 0.176 304.987);
    --color-secondary-background: oklch(87.2% 0.01 258.338);

    --color-code-background: oklch(21% 0.034 264.665);
    --color-code: oklch(87.2% 0.01 258.338);
    --color-code-selection-background: oklch(92.8% 0.006 264.531);
    --color-code-selection: oklch(0 0 0);

    --color-button: oklch(87.2% 0.01 258.338);
    --color-button-hover: var(--color-link);



    @media (prefers-color-scheme: dark) {
        --color-background: oklch(27.4% 0.006 286.033);
        --color-text: oklch(87.2% 0.01 258.338);
        --color-muted-text: oklch(87.2% 0.01 258.338);
        --color-link: oklch(82.7% 0.119 306.383);
        --color-link-hover: oklch(62.7% 0.265 303.9);
        --color-selection-dark: oklch(0 0 0);
        --color-selection-background: oklch(92.8% 0.006 264.531);
        --color-secondary-background: oklch(20.8% 0.042 265.755);
        --color-button: oklch(0 0 0);
        --color-button-hover: oklch(82.7% 0.119 306.383);
    }


    --_circle: var(--color-link);


    /* Callout Boxes */

    --color-callout-warning: oklch(0 0 0);
    --color-callout-background-warning: oklch(76.9% 0.188 70.08);
    --color-callout-danger: oklch(0 0 0);
    --color-callout-background-danger: oklch(80.8% 0.114 19.571);
    --color-callout-info: oklch(0 0 0);
    --color-callout-background-info: oklch(70.7% 0.165 254.624);


    @media (prefers-color-scheme: dark) {
        --color-callout-warning: oklch(0 0 0);
        --color-callout-background-warning: oklch(92.4% 0.12 95.746);
        --color-callout-danger: oklch(0 0 0);
        --color-callout-background-danger: oklch(93.6% 0.032 17.717);
        --color-callout-info: oklch(0 0 0);
        --color-callout-background-info: oklch(88.2% 0.059 254.128);

    }

    --diff-add: oklch(79.2% 0.209 151.711);
    --diff-remove: oklch(63.7% 0.237 25.331);
}
}

@font-face {
    font-family: "Bagnard";
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url("/assets/fonts/Bagnard.woff2") format('woff2');
}

@font-face {
    font-family: "Adwaita Sans";
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url("/assets/fonts/AdwaitaSans-Regular.subset.woff2") format("woff2");
}

.content{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: calc(var(--spacing)*6);
}

.content article {
/*    margin-top: calc(var(--spacing) * 10); */
    max-width: 55rem;
    overflow-wrap: break-word;
    width: 100%;

}

table:before {
    overflow-x: auto;
}

table {
    margin-inline: auto;
    border-collapse: collapse;

}

td, th {
    padding: calc(var(--spacing)*4);
    border: calc(var(--border-width)/2) solid var(--color-text);
    text-align: center;
    overflow-wrap: break-word;

}

th {
    background-color: var(--color-secondary-background);
}

speedlify-score {
    height: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-bottom: calc(var(--spacing) * 7);


    --_circle: var(--color-link);

    &:hover {
        --_circle: var(--color-link-hover);

    }
}

.speedlify-summary {
    margin-right: 1em;
}

.speedlify-score {
    font-size: 1em; /* 13px /16 */
    width: 2.6em;
    height: 2.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #0cce6b;
    color: #088645;
    margin-left: 0.4615384615385em; /* 6px /13 */
    box-shadow: 10px 10px 10px black;
}

.speedlify-score-ok {
    color: #ffa400;
    border-color: currentColor;
}

.speedlify-score-bad {
    color: #ff4e42;
    border-color: currentColor;
}

a.speedlify-score-link {
    text-decoration: none;
}

.bloglist {
    display: flex;
    justify-content: center;
    padding-block: calc(var(--spacing) * 10);
    max-width: 50rem;
    padding-inline: calc(var(--spacing)*5);
    gap: calc(var(--spacing) * 5);
    @media (width >= 64rem /* 1024px */) {
    }

}

.blogpost {
    gap: calc(var(--spacing) * 3);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    width: 100%;

    @media (width >= 50rem /* 1024px */) {
        grid-template-columns:  25% 75%;
    }


}

.blogpost > picture > img {
    align-self: center;
    aspect-ratio: 16/9;
    border-radius: var(--radius-box);
    max-width: calc(10rem*2);
    max-height: calc(6rem*2);
    -webkit-user-select: none;
    user-select: none;
    @media (width >= 50rem /* 1024px */) {
        max-width: 10rem;
        max-height: 6rem;
    }
}

.blogpost > picture {
    align-self: center;
    justify-self: center;

}

.blogpost > div {
    max-width: 60rem;
    justify-self: center;

    @media (width >= 50rem /* 1024px */) {
        justify-self: start;
    }

}

.blogpost > div > p {
    font-size: medium;
    margin-block: 5px;
}

.blogpost .title {
    text-align: left;
    margin: 0;
    font-size: var(--text-heading4);
    line-height: var(--line-height-title);
    font-weight: bold;
}

.vertical-flex {
    display: flex;
    flex-direction: column;
}

html {
    color: var(--color-text);
    background-color: var(--color-background);

    &::selection {
    color: var(--color-selection);
    background-color: var(--color-selection-background);
    }

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

        &::selection {
        color: var(--color-selection-dark);
        background-color: var(--color-selection-background);
        }

    }

}

body {
    margin: 0;
    display: block;
    font-family: "Adwaita Sans", sans-serif;
}

footer {
    width: 100%;
    justify-content: center;
    display: flex;
    margin: auto;
    position: absolute;
    bottom: 0;
    text-align: center;
    border-top: var(--border-width) var(--border-style);
    justify-self: center;
    padding-block: calc(var(--spacing) * 10);

    color: var(--color-muted-text);
    background-color: var(--color-secondary-background);

    @media (prefers-color-scheme: dark) {
    color: var(--color-muted-text) ;
    background-color: var(--color-secondary-background);

    }
}

h1 {
    font-size: var(--text-heading1);
    font-family: Bagnard, serif;
}

h2 {
    font-size: var(--text-heading3);
}

ul {
    padding: 0;
    margin-inline-start: calc(var(--spacing) * 5);
    list-style: disc;
}

p, li, ul, dd, dt {
    font-size: var(--text-size-regular);
    line-height: var(--line-height-regular);

}

/*
dt,dd {
    display: inline;
}

dd {
    margin-left: 0;
}
*/

dl > div {
    margin-bottom: calc(var(--spacing) * 2);
}

dt:before {
    content: "• ";
}

li {
    padding-block: calc(var(--spacing) * 2) /* 0.5rem = 8px */;
}

.textured-background {
    background-image: url(/assets/img/noise.webp);
    background-repeat: repeat;
}

.grid {
    display: grid;
}

.flex {
    display: flex;
}

.small-icon {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    display: inline-block;
    vertical-align: middle;
}

h2 > .icon {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
    display: inline-block;
    vertical-align: middle;
    padding-inline-end: calc(var(--spacing) *2);
}

a {
    color: var(--color-link);
    text-decoration: underline;
    &:hover {
        @media (hover: hover) {
        color: var(--color-link-hover);
        text-decoration-line: underline;
        text-decoration-style: var(--hover-decoration) ;
        }
   }

@media (prefers-color-scheme: dark) {
    color: var(--color-link);
    &:hover {
        @media (hover: hover) {
        color: var(--color-link-hover);
            }
        }
   }

}

.box {
    display: block;
    border: var(--border-width) var(--border-style);
    border-radius: var(--radius-box);
    margin: calc(var(--spacing) * 2);
    max-width: var(--container-box);
}

.box > .vertical-flex {
    display: flex;
    flex-direction: column;
    :where(& > :not(:last-child)) {
        border-style: none none var(--border-style);
        border-bottom-width: var(--border-width);
        border-radius: var(--radius-md);
    }
}

.box > .vertical-flex > * {
    padding: calc(var(--spacing) * 5);
}