html {
    height: 100%;
    font-size: 0.9em;
}


/* Theme color schemes */
.z-theme-dark {
    --z-theme-background-color: hsl(204, 14%, 7%);
    --z-theme-background-color-filter: brightness(0) saturate(100%) invert(5%) sepia(3%) saturate(3436%) hue-rotate(161deg) brightness(97%) contrast(95%);
    --z-theme-background-color-fade: hsla(204, 14%, 7%, 0.6);
    --z-theme-background-image: linear-gradient(0, hsl(204, 14%, 6%) 0%, hsl(204, 14%, 7%) 74%);
    --z-theme-color: hsl(45, 24%, 87%);
    --z-theme-color-faded: hsla(45, 24%, 87%,0.6);
    --z-theme-color-dim-on-background: hsl(45, 0%, 30%);
    --z-theme-color-filter: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(426%) hue-rotate(7deg) brightness(105%) contrast(88%);
    --z-theme-background-accent: hsl(204, 14%, 13%);
    --z-line-height: 2;
}

.z-theme-light {
    --z-theme-background-color: hsl(45, 24%, 95%);
    --z-theme-background-color-filter: brightness(0) saturate(100%) invert(95%) sepia(10%) saturate(500%) hue-rotate(7deg) brightness(105%) contrast(88%);
    --z-theme-background-color-fade: hsla(45, 24%, 95%, 0.8);
    --z-theme-background-image: linear-gradient(0, hsl(45, 24%, 96%) 0%, hsl(45, 24%, 94%) 74%);
    --z-theme-color: hsl(204, 14%, 20%);
    --z-theme-color-faded: hsla(204, 14%, 20%,0.9);
    --z-theme-color-dim-on-background: hsl(204, 14%, 70%);
    --z-theme-color-filter: brightness(0) saturate(100%) invert(20%) sepia(10%) saturate(500%) hue-rotate(161deg) brightness(97%) contrast(95%);
    --z-theme-background-accent: hsl(45, 20%, 88%);
    --z-line-height: 2;
}

