/*
 TODO dithered background for h1 and name-card
*/

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/IBMPlexSans-Regular.woff") format("woff");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: bold;
  src: url("/fonts/IBMPlexSans-Bold.woff") format("woff");
}

/* Subset: Cyrillic */
@font-face {
	font-family: 'IBM Plex Serif';
	font-style: italic;
	font-weight: 100 700;
	src: local("IBM Plex Serif Var Italic"), local("IBMPlexSerifVar-Italic"), url("/fonts/IBM Plex Serif Var-Italic-Cyrillic.woff2") format("woff2");
	unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525
}
/* Subset: Greek */
@font-face {
	font-family: 'IBM Plex Serif';
	font-style: italic;
	font-weight: 100 700;
	src: local("IBM Plex Serif Var Italic"), local("IBMPlexSerifVar-Italic"), url("/fonts/IBM Plex Serif Var-Italic-Greek.woff2") format("woff2");
	unicode-range: U+037E, U+0386-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+03D0-03D1, U+03D5
}
/* Subset: Latin1 */
@font-face {
	font-family: 'IBM Plex Serif';
	font-style: italic;
	font-weight: 100 700;
	src: local("IBM Plex Serif Var Italic"), local("IBMPlexSerifVar-Italic"), url("/fonts/IBM Plex Serif Var-Italic-Latin1.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02
}
/* Subset: Latin2 */
@font-face {
	font-family: 'IBM Plex Serif';
	font-style: italic;
	font-weight: 100 700;
	src: local("IBM Plex Serif Var Italic"), local("IBMPlexSerifVar-Italic"), url("/fonts/IBM Plex Serif Var-Italic-Latin2.woff2") format("woff2");
	unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF
}
/* Subset: Latin3 */
@font-face {
	font-family: 'IBM Plex Serif';
	font-style: italic;
	font-weight: 100 700;
	src: local("IBM Plex Serif Var Italic"), local("IBMPlexSerifVar-Italic"), url("/fonts/IBM Plex Serif Var-Italic-Latin3.woff2") format("woff2");
	unicode-range: U+0102-0103, U+01CD-01DC, U+1E0C-1E0D, U+1E12-1E13, U+1E24-1E25, U+1E36-1E37, U+1E3C-1E3D, U+1E40-1E47, U+1E4A-1E4B, U+1E62-1E63, U+1E6C-1E6D, U+1E70-1E71, U+1E92-1E93, U+1EA0-1EF9, U+20AB
}
/* Subset: Pi */
@font-face {
	font-family: 'IBM Plex Serif';
	font-style: italic;
	font-weight: 100 700;
	src: local("IBM Plex Serif Var Italic"), local("IBMPlexSerifVar-Italic"), url("/fonts/IBM Plex Serif Var-Italic-Pi.woff2") format("woff2");
	unicode-range: U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD
}

/* Subset: Cyrillic */
@font-face {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 100 700;
	src: local("IBM Plex Serif Var Regular"), local("IBMPlexSerifVar-Regular"), url("/fonts/IBM Plex Serif Var-Roman-Cyrillic.woff2") format("woff2");
	unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525
}
/* Subset: Greek */
@font-face {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 100 700;
	src: local("IBM Plex Serif Var Regular"), local("IBMPlexSerifVar-Regular"), url("/fonts/IBM Plex Serif Var-Roman-Greek.woff2") format("woff2");
	unicode-range: U+037E, U+0386-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+03D0-03D1, U+03D5
}
/* Subset: Latin1 */
@font-face {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 100 700;
	src: local("IBM Plex Serif Var Regular"), local("IBMPlexSerifVar-Regular"), url("/fonts/IBM Plex Serif Var-Roman-Latin1.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02
}
/* Subset: Latin2 */
@font-face {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 100 700;
	src: local("IBM Plex Serif Var Regular"), local("IBMPlexSerifVar-Regular"), url("/fonts/IBM Plex Serif Var-Roman-Latin2.woff2") format("woff2");
	unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF
}
/* Subset: Latin3 */
@font-face {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 100 700;
	src: local("IBM Plex Serif Var Regular"), local("IBMPlexSerifVar-Regular"), url("/fonts/IBM Plex Serif Var-Roman-Latin3.woff2") format("woff2");
	unicode-range: U+0102-0103, U+01CD-01DC, U+1E0C-1E0D, U+1E12-1E13, U+1E24-1E25, U+1E36-1E37, U+1E3C-1E3D, U+1E40-1E47, U+1E4A-1E4B, U+1E62-1E63, U+1E6C-1E6D, U+1E70-1E71, U+1E92-1E93, U+1EA0-1EF9, U+20AB
}
/* Subset: Pi */
@font-face {
	font-family: 'IBM Plex Serif';
	font-style: normal;
	font-weight: 100 700;
	src: local("IBM Plex Serif Var Regular"), local("IBMPlexSerifVar-Regular"), url("/fonts/IBM Plex Serif Var-Roman-Pi.woff2") format("woff2");
	unicode-range: U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD
}

/* Subset: Cyrillic */
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 100 700;
	src: local("IBM Plex Mono Var Regular"), local("IBMPlexMonoVar-Regular"), url("/fonts/IBM Plex Mono Var-Roman-Cyrillic.woff2") format("woff2");
	unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525
}
/* Subset: Latin1 */
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 100 700;
	src: local("IBM Plex Mono Var Regular"), local("IBMPlexMonoVar-Regular"), url("/fonts/IBM Plex Mono Var-Roman-Latin1.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02
}
/* Subset: Latin2 */
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 100 700;
	src: local("IBM Plex Mono Var Regular"), local("IBMPlexMonoVar-Regular"), url("/fonts/IBM Plex Mono Var-Roman-Latin2.woff2") format("woff2");
	unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF
}
/* Subset: Latin3 */
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 100 700;
	src: local("IBM Plex Mono Var Regular"), local("IBMPlexMonoVar-Regular"), url("/fonts/IBM Plex Mono Var-Roman-Latin3.woff2") format("woff2");
	unicode-range: U+0102-0103, U+01CD-01DC, U+1E0C-1E0D, U+1E12-1E13, U+1E24-1E25, U+1E36-1E37, U+1E3C-1E3D, U+1E40-1E47, U+1E4A-1E4B, U+1E62-1E63, U+1E6C-1E6D, U+1E70-1E71, U+1E92-1E93, U+1EA0-1EF9, U+20AB
}
/* Subset: Pi */
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 100 700;
	src: local("IBM Plex Mono Var Regular"), local("IBMPlexMonoVar-Regular"), url("/fonts/IBM Plex Mono Var-Roman-Pi.woff2") format("woff2");
	unicode-range: U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD
}
/* Subset: Cyrillic */
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: italic;
	font-weight: 100 700;
	src: local("IBM Plex Mono Var Italic"), local("IBMPlexMonoVar-Italic"), url("/fonts/IBM Plex Mono Var-Italic-Cyrillic.woff2") format("woff2");
	unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-04C2, U+04CF-04D9, U+04DC-04E9, U+04EE-04F9, U+0524-0525
}
/* Subset: Latin1 */
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: italic;
	font-weight: 100 700;
	src: local("IBM Plex Mono Var Italic"), local("IBMPlexMonoVar-Italic"), url("/fonts/IBM Plex Mono Var-Italic-Latin1.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02
}
/* Subset: Latin2 */
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: italic;
	font-weight: 100 700;
	src: local("IBM Plex Mono Var Italic"), local("IBMPlexMonoVar-Italic"), url("/fonts/IBM Plex Mono Var-Italic-Latin2.woff2") format("woff2");
	unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF
}
/* Subset: Latin3 */
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: italic;
	font-weight: 100 700;
	src: local("IBM Plex Mono Var Italic"), local("IBMPlexMonoVar-Italic"), url("/fonts/IBM Plex Mono Var-Italic-Latin3.woff2") format("woff2");
	unicode-range: U+0102-0103, U+01CD-01DC, U+1E0C-1E0D, U+1E12-1E13, U+1E24-1E25, U+1E36-1E37, U+1E3C-1E3D, U+1E40-1E47, U+1E4A-1E4B, U+1E62-1E63, U+1E6C-1E6D, U+1E70-1E71, U+1E92-1E93, U+1EA0-1EF9, U+20AB
}
/* Subset: Pi */
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: italic;
	font-weight: 100 700;
	src: local("IBM Plex Mono Var Italic"), local("IBMPlexMonoVar-Italic"), url("/fonts/IBM Plex Mono Var-Italic-Pi.woff2") format("woff2");
	unicode-range: U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD
}



