:root {
    color-scheme: normal;
    --v-theme-background: 255,255,255;
    --v-theme-background-overlay-multiplier: 1;
    --v-theme-surface: 255,251,254;
    --v-theme-surface-overlay-multiplier: 1;
    --v-theme-surface-bright: 255,255,255;
    --v-theme-surface-bright-overlay-multiplier: 1;
    --v-theme-surface-light: 238,238,238;
    --v-theme-surface-light-overlay-multiplier: 1;
    --v-theme-surface-variant: 66,66,66;
    --v-theme-surface-variant-overlay-multiplier: 2;
    --v-theme-on-surface-variant: 238,238,238;
    --v-theme-primary: 67,160,71;
    --v-theme-primary-overlay-multiplier: 1;
    --v-theme-primary-darken-1: 31,85,146;
    --v-theme-primary-darken-1-overlay-multiplier: 2;
    --v-theme-secondary: 200,230,201;
    --v-theme-secondary-overlay-multiplier: 1;
    --v-theme-secondary-darken-1: 1,135,134;
    --v-theme-secondary-darken-1-overlay-multiplier: 1;
    --v-theme-error: 179,38,30;
    --v-theme-error-overlay-multiplier: 2;
    --v-theme-info: 33,150,243;
    --v-theme-info-overlay-multiplier: 1;
    --v-theme-success: 76,175,80;
    --v-theme-success-overlay-multiplier: 1;
    --v-theme-warning: 251,140,0;
    --v-theme-warning-overlay-multiplier: 1;
    --v-theme-tertiary: 125,82,96;
    --v-theme-tertiary-overlay-multiplier: 2;
    --v-theme-on-background: 0,0,0;
    --v-theme-on-surface: 0,0,0;
    --v-theme-on-surface-bright: 0,0,0;
    --v-theme-on-surface-light: 0,0,0;
    --v-theme-on-primary: 255,255,255;
    --v-theme-on-primary-darken-1: 255,255,255;
    --v-theme-on-secondary: 0,0,0;
    --v-theme-on-secondary-darken-1: 255,255,255;
    --v-theme-on-error: 255,255,255;
    --v-theme-on-info: 255,255,255;
    --v-theme-on-success: 255,255,255;
    --v-theme-on-warning: 255,255,255;
    --v-theme-on-tertiary: 255,255,255;
    --v-border-color: 0, 0, 0;
    --v-border-opacity: 0.12;
    --v-high-emphasis-opacity: 0.87;
    --v-medium-emphasis-opacity: 0.6;
    --v-disabled-opacity: 0.38;
    --v-idle-opacity: 0.04;
    --v-hover-opacity: 0.04;
    --v-focus-opacity: 0.12;
    --v-selected-opacity: 0.08;
    --v-activated-opacity: 0.12;
    --v-pressed-opacity: 0.12;
    --v-dragged-opacity: 0.08;
    --v-theme-kbd: 238, 238, 238;
    --v-theme-on-kbd: 0, 0, 0;
    --v-theme-code: 245, 245, 245;
    --v-theme-on-code: 0, 0, 0;
    

    --v-theme-dark-background: 18,18,18;

    .v-theme--dark {
        color-scheme: dark;
        --v-theme-background: var(--v-theme-dark-background);
        --v-theme-background-overlay-multiplier: 1;
        --v-theme-surface: 33,33,33;
        --v-theme-surface-overlay-multiplier: 1;
        --v-theme-surface-bright: 204,191,214;
        --v-theme-surface-bright-overlay-multiplier: 2;
        --v-theme-surface-light: 66,66,66;
        --v-theme-surface-light-overlay-multiplier: 1;
        --v-theme-surface-variant: 200,200,200;
        --v-theme-surface-variant-overlay-multiplier: 2;
        --v-theme-on-surface-variant: 0,0,0;
        --v-theme-primary: 33,150,243;
        --v-theme-primary-overlay-multiplier: 2;
        --v-theme-primary-darken-1: 39,124,193;
        --v-theme-primary-darken-1-overlay-multiplier: 2;
        --v-theme-secondary: 84,182,178;
        --v-theme-secondary-overlay-multiplier: 2;
        --v-theme-secondary-darken-1: 72,169,166;
        --v-theme-secondary-darken-1-overlay-multiplier: 2;
        --v-theme-error: 207,102,121;
        --v-theme-error-overlay-multiplier: 2;
        --v-theme-info: 33,150,243;
        --v-theme-info-overlay-multiplier: 2;
        --v-theme-success: 76,175,80;
        --v-theme-success-overlay-multiplier: 2;
        --v-theme-warning: 251,140,0;
        --v-theme-warning-overlay-multiplier: 2;
        --v-theme-on-background: 255,255,255;
        --v-theme-on-surface: 255,255,255;
        --v-theme-on-surface-bright: 0,0,0;
        --v-theme-on-surface-light: 255,255,255;
        --v-theme-on-primary: 255,255,255;
        --v-theme-on-primary-darken-1: 255,255,255;
        --v-theme-on-secondary: 255,255,255;
        --v-theme-on-secondary-darken-1: 255,255,255;
        --v-theme-on-error: 255,255,255;
        --v-theme-on-info: 255,255,255;
        --v-theme-on-success: 255,255,255;
        --v-theme-on-warning: 255,255,255;
        --v-border-color: 255, 255, 255;
        --v-border-opacity: 0.12;
        --v-high-emphasis-opacity: 1;
        --v-medium-emphasis-opacity: 0.7;
        --v-disabled-opacity: 0.5;
        --v-idle-opacity: 0.1;
        --v-hover-opacity: 0.04;
        --v-focus-opacity: 0.12;
        --v-selected-opacity: 0.08;
        --v-activated-opacity: 0.12;
        --v-pressed-opacity: 0.16;
        --v-dragged-opacity: 0.08;
        --v-theme-kbd: 66, 66, 66;
        --v-theme-on-kbd: 255, 255, 255;
        --v-theme-code: 52, 52, 52;
        --v-theme-on-code: 204, 204, 204;
    }

    --font-theme: sans serif;
    --font-size: 1rem;
    --font-size-summary: 1.2em;
    --font-size-nav: 1.4em;
    --font-size-title: 2.4em;
    --font-size-slide-title: 1.4em;

    --article-h-padding: calc((100% - 80%) / 2);
    --article-h-mt: 0.6rem;
    --text-block-padding: 0.4rem;
    --block-margin: 1rem;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0px;
    font-size: var(--font-size);
    min-height: 100dvh;
    background-color: rgb(var(--v-theme-background)) !important;
}
main {
    min-height: 100dvh;
    width: 100%
    font-family: var(--font-theme);
    margin-bottom: var(--block-margin);
}

