@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@font-face {
	src: url('assets/fonts/tue.woff2') format('woff2-variations');
	font-family:'TUe VF';
	font-style: normal;
}
        /* Variables */
        :root {
            --spacing: 1.5rem;
            --font-family-primary: "TUe VF", "Source Sans 3", "Avenir Next", "Avenir", Gilroy, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
            --font-family-code: "Source Code Pro", "Fira Code", monospace;

            --smallcaps-spacing: 0.1em;

            /* TU/e base color 
               ---------------
               See brand guide
            */
            --theme-h: 359;
            --theme-s: 72%;
            --theme-l: 45%;
            --theme-color: hsl(var(--theme-h), var(--theme-s), var(--theme-l));

            /* Theming variables 
               -----------------
               Naming roughly matches TikZ (e.g. fill, draw, color).
            */
            --bg-h: var(--theme-h);
            --bg-s: calc(var(--theme-s) * 0.2);
            --bg-l: 100%;
            --bg-a: 100%;

            --fill-h: var(--theme-h);
            --fill-s: calc(var(--theme-s) * 0.2);
            --fill-l: var(--theme-l);
            --fill-a: 100%;

            --draw-h: var(--fill-h);
            --draw-s: var(--fill-s);
            --draw-l: var(--fill-l);
            --draw-a: 100%;
            --draw-size: 2px;

            --shadow-h: var(--bg-h);
            --shadow-s: var(--bg-s);
            --shadow-l: 1%;
            --shadow-a: 30%;
            --shadow-x: 0.08rem;
            --shadow-y: 0.10rem;
            --shadow-size: 0.10rem;

            --text-h: calc(var(--fill-h) * 1.5);
            --text-s: calc(var(--fill-s) * 0.5);
            --text-l: 10%;
            --text-a: 100%;

            --heading-h: var(--theme-h);
            --heading-s: var(--theme-s);
            --heading-l: var(--theme-l);
            --heading-a: 100%;

        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Base */
        body {
            font-family: var(--font-family-primary);
            font-size: clamp(1rem, 1vw, 2rem);
            font-weight: 400;
            font-feature-settings: "kern" 1;
            font-optical-sizing: auto;
            font-variant-ligatures: common-ligatures contextual discretionary-ligatures no-historical-ligatures;
            font-variant-numeric: ordinal oldstyle-nums proportional-nums stacked-fractions slashed-zero;
            font-variant-emoji: none;
            -webkit-font-smoothing: subpixel-antialiased;

            optical-sizing: auto;

            text-rendering: optimizeLegibility;

            line-height: 1.46;

            margin: 0 auto;
            padding: var(--spacing);

            min-height: 100vh;
            max-width: 1000px;
            z-index: -10000;
            position: relative;

            color: hsl(var(--text-h) var(--text-s) var(--text-l) / var(--text-a));
            background: hsl(var(--bg-h) var(--bg-s) var(--bg-l) / var(--bg-a))
        }

        /* Typography */
        li,p {
            margin-bottom: var(--spacing);
        }

        li {
            column-break-inside: avoid;
            break-inside: avoid-column;
        }

        em {
            /* font-weight: 480; */
            font-style: inherit;
        }

        strong {
            font-weight: 600;
            font-style: inherit;
        }

        span.metric {
            /* Improves clarity of metric values */
            font-variant-numeric: lining-nums tabular-nums slashed-zero;
            font-variant-caps: small-caps;
            text-wrap: nowrap;
        }

        span.emoji {
            /* Emoji rendering is disabled by default */
            font-variant-emoji: emoji;
        }

        /* Main content with aside column for larger screens */
        main {
            --aside-width: 12rem;

            display: grid;
            gap: calc(var(--spacing) * 4);
            margin: 0.5rem;
            margin-left: calc(var(--aside-width) + var(--spacing));
            margin-right: 0;
            padding: 1rem 0 20rem 0;
        }

        main aside {
            display: block;
            float: left;
            position: absolute;
            margin-left: 0;
            left: 0rem;
            width: var(--aside-width);
            text-align: right;
            justify-content: right;
            list-style-type: none;
            clear: both;
            margin-bottom: 1rem;
            font-variant-numeric: normal;

            --text-l: 30%;

            font-size: 0.95em;
            font-weight: 450;
            font-style: normal;
            line-height: 1.4;
            color: hsl(var(--text-h) var(--text-s) var(--text-l) / var(--text-a));
            hyphens: none;
            text-wrap: pretty;
            display: grid;
        }

        main aside p em {
            font-variant-caps: small-caps;
        }

        main aside p strong {
            font-weight: 650;
        }

        @media all and (min-width:1200px) {
            main aside {
                left: 0;
                width: calc(2.5rem * 4);
            }
        }

        @media all and (max-width:520px) {
            main {
                margin: 0;
                padding: 0;
                max-width: 100%;
            }

            main aside {
                float: inherit;
                position: inherit;
                width: 100%;
                text-align: left;
                justify-content: left;
                background: #fefefe;
                padding: var(--spacing) calc(var(--spacing) * 0.5);
                margin: var(--spacing) 0;
                border: 1px solid #ccc;
                border-left: 3px solid #ccc;
            }

            main aside>p:last-child {
                margin-bottom: var(--spacing);
                margin-bottom: 0;
            }
        }

        /* Navigations */
        nav {
            display: flex;
            flex-wrap: wrap;
            gap: calc(var(--spacing) * 0.5);
            padding: 0;
            margin: 0;
        }

        /* Headings */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {

            font-weight: 500;
            font-style: normal;
            line-height: 1.1;
            margin-bottom: 1em;
            color: inherit;
            hyphens: none;
            text-wrap: balance;
        }

        @media all and (max-width:520px) {

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                hyphens: unset;
            }
        }

        h1 {
            font-size: 2.1em;
            font-weight: 700;
            letter-spacing: 0.001em;
            font-variant-caps: titling-caps;
            /* text-transform: uppercase; */
        }

        h2 {

            font-size: 1.3em;
            font-weight: 650;
            letter-spacing: var(--smallcaps-spacing);
            text-transform: uppercase;
            font-variant-caps: all-small-caps;
        }

        h3 {
            --heading-l: calc(var(--heading-l) * 0.9);

            font-size: 1.2em;
            font-weight: 650;
            letter-spacing: var(--smallcaps-spacing);
            text-transform: lowercase;
            font-variant-caps: all-small-caps;
        }

        h4 {
            --heading-l: calc(var(--heading-l) * 0.6);
            font-weight: 600;

            font-size: 1em;
        }

        h5 {
            --heading-l: calc(var(--heading-l) * 0.4);

            font-size: 0.83em;
        }

        h6 {
            --heading-l: calc(var(--heading-l) * 0.2);

            font-size: 0.67em;
        }

        p a {
            --text-h: var(--theme-h);
            --text-s: var(--theme-s);
            --text-l: var(--theme-l);

            color: hsl(var(--text-h) var(--text-s) var(--text-l) / var(--text-a));

            display: inline;
            font-weight: 600;
            background: none;
            box-shadow: none;
            outline: 0px solid transparent;
            border: 0px solid transparent;
            border-radius: 0.2em;
            box-shadow: none;
        }

        p a:hover {
            --text-l: calc(--text-l * 0.5);
            --fill-h: var(--theme-h);
            --fill-s: var(--theme-s);
            --fill-l: var(--theme-l);
            --fill-a: 50%;

            display: inline;
            background: hsl(var(--fill-h) var(--fill-s) var(--fill-l) / var(--fill-a));
            box-shadow: 0 0 0 0.2em hsl(var(--fill-h) var(--fill-s) var(--fill-l) / var(--fill-a));
        }

        p a:focus {
            box-shadow: 0 0 0 0.1em hsl(var(--fill-h) var(--fill-s) var(--fill-l) / var(--fill-a));
        }

        a {
            text-decoration: none;
            color: inherit;
            transition-property: all;
            transition-duration: 0.2s;
            hyphens: none;
        }


        /* Special */

        .theme-bar {
            border-top: solid calc(var(--draw-size) * 1) var(--theme-color);
            padding-top: 1.1rem;
        }

        /* Title */

        .title-block {
            --text-l: 10%;

            margin-bottom: 1.5rem;
            padding: 0;

            display: grid;

            color: hsl(var(--text-h) var(--text-s) var(--text-l) / var(--text-a));
        }

        .title-aside {
            font-size: 0.9em;

            align-items: center;
            justify-content: right;

            /* display: block; */
            /* font-style: normal; */
            /* font-weight: 400; */
            /* letter-spacing: var(--smallcaps-spacing); */
            text-wrap: balance;
        }

        .title-block a {
            display: block;
            font-weight: 420;
            color: hsl(var(--text-h) var(--text-s) var(--text-l) / var(--text-a));
        }

        .title-block a:hover {
            --text-l: 1%;
            border: none;
        }

        .tite-block a:focus {
            --draw-size: var(--draw-size, 1px);
            border: none;
            border-bottom: var(--draw-size) solid hsl(var(--text-h) var(--text-s) var(--text-l) / var(--text-a));
        }

        .title-block address {
            display: block;
            font-size: 1.2em;
            font-weight: 500;
            font-style: normal;
            letter-spacing: 0.01em;
            line-height: 1.1em;
        }

        .title-block address a[rel="author"] {
            font-weight: 600;
        }

        /* Title topbar
            ------------
            Can also be in aside
        */

        .title-topbar {
            display: block;
            font-size: 0.7rem;
            font-weight: 750;
            text-transform: uppercase;
            font-variant: small-caps;
            letter-spacing: var(--smallcaps-spacing);

            width: 100%;
            background: hsl(var(--bg-h) var(--bg-s) var(--bg-l) / var(--bg-a));
            color: hsl(var(--text-h) var(--text-s) var(--text-l) / var(--text-a));
            border-bottom: var(--draw-size) solid hsl(var(--fill-h) var(--fill-s) var(--fill-l));
            height: 1.3rem;
            padding: 0;
            margin: 0 0 1.1rem 0;
        }


        /* Note sections */
        .note {
            --fill-s: calc(var(--theme-s) * 0.5);

            display: block;
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
            background: #fcfcfc;
            background: radial-gradient(circle at center,
                    hsl(var(--fill-h), var(--fill-s), 99%) 17%,
                    hsl(var(--fill-h), var(--fill-s), 98%) 100%);
            padding: 1rem 1rem calc(1rem / 2);
            border-top: var(--draw-size) solid hsl(var(--theme-h), var(--fill-s), var(--theme-l));
            border-bottom: var(--draw-size) solid hsl(var(--theme-h), var(--fill-s), var(--theme-l));
        }

        @media all and (max-width:520px) {
            .note {
                padding: 1rem 0.5rem calc(1rem / 2);
            }
        }

        /* Cards */

        .cards {
            --bg-l: 96%;
            --bg-s: calc(var(--theme-s) * 0.4);
            --heading-h: var(--theme-h);
            --heading-s: var(--theme-s);
            --heading-l: var(--theme-l);
            --draw-h: var(--theme-h);
            --draw-s: var(--theme-s);
            --draw-l: var(--theme-l);

            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
            gap: var(--spacing);
            margin-bottom: var(--spacing);
        }

        .cards>div {
            margin: 0;
            padding: calc(var(--spacing) * 0.9);
            background: hsl(var(--bg-h) var(--bg-s) var(--bg-l) / var(--bg-a));
            background: radial-gradient(circle at center,
                    hsl(var(--bg-h), var(--bg-s), calc(var(--bg-l) + 3%)) 17%,
                    hsl(var(--bg-h), var(--bg-s), var(--bg-l)) 100%);
            border-top: var(--draw-size) solid hsl(var(--draw-h) var(--draw-s) var(--draw-l) / var(--draw-a));
            /* border-bottom: var(--draw-size) solid hsl(var(--draw-h) var(--draw-s) var(--draw-l) / var(--draw-a)); */
            box-shadow: none;
        }

        /* Figures */

        figure {
            width: 100%;
            padding: 0;
            margin: calc(var(--spacing) * 2) 0 1rem;

            gap: 1rem;

            justify-content: center;
            align-items: center;

            display: grid;
            grid-template-columns: auto;
            grid-auto-rows: auto;

            counter-reset: khws-subfigure;
            counter-increment: khws-figure;
        }

        figure:has(figure) {
            grid-template-columns: auto auto;
        }

        figure img {
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0;
            border: none;
            box-shadow: none;
            object-fit: contain;
        }

        figure figcaption {
            width: 100%;
            grid-column: 1 / -1;

            font-size: 0.8em;
            font-weight: 350;
            font-style: normal;
            text-align: center;
        }

        figure figcaption:before {
            counter-increment: khws-figure;
            content: 'Figure 'counter(khws-figure, number)':  ';

            font-style: normal;
            display: inline;
        }

        figure > figure {
            margin: 0;

            /* Sub-figures */
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            counter-reset: unset;
            counter-increment: unset;
        }

        figure > figure figcaption {
            /* Sub-captions */
            font-style: italic;
            font-weight: 340;
        }
        
        figure > figure figcaption:before {
            counter-increment: khws-subfigure;
            content: '('counter(khws-figure)counter(khws-subfigure, lower-alpha)')  ';

            font-style: normal;
        }

        /* Code listings */
        code {
            width: 100%;
            font-family: "Source Code Pro", "Fira Code", monospace;
            optical-sizing: auto;
            font-size: 0.8em;
            font-weight: 430;
            font-style: normal;
            font-variant-numeric: tabular-nums;
            font-variant-caps: normal;
            font-variant-emoji: none;
            overflow: hidden;
            padding: 0;
            margin: 0;
        }


        /* Buttons */
        button,
        .button {
            --fill-h: var(--theme-h);
            --fill-s: calc(var(--theme-s) - 30%);
            --fill-l: calc(var(--theme-l) - 10%);

            --draw-h: var(--fill-h);
            --draw-s: var(--fill-s);
            --draw-l: var(--fill-l);

            --text-h: var(--fill-h);
            --text-s: calc(var(--fill-s) * 1.5);
            --text-l: 99%;
            --text-a: 100%;

            box-sizing: border-box;
            font-variant: small-caps;
            text-transform: uppercase;
            font-size: 0.8em;
            font-weight: 600;
            letter-spacing: var(--smallcaps-spacing);
            display: inline-block;
            line-height: 1.0;
            padding: 0.5rem 1rem;
            margin: 0;
            outline: none;
            border-radius: 999vh;
            text-decoration: none;

            color: hsl(var(--text-h) var(--text-s) var(--text-l) / var(--text-a));
            border: 1px solid hsl(var(--fill-h) var(--fill-s) var(--fill-l));
            background-color: hsl(var(--fill-h) var(--fill-s) var(--fill-l));
            box-shadow: 0 0 0 var(--draw-size) hsl(var(--draw-h) var(--draw-s) var(--draw-l));
            /* , var(--shadow-x) var(--shadow-y) var(--shadow-size) var(--draw-size) hsl(var(--shadow-h) var(--shadow-s) var(--shadow-l) / var(--shadow-a)); */ */
        }

        button:hover,
        .button:hover {
            --fill-s: var(--theme-s);
            --fill-l: var(--theme-l);
            --draw-s: var(--theme-s);
            --text-a: 100%;
        }

        button:focus,
        .button:focus {
            --fill-s: calc(var(--theme-s) - 30%);
            --draw-s: calc(var(--theme-s) - 20%);
            --draw-l: calc(var(--theme-l) - 20%);
        }

        button:active,
        .button:active {
            --fill-l: 1%;
            --draw-s: var(--theme-s);
            --text-l: 100%;
        }

        /* Lists */
        ul,
        ol {
            --list-bullet-margin: 2.2rem;
        }

        ol {
            counter-reset: khws-ol-counter;
        }

        ol li,
        ul li {
            margin-left: var(--list-bullet-margin);
            list-style: none;
        }

        ol[dir=rtl] li,
        ul[dir=rtl] li {
            margin-left: 0;
            margin-right: var(--list-bullet-margin);
            list-style: none;

        }

        aside ul,
        aside ol {
            --list-bullet-margin: 2rem;

            font-size: 0.8em;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: var(--smallcaps-spacing);
        }

        ol li:before {
            --text-l: 99%;
            --text-a: 100%;

            counter-increment: khws-ol-counter;
            content: counter(khws-ol-counter);
            position: absolute;
            border-radius: 100%;
            border: var(--draw-size) solid hsl(var(--draw-h) var(--draw-s) var(--draw-l) / var(--draw-a));
            box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-size) 0 hsl(var(--shadow-h) var(--shadow-s) var(--shadow-l) / var(--shadow-a));

            font-size: 0.8em;
            font-family: var(--font-family-primary);
            font-weight: 800;

            line-height: 2em;

            margin: 0;
            margin-left: calc(var(--list-bullet-margin) * -1);
            padding: 0;
            width: 2em;
            height: 2em;
            box-sizing: border-box;
            display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;

            background: hsl(var(--fill-h) var(--fill-s) var(--fill-l) / var(--fill-a));
            color: hsl(var(--text-h) var(--text-s) var(--text-l) / var(--text-a));
        }

        ol[dir=rtl] li:before {
            margin: 0;
            margin-right: calc(var(--list-bullet-margin) * -1);
        }

        ul li:before {
            content: "•";
            justify-content: center;
            align-items: center;
            line-height: 1em;
            font-size: 1.5em;
            text-align: center;
            position: absolute;
            margin-left: calc(var(--list-bullet-margin) * -1);
        }

        ul.children {
            font-size: 95%;
            column-count: 2;
            column-gap: var(--list-bullet-margin);
            list-style-type: none;
        }

        ul.children li {
            margin-left: var(--list-bullet-margin);
        }

        ul.children li:before {
            margin-left: var(--list-bullet-margin);
            padding-right: var(--list-bullet-margin);
            position: static;
        }

        ul[dir='rtl'].children li {
            margin-left: 0;
            margin-right: var(--list-bullet-margin);
        }

        ul[dir='rtl'].children li:before {
            margin-left: 0;
            margin-right: var(--list-bullet-margin);
            padding-right: 0;
            padding-left: var(--list-bullet-margin);
            position: static;
        }

        @media all and (max-width:520px) {
            ul.children {
                font-size: 100%;
                column-count: 1;
                column-gap: 2em;
            }
        }

        ul.children li {
            margin-bottom: 0;
            padding-bottom: 1em;
        }

        /* Footer */
        main+footer {
            font-size: 0.8em;
            font-weight: 400;
            color: var(--text-muted);
            margin-top: 5rem;
            display: flex;
            gap: 1em;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;

            a {
                font-variant-caps: small-caps;
                text-transform: uppercase;
                letter-spacing: var(--smallcaps-spacing);
                font-weight: 800;
            }
        }

        /* Coloring */
        p,
        a {}

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: hsl(var(--heading-h) var(--heading-s) var(--heading-l) / var(--heading-a));
        }

        /* Background classes 
           ------------------
           Sets the background and text color based. 
        */
        .fill-theme {
            --fill-h: var(--theme-h);
            --fill-s: var(--theme-s);
            --fill-l: var(--theme-l);
            --fill-a: 100%;
        }

        .fill-text {
            --fill-h: var(--text-h);
            --fill-s: var(--text-s);
            --fill-l: var(--text-l);
            --fill-a: var(--text-a);
        }

        .text-fill {
            --text-h: var(--fill-h);
            --text-s: var(--fill-s);
            --text-l: var(--fill-l);
            --text-a: var(--fill-a);
        }

        .text-theme {
            --text-h: var(--theme-h);
            --text-s: var(--theme-s);
            --text-l: var(--theme-l);
            --text-a: 100%;
        }


        .fill {
            background: radial-gradient(circle at center,
                    hsl(var(--fill-h), var(--fill-s), var(--fill-l)+3%) 17%,
                    hsl(var(--fill-h), var(--fill-s), var(--fill-l)) 100%);
            color: hsl(var(--text-h) var(--text-s) var(--text-l) / var(--text-a));
        }

        .box-shadow {
            box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-size) var(--draw-size) hsl(var(--shadow-h) var(--shadow-s) var(--shadow-l) / var(--shadow-a));
        }

        .draw-theme {
            --draw-h: var(--theme-h);
            --draw-s: var(--theme-s);
            --draw-l: var(--theme-l);
            --draw-a: 100%;
        }

        .draw {
            border: var(--draw-size) solid hsl(var(--draw-h) var(--draw-s) var(--draw-l) / var(--draw-a));
        }

        .gap {
            gap: var(--spacing);
        }