/*@font-face {
    font-family: 'IBM Plex Serif';
    font-style: italic;
    font-weight: 100;
    src: url('/fonts/IBMPlexSerif-ThinItalic.woff') format('woff');
}

@font-face {
    font-family: 'IBM Plex Serif';
    font-style: italic;
    font-weight: 200;
    src: url('/fonts/IBMPlexSerif-ExtraLightItalic.woff') format('woff');
}*/

/*@import url(https://fonts.bunny.net/css?family=amiri:400);
@import url(https://fonts.bunny.net/css?family=im-fell-double-pica:400);
@import url(https://fonts.bunny.net/css?family=im-fell-dw-pica-sc:400);
@import url(https://fonts.bunny.net/css?family=im-fell-dw-pica:400);*/


:root {
    --blue: #1447E6;
    --gray: #F9FAFB;
    --black: #1D1E20;
    --line: rgba(0, 0, 0, 30%);
}


body {
    --bg: #F5EFE1;

    background: white;
    color: var(--black);
    font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    margin: 0 50px;
    border: 1px solid var(--line);
    border-top: none;
    border-bottom: none;

    /*background:
        linear-gradient(-90deg, rgba(0,0,0,.05) 1px, var(--bg) 1px),
        linear-gradient(rgba(0,0,0,.5) 1px, var(--bg) 1px),
        linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, var(--bg) 1px),
        linear-gradient(rgba(0,0,0,.04) 1px, var(--bg) 1px),
        linear-gradient(var(--bg) 3px, #f2f2f2 3px, #f2f2f2 78px, var(--bg) 78px),
        linear-gradient(-90deg, #aaa 1px, var(--bg) 1px),
        linear-gradient(-90deg, var(--bg) 3px, #f2f2f2 3px, #f2f2f2 78px, var(--bg) 78px),
        linear-gradient(#aaa 1px, var(--bg) 1px),
        #f2f2f2;
    background-size:
        4px 4px,
        4px 4px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px;*/

        /*font-family: 'FeFCrm2', serif;*/
        font-size: 13px;
        /*font-family: 'IM Fell Double Pica', serif;
        font-family: 'IM Fell DW Pica SC', serif;*/
        /*font-family: 'IM Fell DW Pica', serif;*/
}