nav a {
    text-decoration: none;
    font-family: var(--font-theme);
}

main a { color: rgb(var(--v-theme-primary)); }
main a:hover { color: rgb(var(--v-theme-secondary)); }

.spacer {
    flex-grow: 1;
}

.bg { background-color: rgb(var(--v-theme-background)) !important; }
.dark-bg {
    background-color: rgb(var(--v-theme-dark-background)) !important;
    color: rgb(var(--v-theme-primary));
}
.primary-bg { background-color: rgb(var(--v-theme-primary)); }

h1, h2 {
    font-family: var(--font-theme);
    clear: both;
}

h1:first-child { margin-top: 0rem; }
h2:first-child { margin-top: 0rem; }
h3:first-child { margin-top: var(--article-h-mt); }
h2 + div > h3 { margin-top: 0rem; }

ul > li { margin-left: 2rem; }

p { padding: var(--text-block-padding) 0em; }


.flex-col { display: flex; flex-orientation: column; }
.flex-row { display: flex; flex-orientation: column; }
.grow-0 { flex-grow: 0 }
.grow-1 { flex-grow: 1 }


/**** Page ****/
article {
    margin: 0rem var(--article-h-padding);
}

    article > header:first-child {
        padding-top: 0rem;
    }

    article .section h2 {
        color: rgb(var(--v-theme-primary));
        margin-top: 0.4rem;
    }

    article > * + * {
        padding-top: 0.4rem;
        margin-top: 0rem;
    }

    article.page > header > h2 {
        text-align: center;
        font-size: var(--font-size-title);
    }

    article > header + .section,
    article > .section + .section {
        padding-top: 0rem;
    }

    article .summary {
        font-size: var(--font-size-summary);
    }

    article .summary + * {
        clear: both;
    }

    article .note {
        color: rgb(var(--v-theme-primary));
        padding: var(--text-block-padding) 0em;
        margin: calc(2 * var(--text-block-padding)) 0rem;
    }