body {
    background-color: var(--z-theme-background-color);
    background-image: var(--z-theme-background-image);
    color: var(--z-theme-color);
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    font-family: "TX-02", monospace, sans-serif;
    font-optical-sizing: auto;
    font-size: 1rem;
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga" on;
    letter-spacing: 0;
    line-height: 1.5em;
    min-height: 100%;


    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* LINKS */
.a-like,
a {
    color: var(--z-theme-color);
    text-decoration-color: var(--z-theme-color);
    /*transition: color 0.05s ease, background-color 0.1s ease;*/

    text-decoration-color: currentcolor;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    -webkit-text-decoration-skip-ink: all;
    text-decoration-skip-ink: all;
    text-decoration-style: solid;
    text-decoration: underline;

    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    outline: 0;

}

/* Hoovers
Generic links and some specific menu links
*/
a:not(:is(.hidden-link)):hover, a:not(:is(.hidden-link)):active, a:not(:is(.hidden-link)):focus,
header.site-header .main-navigation menu li.active a,
.site-is-photos header menu li.photos-li a,
.site-is-blog header menu li.blog-li a,
.a-like:hover ,
.site-is-me header menu li.me-li a {
    background-color: var(--z-theme-color);
    color: var(--z-theme-background-color);

    /*text-decoration: none;*/
    text-decoration-color: var(--z-theme-color);
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    -webkit-text-decoration-skip-ink: all;
    text-decoration-skip-ink: all;
    text-decoration-style: solid;

    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    cursor:pointer;
    outline: 0;
}

tr.link-hover:hover{
    background-color: var(--z-theme-color);
    color: var(--z-theme-background-color);
    /*text-underline-offset: 2px;*/
}

a.no-decoration{
    text-decoration: none;
    padding-top:0.2rem;
    padding-bottom:0.2rem;
}


pre , code, blockquote{
    font-family: "TX-02", monospace, sans-serif;
    font-optical-sizing: auto;
    font-size: 0.9rem;
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga" off;
}

::selection {
    background: var(--z-theme-color);
    color: var(--z-theme-background-color);
    text-shadow: none;
}

::-moz-selection {
    background: var(--z-theme-color);
    color: var(--z-theme-background-color);
    text-shadow: none;
}

/* Retro terminal color schemes */
.z-retro-orange {
    --z-retro-accent: rgb(255, 140, 0);
    --z-retro-accent-light: hsl(31, 100%, 71%);
    --z-retro-accent-medium: hsl(27, 100%, 66%);
    --z-retro-accent-dark-bg: hsla(36, 100%, 5%, 0.4);
    --z-retro-accent-glow-strong: hsla(33, 100%, 50%, 0.5);
    --z-retro-accent-glow-medium:hsla(33, 100%, 50%, 0.3);
    --z-retro-accent-glow-light: hsla(33, 100%, 50%, 0.15);
    --z-retro-accent-glow-subtle: hsla(33, 100%, 50%, 0.08);
    --z-retro-accent-tint: hsla(33, 100%, 50%, 0.05);
    --z-retro-border: hsla(33, 100%, 50%, 0.5);
    --z-retro-inset-shadow: hsla(0, 0%, 0%, 0.5);
}

.z-retro-white {
    --z-retro-accent: hsl(45, 24%, 87%);
    --z-retro-accent-light: hsl(46, 30%, 92%);
    --z-retro-accent-medium: hsl(44, 27%, 89%);
    --z-retro-accent-dark-bg: hsla(36, 14%, 7%, 0.4);
    --z-retro-accent-glow-strong: hsla(45, 24%, 87%, 0.5);
    --z-retro-accent-glow-medium: hsla(45, 24%, 87%, 0.3);
    --z-retro-accent-glow-light: hsla(45, 24%, 87%, 0.15);
    --z-retro-accent-glow-subtle: hsla(45, 24%, 87%, 0.08);
    --z-retro-accent-tint: hsla(45, 24%, 87%, 0.05);
    --z-retro-border: hsla(45, 24%, 87%, 0.5);
    --z-retro-inset-shadow: hsla(0, 0%, 0%, 0.5);
}

.z-retro-dark {
    --z-retro-accent: hsl(204, 14%, 25%);
    --z-retro-accent-light: hsl(204, 14%, 30%);
    --z-retro-accent-medium: hsl(204, 14%, 28%);
    --z-retro-accent-dark-bg: hsla(45, 20%, 92%, 0.4);
    --z-retro-accent-glow-strong: hsla(204, 14%, 25%, 0.5);
    --z-retro-accent-glow-medium: hsla(204, 14%, 25%, 0.3);
    --z-retro-accent-glow-light: hsla(204, 14%, 25%, 0.15);
    --z-retro-accent-glow-subtle: hsla(204, 14%, 25%, 0.08);
    --z-retro-accent-tint: hsla(204, 14%, 25%, 0.05);
    --z-retro-border: hsla(204, 14%, 25%, 0.5);
    --z-retro-inset-shadow: hsla(0, 0%, 0%, 0.3);
}

/*Positioning content of the page*/
/* BODY WITH NO ARTICLE OR LIST (Home page) */
body:not(:has(article)):not(:has(>main>ul)) {
    justify-content: flex-end;
    height: 100%;
    overflow: hidden;
}

body:not(:has(article)):not(:has(>main>ul)) main {
    max-height: 50%;
    min-height: 50%;
    width: 100%;
    overflow: hidden;
}

/* MAIN WITH ARTICLE OR LIST */
body:has(article) main,
body:has(>main>ul) main {
    margin-bottom: 3rem;
    /*overflow: hidden;*/
    box-sizing: border-box;
    max-width: var(--z-max-content-width);
    min-width: var(--z-min-content-width);
}

/*--------------------------------*/


/* Reference MEDIA QUERIES. need to be reported everytime they are used (no variable for screen size)*/
/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 550px) {
    :root {
        --z-max-content-width: 95%;
        --z-min-content-width: 95%;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 550px) and (max-width: 767px) {
    :root {
        --z-max-content-width: 90%;
        --z-min-content-width: 90%;
    }
}

/* Tablets (portrait) ----------- */
@media only screen and (min-width: 768px) and (max-width: 880px) {
    :root {
        --z-max-content-width: 90%;
        --z-min-content-width: 90%;
    }
}

/* Tablet (landscape) and Desktop ----------- */
@media only screen and (min-width: 881px) {
    :root {
        --z-max-content-width: 800px;
        --z-min-content-width: 800px;
    }
}


/* MANAGING HEADER MENU */

header.surrogate-header a ,
header.site-header a {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

header.surrogate-header menu ,
header.site-header menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

header.surrogate-header ,
header.site-header {
    --dot-margin: 1rem;
    font-size: 1.2em;
}

header.surrogate-header .site-navigation ,
header.site-header .site-navigation {
    /*border: 1px solid red;*/
    /*display:flex;*/
    font-size: 1.7em;
    font-weight: bold;
}



header.surrogate-header menu li a ,
header.site-header menu li a {
    text-transform: uppercase;
}

header.surrogate-header .header-divider ,
header.site-header .header-divider {
    background: var(--z-theme-color);
}

.state-machine {
    margin: 0;
    display: none;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    width: 0;
    height: 0;
}

button:has(label[for="menu-toggle"]) {
    display: none;
}

.menu-backdrop {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    /*backdrop-filter: blur(10px) grayscale(100%);*/
    /*background-color: var(--z-theme-background-color-fade);*/
    z-index: 80;
    transform: translateX(-100%);
    background-color: rgba(0,0,0,0);
    backdrop-filter: blur(0px) grayscale(0%);
    transition: background-color 0.4s ease-in-out, backdrop-filter 0.4s ease-in-out;
}




button, .btn {
    background: none;
    color: inherit;
    padding: 0;
    font: inherit;
    outline: inherit;
    text-wrap: nowrap;
    min-height: 1.6rem;
    display: flex;
    /*position: fixed;*/
    /*bottom: 1rem;*/
    /*right: 1rem;*/
    border: 1px dotted var(--z-theme-color);
    border-radius: 2px;
    z-index: 99;
    justify-content: center;
    align-items: center;
    background-color: var(--z-theme-background-color);
    /*display: none;*/
    cursor: pointer;
    /*animation: blink-click-alt 0.5s forwards;*/
}


button input{
    appearance: none;
}
button input:focus{
    opacity: 0;
}

button:hover, button:hover *,
.btn:hover{
    cursor: pointer;
}
button:hover, button:active , button:focus,
button:has(input:focus),
.btn:hover, .btn:active
{
    background-color: var(--z-theme-color);
    color: var(--z-theme-background-color);
    border: 1px solid var(--z-theme-color);
}

button:has(input:focus) img {
    filter: var(--z-theme-background-color-filter)
}

button>label {
    width:100%;
    height:100%;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

a.btn {
    text-decoration: none;
}

button:active{
    animation: blink-click 0.4s forwards;
}





@media only screen and (min-width: 550px) {

    header.surrogate-header ,
    header.site-header {
        margin-bottom: 2rem;
    }
    header.surrogate-header{
        display: none;
    }
    /*Menu when on home*/
    header.site-header {
        max-width: var(--z-max-content-width);
        min-width: var(--z-min-content-width);
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        align-items: end;
    }


    header.site-header input[type="checkbox"][name="menu-toggle"] {
        display: none;
    }

    /*!*menu when on article page*!*/
    /*body:not(:has(article)):has(>main>ul) header.site-header {*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*}*/
    header.site-header .main-navigation menu li:last-child a,
    header.site-header .site-navigation .site-title a {
        padding-right: 0;
    }
    header.site-header menu li {
        text-wrap: nowrap;
    }

    /* GENERIC MENU */
    header.site-header input[type="checkbox"][name="menu-toggle"],
    header.site-header label[for="menu-toggle"] {
        display: none;
    }

    /* SITE NAVIGATION */
    header.site-header .site-navigation {
        /*border: 1px solid red;*/
        /*display:flex;*/
        justify-content: end;
        font-size: 1.7em;
        font-weight: bold;
        display: flex;
        padding-left: 4rem;
    }

    header.site-header .site-navigation menu a {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }

    header.site-header .site-navigation menu {
        /* remove ul/li default styles */
        display: flex;
        flex-wrap: nowrap;
        gap: var(--dot-margin);
    }

    header.site-header .site-navigation menu:after {
        content: "◊";
        order: 999;
        display: block;
        text-align: center;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        color: var(--z-theme-color);
    }

    header.site-header .site-title {
        padding-left: var(--dot-margin);
    }

    header.site-header .site-title a {
        /*background-color: var(--z-theme-main-color-bg);*/
        /*color: var(--z-theme-main-color);*/
        text-transform: uppercase;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }

    header.site-header .site-navigation a {
        text-decoration: none;
    }

    /* DIVIDER */
    header.site-header .header-divider {
        height: 1rem;
        display: block;
        max-width: 100%;
        min-width: 100%;
        /*background: var(--z-theme-color);*/
    }

    /* MAIN MENU */
    header.site-header menu li a,
    header.site-header .site-title a {
        display: block;
    }

    header.site-header .main-navigation menu  a:hover,
    header.site-header .main-navigation menu .active a{
        text-decoration: none;
    }
    header.site-header .main-navigation menu {
        display: flex;
        width: fit-content;
        flex-direction: row;
        justify-content: end;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
}

/* MOBILE */


@media only screen and (max-width: 800px) {
    header.surrogate-header ,
    header.site-header {
        font-size: 1em;
    }
}

@media only screen and (max-width: 700px) {
    header.surrogate-header ,
    header.site-header {
        font-size: 0.8em;
    }
}

@media only screen and (max-width: 300px) {
    header.surrogate-header ,
    header.site-header {
        font-size: 0.6em;
    }
}

/* small width screens */
@media only screen and (max-width: 549px) {

    .expendable {
        display: none;
    }

    /*!** MENU ON HOME PAGE  **!*/
    /*body:not(:has(article)):not(:has(>main>ul)) main {*/
    /*    max-height: 40%;*/
    /*    min-height: 40%;*/
    /*}*/
    /*body:not(:has(article)):not(:has(>main>ul)) header.site-header {*/
    /*    max-height: 60%;*/
    /*    min-height: 60%;*/
    /*    width: 100%;*/
    /*    overflow: hidden;*/
    /*}*/
    /*body:not(:has(article)):not(:has(>main>ul)) header.site-header {*/
    /*    !*transform-origin: center;*!*/
    /*    !*transform: rotate(90deg) translateX(25%);*!*/
    /*    flex-direction: row;*/
    /*    flex-wrap: nowrap;*/
    /*    justify-content: center;*/
    /*}*/
    /*body:not(:has(article)):not(:has(>main>ul)) header.site-header .site-navigation,*/
    /*body:not(:has(article)):not(:has(>main>ul)) header.site-header .site-navigation menu,*/
    /*body:not(:has(article)):not(:has(>main>ul)) header.site-header .main-navigation menu {*/
    /*    flex-wrap: nowrap;*/
    /*    flex-direction: column;*/
    /*}*/
    /*body:not(:has(article)):not(:has(>main>ul)) header.site-header .site-navigation menu {*/
    /*    align-items: end;*/
    /*    padding-bottom: 7rem;*/
    /*    padding-top: 2rem;*/
    /*}*/
    /*body:not(:has(article)):not(:has(>main>ul)) header.site-header .site-navigation menu:after {*/
    /*    display: none;*/
    /*}*/
    /*body:not(:has(article)):not(:has(>main>ul)) header.site-header .site-navigation .site-title {*/
    /*    transform-origin: top right;*/
    /*    transform: rotate(90deg);*/
    /*    width: fit-content;*/
    /*}*/
    /*body:not(:has(article)):not(:has(>main>ul)) header.site-header .main-navigation menu {*/
    /*    padding-bottom: 2rem;*/
    /*}*/
    /*body:not(:has(article)):not(:has(>main>ul)) header.site-header .header-divider {*/
    /*    height: 100%;*/
    /*    width: 1rem;*/
    /*    min-width: 1rem;*/
    /*    max-width: 1rem;*/
    /*    flex-grow: 0;*/
    /*}*/
    /*body:not(:has(article)):not(:has(>main>ul)) header.site-header .site-navigation {*/
    /*    align-items: end;*/
    /*}*/
    /*body:not(:has(article)):not(:has(>main>ul)) header.site-header .site-navigation,*/
    /*body:not(:has(article)):not(:has(>main>ul)) header.site-header .main-navigation {*/
    /*    flex-grow: 1;*/
    /*    padding-left: 0;*/
    /*}*/
    /*=================================*/
    /* MENU ON ARTICLE AND LIST PAGES */
    /*=================================*/
    /*--------------------------------*/
    /* FULL PAGE VERSION */
    /*--------------------------------*/
    /*body:not(:has(article)):not(:has(>main>ul)) main {*/
    /*    max-height: 40%;*/
    /*    min-height: 40%;*/
    /*}*/



    header.site-header {
        width: 100%;
        display: flex;
        position:fixed;
        top: 0;
        left: 0;
        z-index: 90;
        opacity: 0;
        /*padding-bottom: 300px;*/
        /*border: 1px solid red ;*/
        /*transform-origin: center;*/
        /*transform: rotate(90deg) translateX(25%);*/
        flex-direction: row;
        flex-wrap: nowrap;
        /*justify-content: center;*/
        transition: opacity 0.2s ease-in-out;
        transform: translateY(-100%);
    }

    header.site-header .site-navigation,
    header.site-header .site-navigation menu,
    header.site-header .main-navigation menu {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    header.site-header .site-navigation {
        display: flex;
        align-items: end;
    }

    header.site-header .site-navigation menu {
        align-items: end;
        padding-bottom: 7rem;
        padding-top: 2rem;
        gap: var(--dot-margin);
    }

    header.site-header .site-navigation menu:after {
        display: none;
    }

    header.site-header .site-navigation a {
        text-decoration: none;
    }

    header.site-header .site-navigation .site-title {
        transform-origin: bottom right;
        transform: rotate(90deg) translateY(100%);
        margin-bottom: 2rem;
        /*width: fit-content;*/
    }

    header.site-header .main-navigation menu {
        /*height: calc(100% - 2rem);*/
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: start;
        gap: 0.5rem;
    }

    header.site-header .main-navigation menu a {
        width: fit-content;
        display: block;
    }

    header.site-header .header-divider {
        /*height: 100%;*/
        min-height: 100%;
        max-height: 100%;
        /*left: calc(50% - 0.5rem);*/
        width: 1rem;
        min-width: 1rem;
        max-width: 1rem;
    }


    header.site-header .site-navigation,
    header.site-header .main-navigation {
        padding-left: 0;
        width: calc(50% - 0.5rem);
        margin-top: 4rem;
    }

    header.site-header .main-navigation {
        padding-bottom: 2rem;
    }

    /* SUROGATE HEADER */

    header.surrogate-header {
        max-width: var(--z-max-content-width);
        min-width: var(--z-min-content-width);
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        align-items: end;
        text-transform: uppercase;
        margin-bottom: 2rem;
    }

    header.surrogate-header .site-navigation {
        /*border: 1px solid red;*/
        /*display:flex;*/
        justify-content: end;
        font-size: 1.7em;
        font-weight: bold;
        display: flex;
        padding-left: 4rem;
    }

    header.surrogate-header .header-divider{
        height: 1rem;
        display: block;
        max-width: 100%;
        min-width: 100%;
    }

    header.surrogate-header .site-navigation menu a {
         padding-top: 0.3rem;
         padding-bottom: 0.3rem;
     }

    header.surrogate-header .site-navigation menu {
        /* remove ul/li default styles */
        list-style: none;
        margin:0;
        padding:0;
        display: flex;
        flex-wrap: nowrap;
        gap: var(--dot-margin);
    }

    header.surrogate-header .site-navigation menu:after {
        content: "◊";
        order: 999;
        display: block;
        text-align: center;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        color: var(--z-theme-color);
    }

    header.surrogate-header .site-title {
          padding-left: var(--dot-margin);
      }
    header.surrogate-header .site-title label {
        /*background-color: var(--z-theme-main-color-bg);*/
        /*color: var(--z-theme-main-color);*/
        text-transform: uppercase;
        padding-left: 0.3rem;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }
    header.surrogate-header .site-title label:hover {
        background-color: var(--z-theme-color);
        color: var(--z-theme-background-color);
        cursor: pointer;
    }
    header.surrogate-header .site-navigation a {
        text-decoration: none;
    }
    header.surrogate-header menu li a,
    header.surrogate-header .site-title a {
        display: block;
    }
    header.surrogate-header .site-navigation menu li {
        display: none;
    }

    .site-is-photos header.surrogate-header menu li.photos-li ,
    .site-is-blog header.surrogate-header menu li.blog-li ,
    .site-is-me header.surrogate-header menu li.me-li  {
        display: initial;
    }


    /* --- END --- */


    body:has(input[type="checkbox"][name="menu-toggle"]) header.site-header{
        /*animation: fade-out 0.4s forwards;*/
    }
    body:has(input[type="checkbox"][name="menu-toggle"]:checked) header.site-header{
        /*opacity: 1;*/
        opacity: 1;
        transform: translateY(0);
        /*animation: fade-in 0.4s forwards;*/



    }
    body:has(input[type="checkbox"][name="menu-toggle"]:checked){
        overflow: hidden;
    }
    body:has(input[type="checkbox"][name="menu-toggle"]:checked) main{
        /*opacity: 0.1;*/
    }
    body:has(input[type="checkbox"][name="menu-toggle"]) .menu-backdrop{
        /*animation: blur-and-gray-out  ;*/
        /*animation-duration: 0.7s;*/
        /*animation-fill-mode: forwards;*/
    }
    body:has(input[type="checkbox"][name="menu-toggle"]:checked) .menu-backdrop{
        /*display: initial;*/
        /*animation: blur-and-gray-in;*/
        /*animation-duration: 0.7s;*/
        /*animation-fill-mode: forwards;*/
        transform: translateX(0);
        background-color: var(--z-theme-background-color-fade);
        backdrop-filter: blur(10px) grayscale(100%);
    }


    button:has(label[for="menu-toggle"]) {
        min-width: 5rem;
        display: flex;
    }

    /*header.site-header input[type="checkbox"][name="menu-toggle"],*/
    label[for="menu-toggle"] {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }



    body:has(input[type="checkbox"][name="menu-toggle"]:checked) label[for="menu-toggle"]{
        /*animation: blink-click 0.5s forwards;*/
    }

    label[for="menu-toggle"] .close{
        display: none;
        text-transform: uppercase;
    }
    label[for="menu-toggle"] .open{
        display: inline;
        text-transform: uppercase;
    }

    body:has(input[type="checkbox"][name="menu-toggle"]:checked) label[for="menu-toggle"] .close{
        display: inline;
    }
    body:has(input[type="checkbox"][name="menu-toggle"]:checked) label[for="menu-toggle"] .open{
        display: none;
    }


    /*--------------------------------*/
    /* SIDE MENU VERSION */
    /*--------------------------------*/
    /*!** MENU ON ARTICLE AND LIST PAGES **!*/
    /*body:has(article) header.site-header,*/
    /*body:has(>main>ul) header.site-header {*/
    /*    !*backdrop-filter: blur(10px);*!*/
    /*    transform-origin: bottom right;*/
    /*    transform: rotate(90deg) translateY(100%);*/
    /*    position: fixed;*/
    /*    right: 0;*/
    /*    bottom: 0;*/
    /*    max-width: initial;*/
    /*    min-width: initial;*/
    /*    font-size: 0.8em;*/
    /*    padding-bottom: 0.2rem;*/
    /*    !*height: 100%;*!*/
    /*    !*justify-content: end;*!*/
    /*    transition: transform 0.2s cubic-bezier(.47,1.64,.41,.8), box-shadow 0.3s ease-in-out;*/
    /*}*/
    /*body:has(article) header.site-header .site-navigation,*/
    /*body:has(>main>ul) header.site-header .site-navigation {*/
    /*    width: fit-content;*/
    /*}*/
    /*body:has(article) header.site-header .site-title,*/
    /*body:has(article) header.site-header .site-navigation menu,*/
    /*body:has(>main>ul) header.site-header .site-title,*/
    /*body:has(>main>ul) header.site-header .site-navigation menu {*/
    /*    background-color: var(--z-theme-background-color-fade);*/
    /*    backdrop-filter: blur(10px);*/
    /*}*/
    /*body:has(article) header.site-header input[type="checkbox"][name="menu-toggle"],*/
    /*body:has(>main>ul) header.site-header input[type="checkbox"][name="menu-toggle"]{*/
    /*    height: 100%;*/
    /*    margin: 0;*/
    /*    -webkit-appearance: none;*/
    /*    appearance: none;*/
    /*    display: flex;*/
    /*    flex-direction: row;*/
    /*    justify-content: start;*/
    /*    align-items: start;*/
    /*}*/
    /*body:has(article) header.site-header input[type="checkbox"][name="menu-toggle"]:after,*/
    /*body:has(>main>ul) header.site-header input[type="checkbox"][name="menu-toggle"]:after{*/
    /*    content: "▷";*/
    /*    font-family: TX-02, monospace;*/
    /*    display: block;*/
    /*    color: var(--z-theme-background-color);*/
    /*    padding-left: 0.2rem;*/
    /*    padding-right: 0.2rem;*/
    /*    line-height: 1rem;*/
    /*    transition: transform 0.2s cubic-bezier(.47,1.64,.41,.8);*/
    /*    opacity: 0.6;*/
    /*    !*animation: glow 0.010s infinite alternate;*!*/
    /*}*/
    /*body:has(article) header.site-header:has(input[type="checkbox"][name="menu-toggle"]) .header-divider,*/
    /*body:has(>main>ul) header.site-header:has(input[type="checkbox"][name="menu-toggle"]) .header-divider {*/
    /*    display: flex;*/
    /*}*/
    /*body:has(article) header.site-header label,*/
    /*body:has(>main>ul) header.site-header label{*/
    /*    flex-grow: 1;*/
    /*}*/
    /*body:has(article) header.site-header input[type="checkbox"][name="menu-toggle"]:checked:after,*/
    /*body:has(>main>ul) header.site-header input[type="checkbox"][name="menu-toggle"]:checked:after{*/
    /*    transform: rotate(180deg);*/
    /*}*/
    /*body:has(article) header.site-header:has(input[type="checkbox"][name="menu-toggle"]:checked) ,*/
    /*body:has(>main>ul) header.site-header:has(input[type="checkbox"][name="menu-toggle"]:checked) {*/
    /*    transform: rotate(60deg) translateY(45%) translateX(90%);*/
    /*}*/
    /*body:has(article) header.site-header:has(input[type="checkbox"][name="menu-toggle"]:checked) .header-divider,*/
    /*body:has(>main>ul) header.site-header:has(input[type="checkbox"][name="menu-toggle"]:checked) .header-divider {*/
    /*    position: relative;*/
    /*}*/
    /*body:has(article) header.site-header:has(input[type="checkbox"][name="menu-toggle"]) .main-navigation,*/
    /*body:has(>main>ul) header.site-header:has(input[type="checkbox"][name="menu-toggle"]) .main-navigation {*/
    /*    transition: transform 0.2s cubic-bezier(.47,1.64,.41,.8);*/
    /*}*/
    /*body:has(article) header.site-header:has(input[type="checkbox"][name="menu-toggle"]:checked) .main-navigation,*/
    /*body:has(>main>ul) header.site-header:has(input[type="checkbox"][name="menu-toggle"]:checked) .main-navigation {*/
    /*    transform: translateX(100%);*/
    /*}*/
    /*body:has(article) header.site-header:has(input[type="checkbox"][name="menu-toggle"]:checked) .header-divider:after,*/
    /*body:has(>main>ul) header.site-header:has(input[type="checkbox"][name="menu-toggle"]:checked) .header-divider:after{*/
    /*    content: " ";*/
    /*    position: absolute;*/
    /*    z-index: -1;*/
    /*    width: 100%;*/
    /*    height: 1rem;*/
    /*    opacity: 1;*/
    /*    border-radius: 5px;*/
    /*    animation: glow 5s infinite alternate;*/
    /*    box-shadow: 0 0 50px 0 var(--z-theme-color);*/
    /*}*/
    /*body:has(article) header.site-header .main-navigation menu,*/
    /*body:has(>main>ul) header.site-header .main-navigation menu {*/
    /*    background-color: var(--z-theme-background-color-fade);*/
    /*    backdrop-filter: blur(10px);*/
    /*}*/
    /*body:has(article) header.site-header .site-navigation menu li:first-child,*/
    /*body:has(>main>ul) header.site-header .site-navigation menu li:first-child {*/
    /*    padding-left: 1rem;*/
    /*}*/
    /*header.site-header .main-navigation menu li:last-child a,*/
    /*header.site-header .site-navigation .site-title *:last-child a*/
    /*{*/
    /*    padding-right: 0.5rem;*/
    /*}*/
    /*--------------------------------*/
    /* END SIDE MENU VERSION */
    /*--------------------------------*/

}


@keyframes fade-in {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-out {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    99% {
        transform: translateY(0);
        opacity: 0;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes blink-click {
    0% {
        background-color: var(--z-theme-color);
        color: var(--z-theme-background-color);
        /*opacity: 0.5;*/
    }

    12.5% {
        background-color: var(--z-theme-background-color);
        color: var(--z-theme-color);
        /*opacity: 0.5;*/
    }

    25% {
        background-color: var(--z-theme-color);
        color: var(--z-theme-background-color);
        /*opacity: 0.5;*/
    }

    37.5% {
        background-color: var(--z-theme-background-color);
        color: var(--z-theme-color);
        /*opacity: 0.5;*/
    }

    50% {
        background-color: var(--z-theme-color);
        color: var(--z-theme-background-color);
        /*opacity: 0.5;*/
    }

    62.5% {
        background-color: var(--z-theme-background-color);
        color: var(--z-theme-color);
        /*opacity: 0.5;*/
    }

    75% {
        background-color: var(--z-theme-color);
        color: var(--z-theme-background-color);
        /*opacity: 0.5;*/
    }

    87.5% {
        background-color: var(--z-theme-background-color);
        color: var(--z-theme-color);
        /*opacity: 0.5;*/
    }

    100% {
        /*background-color: var(--z-theme-color);*/
        /*color: var(--z-theme-background-color);*/
    }
}

@keyframes blink-click-alt {
    0% {
        background-color: var(--z-theme-background-color);
        color: var(--z-theme-color);
    }

    12.5% {
        background-color: var(--z-theme-color);
        color: var(--z-theme-background-color);
    }

    25% {
        background-color: var(--z-theme-background-color);
        color: var(--z-theme-color);
    }

    37.5% {
        background-color: var(--z-theme-color);
        color: var(--z-theme-background-color);
    }

    50% {
        background-color: var(--z-theme-background-color);
        color: var(--z-theme-color);
    }

    62.5% {
        background-color: var(--z-theme-color);
        color: var(--z-theme-background-color);
    }

    75% {
        background-color: var(--z-theme-background-color);
        color: var(--z-theme-color);
    }

    87.5% {
        background-color: var(--z-theme-color);
        color: var(--z-theme-background-color);
    }

    100% {
        /*background-color: var(--z-theme-background-color);*/
        /*color: var(--z-theme-color);*/
    }
}


@keyframes blur-and-gray-in {
    0% {
        transform: translateX(0);
        background-color: rgba(0,0,0,0);
        backdrop-filter: blur(0px) grayscale(0%);
    }
    60% {
        transform: translateX(0);
        background-color: var(--z-theme-background-color-fade);
    }
    100% {
        transform: translateX(0);
        background-color: var(--z-theme-background-color-fade);
        backdrop-filter: blur(10px) grayscale(100%);
    }
}

@keyframes blur-and-gray-out {

    0% {
        transform: translateX(0);
        background-color: var(--z-theme-background-color-fade);
        backdrop-filter: blur(10px) grayscale(100%);
    }
    60% {
        transform: translateX(0);
        background-color: rgba(0,0,0,0);
        backdrop-filter: blur(0px) grayscale(0%);
    }
    99% {
        transform: translateX(0);
        background-color: rgba(0,0,0,0);
        backdrop-filter: blur(0px) grayscale(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes glow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/*----------------------------------------*/


/* HELPERS */


/* CONTENT */
article {
    max-width: 100%;
    min-width: 100%;
    text-align: left;
    margin-bottom: 2rem;
}

article a {
    text-align: left;
    text-wrap: stable;
}

article ul {
    list-style-position: outside;
}


article h1, .list h1 {
    font-size: 2rem;
    --z-line-height: 1;
    line-height: var(--z-line-height);
    text-align: left;
}

article h2, .list h2 {
    --z-line-height: 1;
    line-height: var(--z-line-height);
    font-size: 1.8rem;
    text-align: left;
}

article h3, .list h3 {
    --z-line-height: 1;
    line-height: var(--z-line-height);
    font-size: 1.6rem;
    text-align: left;
}

article h4, .list h4 {
    --z-line-height: 1;
    line-height: var(--z-line-height);
    font-size: 1.4rem;
    text-align: left;
}

article h5, .list h5 {
    --z-line-height: 1;
    line-height: var(--z-line-height);
    font-size: 1.2rem;
    text-align: left;
}

article h2{
    margin-top:2rem;
    /*margin-bottom: 1rem;*/
}

article h2:after{
    display: block;
    width: 100%;
    height:0;
    margin-top: 0.5rem;
    content: " ";
    border-top: 2px dashed var(--z-theme-color-faded);
    /*background: radial-gradient(#777 .5px,transparent 1px) 0 0/3px 3px,var(--z-theme-background-color);*/
}


/* BLOCKS */

blockquote {
    padding: 1rem 1.5rem 1rem 2.5rem;
    margin: 1.5rem 0;
    background:
        linear-gradient(
            90deg,
            var(--z-retro-accent-tint),
            transparent 3rem
        ),
        var(--z-theme-background-accent);
    border: 1px dotted var(--z-theme-color);
    border-left: 0;
    border-radius: 0 4px 4px 0;
    position: relative;
    /*box-shadow: -4px 0 0 var(--z-retro-accent-glow-medium);*/
    font-family: 'Chakra Petch Regular', sans-serif;
    /*min-height: 5rem;*/
    display: flex;
    flex-direction: column;
    align-items: start;
    /*justify-content: start;*/
    text-align: justify;
}

/* Warning stripe on left */
blockquote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 100%;
    /*background: repeating-linear-gradient(*/
    /*    45deg,*/
    /*    transparent,*/
    /*    transparent 0.5rem,*/
    /*    var(--z-retro-accent-glow-light) 0.5rem,*/
    /*    var(--z-retro-accent-glow-light) 1rem*/
    /*);*/
    /*border-right: 1px dotted var(--z-theme-color);*/
    border-left: 1rem solid var(--z-theme-color);
}

/* Icon marker */
/*blockquote::after {*/
/*    content: "QUOTE";*/
/*    position: absolute;*/
/*    left: 1rem;*/
/*    top:50%;*/
/*    width: 2rem;*/
/*    text-align: center;*/
/*    transform: rotate(-90deg);*/
/*    transform-origin: center;*/
/*    font-size: 1.2rem;*/
/*    font-style: normal;*/
/*    color: var(--z-theme-color);*/
/*}*/

blockquote p {
    margin: 0.5rem 0;
}


/* SHORTCODES - PHOTO GALERY */

article figure{
    max-width: 100%;
}
article figure img {
    width:100%;
}

.photo-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    --img-height: 200px;
}

.photo-gallery.small {
    --img-height: 75px;
}

.photo-gallery figure {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin: 10px;
}

.photo-gallery figure figcaption {
    max-width: var(--img-height);
}

.photo-gallery figure img {
    max-height: var(--img-height);
}

.photo-gallery figure.monochrome img {
    filter: grayscale(100%);
}

.z-theme-dark .photo-gallery figure.invertible img {
    filter: grayscale(100%) invert(100%);
}

.z-theme-dark .photo-gallery figure.brightenable img {
    filter: grayscale(100%) brightness(200%);
}

/* SHORTCODES - illustration  */

.illustration {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.illustration > a {
    display: flex;
    justify-content: center;
}

.illustration img {
    max-width: 100%;

}

.illustration figcaption {
    width: 100%;
    text-align: center;
    font-size: 0.8em;
}


/* SHORTCODE MEDIA PLAYER */


.media-player {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 40px;
}

.media-player audio {
    width: 90%;
    margin-left: 5%;
    border-radius: 5px;
}

.media-player p {
    width: 90%;
    margin-left: 5%;
    margin-top: 2px;
    text-align: center;
}


/* LIST */

/* We remove the margin bottom on H1 with a subtitle beneath it*/
.list h2:has(+ .list-sub-title) {
    margin-bottom: 0;
}

section.list-sub-title {
    align-content: baseline;
    /*font-weight: bold;*/
    font-size: 1em;
    text-align: left;
}

section.list-sub-title .dates, section.list-sub-title time {
    text-wrap: nowrap;
    display: inline;
}

section.list-sub-title .divider-v {
    margin-left: 5px;
    margin-right: 5px;
}

section.list-sub-title .divider-v:last-child {
    display: none;
}

.list p:has(+ .more) {
    margin-bottom: 0;
}

.list .more {
    font-weight: bold;
    font-size: 0.9em;
}

.divider {
    content: ' ';
    max-width: calc(var(--z-max-content-width) / 3);
    min-width: calc(var(--z-min-content-width) / 3);
    background: var(--z-theme-color);
    height: 1px;
    margin-top: 20px;
}

/* CODE BLOCKS - Enhanced Retro Terminal */
pre:has(>code) {
    max-width: 100%;
    overflow: visible;
    /*width:100%;*/
    margin: 1.5rem 0;
    background: var(--z-theme-background-accent);
    border-top: 1px dotted var(--z-theme-color);
    border-bottom: 1px dotted var(--z-theme-color);
    border-right: 1px dotted var(--z-theme-color);
    /*border-left: 1rem solid var(--z-retro-accent);*/
    border-radius: 2px;
    /*box-shadow:*/
    /*    inset 0 0 20px var(--z-retro-inset-shadow),*/
    /*    0 0 15px var(--z-retro-accent-glow-light),*/
    /*    0 0 30px var(--z-retro-accent-glow-subtle);*/
    position: relative;
    /*padding-left: 1rem;*/
    /*margin-left:1rem;*/
    /*position:absolute;*/

}
pre:has(>code):before {
    position:absolute;
    /*top:0;*/
    /*left:-1rem;*/
    z-index: 20;
    content: " ";
    width: 1rem;
    /*height:fit-content;*/
    min-height: 100%;
    /*margin-left:-50%;*/
    /*transform: translateX(-100%);*/
    background: var(--z-theme-color);
}

/* Terminal prompt marker */
/*pre:has(>code)::before {*/
/*    content: ">";*/
/*    position: absolute;*/
/*    left: 0.3rem;*/
/*    top: 0.3rem;*/
/*    color: var(--z-retro-accent);*/
/*    opacity: 0.6;*/
/*    font-size: 0.8rem;*/
/*    text-shadow: 0 0 5px var(--z-retro-accent-glow-strong);*/
/*}*/

code {
    max-width: calc(100% - 1rem);
    /*width:100%;*/
    background-color: transparent;
    color: var(--z-theme-color);
}

/* Code inside pre blocks gets retro styling */
pre:has(>code) code {
    color: var(--z-retro-accent-light);
    /*text-shadow: 0 0 2px var(--z-retro-accent-glow-medium);*/
    /*width: calc(100% - 1rem);*/
    overflow: auto;
    display: block;
    padding: 1.2rem;
    padding-left: calc(1rem + 1.2rem);
}

/* Inline code gets different treatment */
article p code,
article li code {
    background: var(--z-theme-background-accent);
    padding: 0.1rem 0.4rem;
    border: 1px dotted var(--z-theme-color);
    border-radius: 2px;
    color: var(--z-theme-color);
}
hr {
    width: 100%;
    height:1rem;
    color: var(--z-theme-color);
    margin-top: 2rem;
    margin-bottom: 2rem;
    border: none;
    outline: none;
    background: radial-gradient(#777 .5px,transparent 1px) 0 0/3px 3px,var(--z-theme-background-color);
}

hr.filler{
    margin-top:0;
    margin-bottom: 0;
}




.oneliner {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


.article-view {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    gap: 0.3rem;
}