header {
    background: radial-gradient(rgb(from var(--blue) r g b / 0.1), white);
    background-position: -500px 0;

    h1 {
        padding: 10px 30px 0 30px;
        color: var(--blue);
        font-family: 'IBM Plex Serif';
        font-style: italic;
        font-weight: 340;
        margin: 0;
        padding-top: 32px;
        font-size: 48px;
        position: relative;
    }

    .subtitle {
        margin: 0 30px 30px 30px;
        i {
            font-style: normal;
            font-size: 15px;
        }
        /*margin-bottom: 24px;*/
    }

    hr {
        border-bottom: none;
        border-top: 1px solid var(--line);
        margin: 0;
        padding: 0;
        position: relative;
        overflow: visible;
    }

    hr:before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1000px;
        width: 1000px;
        border-bottom: 1px dashed var(--line);
    }

    hr:after {
        content: '';
        position: absolute;
        top: -1px;
        right: -1000px;
        width: 1000px;
        border-bottom: 1px dashed var(--line);
    }
}

a {
    color: var(--blue);
    display: inline-block;
    position: relative;
    font-weight: normal;
    text-decoration: underline;
    font-size: 12px;
    line-height: 16px;
}

a.disabled, a.disabled:hover {
    filter: grayscale();
    cursor: not-allowed;
    text-decoration: none;
    opacity: 0.5;
}

a:hover {
    background: var(--blue);
    text-decoration: none;
    color: white;
}

article h1 {
    font-family: 'IBM Plex Serif';
    font-weight: 360;
    font-size: 32px;
    letter-spacing: normal;
    color: var(--blue);
}


h2 {
    font-family: 'IBM Plex Serif';
    font-weight: 250;
    font-size: 26px;
    letter-spacing: normal;
}