article img {
    max-width: calc(40% - 4rem);
    height: auto;
    flex-shrink: 0;
    margin: 2rem 2rem 1rem 2rem;
}

    article img:not(.no-viewer) {
        cursor: zoom-in;
    }

    article > div:not(.slide) img:first-child {
        margin-top: var(--text-block-padding);
    }


/**** Slide ****/
.slides {
    padding-bottom: 2rem;
    scroll-snap-type: y mandatory;
    margin: 0rem;
}

    .slides .slide {
        padding-left: var(--article-h-padding);
        padding-right: var(--article-h-padding);
    }


.slide {
    scroll-snap-align: start;
    padding-bottom: 2.6rem;
    padding-top: 3rem;
    margin-top: -2.6rem;

    overflow: hidden;
    transition: padding 0.3s, margin 0.3s;
    transition-timeline: 0s;
}

    .slide.grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .slide:not(.grid):has(.content) {
        display: flex;
        flex-direction: row;
        align-items: start;
    }

    .slide > .content {
        flex-grow: 1;
        min-width: 50%;
        margin-top: 2rem;
    }

    .slide p:nth-of-type(1) {
        font-size: var(--font-size-slide-title);
        font-weight: bold;
        margin-top: 0rem;
    }


    .slide > img, .slide .content > img {
        max-width: calc(100% - 4rem);
        margin: 2rem 2rem 1rem 2rem;
        cursor: zoom-in;
    }

        .slide:not(.grid) > img {
            max-width: calc(50% - 4rem);
        }

    /** nests and special cases **/
    .section .slide {
        padding: 2rem;
        padding-bottom: 3rem;
        border: 1px rgb(var(--v-theme-primary)) solid;
    }

        .section .slide > * {
        }

    .section .slide:nth-of-type(1) {
        margin-top: 2rem !important;
    }
        .section .slide:nth-of-type(1) > * {
            margin-top: 0rem;
        }


    /** animation hovering **/
    .slide:hover {
        margin-top: -5rem;
        padding-bottom: 5rem;
    }
    
    .slide.hover:has(img), .slide:first-child:has(img), .slide:last-child:has(img)
    {
        min-height: 20rem;
    }


    /** Boxing & Colors **/
    .slide:nth-of-type(3n+1) {
        background-color: rgb(var(--v-theme-background));
        clip-path: polygon(0 0, 100% 2.5rem, 100% 100%, 0 100%);
    }

        .slide:nth-of-type(1) {
            margin-top: 0rem !important;
            padding-top: 2rem;
            clip-path: none;
        }

        .slide:nth-of-type(3n+1) img {
            box-shadow: 0rem 0rem 0.5rem rgb(var(--v-theme-dark-background));
        }

    .slide:nth-of-type(3n+2) {
        background-color: rgb(var(--v-theme-primary));
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
    }

        .slide:nth-of-type(3n+2) img {
                box-shadow: 0rem 0rem 0.5rem rgb(var(--v-theme-dark-background));
        }

        .slide:nth-of-type(3n+2) a {
            color: #000;
        }

    .slide:nth-of-type(3n) {
        color: rgb(var(--v-theme-primary));
        background-color: rgb(var(--v-theme-dark-background));
        clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 calc(100% - 2.5rem));
    }

        .slide:nth-of-type(3n) img {
            box-shadow: 0rem 0rem 0.5rem rgb(var(--v-theme-background));
        }


@media screen and (min-width: 1400px) {
    :root {
        --font-size: 1.2rem;
    }
}

@media screen and (max-width: 900px) {

    :root {
        --article-h-padding: 2rem;
        --font-size: 1.2rem
    }
   
    .slide:not(.grid):has(.content) {
        flex-direction: column;
    }

    .slide.grid {
        grid-template-columns: 1fr;
    }

    .slide:not(.grid) > img {
        max-width: calc(100% - 2 * 2rem);
    }
}