nav, #design {
    padding: 12px 30px;
    font-size: 16px;
    background: oklch(97% 0.001 106.42);

    a {
        font-size: 14px;
        font-family: 'IBM Plex Mono';
        text-decoration: underline;
        padding: 8px 12px;
        border-radius: 4px;
        color: oklch(37.4% 0.01 67.56);
    }

    a:hover {
        background:oklch(86.9% 0.005 56.37);
        color: black;
    }

    .title {
        font-family: 'IBM Plex Serif';
        width: 75px;
        display: inline-block;
    }

    .separator {
        color: var(--line);
    }

}

name-card {
    padding: 30px;

    p {
        margin: 0;
    }

    p:first-child {
        font-size: 24px;
        margin: 8px 0;
    }

    a {
        color: var(--yellow);
    }

    border-bottom: 1px dashed var(--blue);
}

name-card, section {
    display: block;
    position: relative;

    &:before {
        content: '';
        position: absolute;
        bottom: -1px;
        left: -1000px;
        width: 1000px;
        border-bottom: 1px dashed var(--line);
    }

    &:after {
        content: '';
        position: absolute;
        bottom: -1px;
        right: -1000px;
        width: 1000px;
        border-bottom: 1px dashed var(--line);
    }
}

section#publications {
    padding: 30px;
    border-bottom: 1px dashed var(--blue);

    p {
        border: 1px var(--line) solid;
        /*border-bottom: none;*/
        border-radius: 4px;
        padding: 8px 8px 12px 8px;
        /*background: linear-gradient(to bottom, white 70%, transparent);*/
        box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 8%);
        /*transition: box-shadow 0.1s, transform 0.1s;*/
        background: white;

        a {
            margin-top: 10px;
        }
    }

    p:hover {
        box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 8%),
                    4px 4px 0 0 rgb(from var(--blue) r g b / 0.1);
        border-color: var(--blue);
    }

    background: white;
    background-image: radial-gradient(rgba(from var(--blue) r g b / 0.4) 1px, transparent 0);
    background-size: 5px 5px;
    background-position: 0px 0px;
}

section#blog {
    padding: 30px;
    border-bottom: 1px dashed var(--blue);
    background: repeating-linear-gradient( 45deg, rgb(from var(--blue) r g b / 0.1), rgb(from var(--blue) r g b / 0.1) 4px, #0000 4px, #0000 8px );

    ul {
        margin: 0;
        padding: 0;
    }

    li {
        margin-bottom: 10px;
        list-style: none;
        width: fit-content;
        padding: 4px;
        border-radius: 6px;
        border: 1px solid transparent;

        &:hover {
            background: rgba(225,113,-43, 0.2);
            border: 1px solid rgba(187,77,-26, 0.5);
        }

        a {
            border-radius: 4px;
            border: 1px solid rgb(187,77,-26);
            background: rgb(225,113,-43);
            width: fit-content;
            padding: 8px;
            color: white;
            text-decoration: none;
            font-family: 'IBM Plex Mono';
            color: white;
        }

    }

    li:hover {
        box-shadow: 1px 2px 0 0 var(--yellow);
    }
}

footer {
    display: block;
    position: relative;
    border-top: 1px dashed black;
    margin-top: 48px;
    padding: 0 30px 20px 30px;

    &:before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1000px;
        width: 1000px;
        border-bottom: 1px dashed var(--line);
    }

    &:after {
        content: '';
        position: absolute;
        top: -1px;
        right: -1000px;
        width: 1000px;
        border-bottom: 1px dashed var(--line);
    }
}

#ai-stamp {
    border: 1px solid black;
    border-radius: 18px 0;
    padding: 4px 16px;
    display: inline-block;
    background: white;
    margin-top: 16px;
}

code {
    background: white;
    color: var(--pink);
    margin: 0 3px;
}

pre {
    background: rgb(from var(--blue) r g b / 0.1);

    /*background: repeating-linear-gradient( rgb(from var(--blue) r g b / 0.1), rgb(from var(--blue) r g b / 0.1) 4px, #0000 4px, #0000 8px );*/

    border-radius: 4px;
    border: 1px solid var(--blue);
    padding: 4px 8px;
}

article {
    padding: 30px;
}