@font-face{
    src: url('../webfonts/Inter-Variable.woff2') format('woff2');
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light dark;
    scroll-behavior: smooth;

    --gap: 4rem;
    --gap: min(4rem, 4vw);

    --sans-font: "Inter", Arial, Helvetica, "Helvetica Neue", sans-serif;
    --standard-border-radius: .6em;
    --border-width: 1px;

    --bg: light-dark(#fff, #161617);
    --accent-bg: rgba(0, 0, 0, 0.05);
    --glass-bg: light-dark(rgba(255, 255, 255, .5), rgba(0, 0, 0, .3));
    --text: light-dark(#212121, #dcdcdc);
    --text-light: light-dark(#687072, #888);
    --border: rgba(120, 120, 120, 0.4);
    --accent: light-dark(#1059c8, #1178ea);
    --accent-hover: light-dark(#1266e2, #3391f8);
    --accent-text: var(--bg);
    --code: light-dark(#d81b60, #f06292);
    --preformatted: light-dark(#444, #ccc);
    --marked: #ffdd33;
    --disabled: light-dark(#efefef, #111);
}

body {
    grid-template-columns: 
        [page-start] minmax(0, 1fr)
        [full-start] minmax(1rem, var(--gap)) 
        [main-start] minmax(0, 45em) [main-end] 
        minmax(1rem, var(--gap)) [full-end]
        minmax(0, 1fr) [page-end];
      
    grid-template-rows: auto auto auto 1fr; /* First row fits content, second fills rest */
    
    grid-gap: var(--gap) 0;
    align-items: start;
    font-size: 1rem;
    min-height: 100dvh;
    /*padding-top: calc(3.5em + var(--gap));*/
    padding-top: 1rem;
    max-width: 1400px;
    margin: 0 auto;
    /*
    transition: opacity .25s ease;
    @starting-style {
        opacity: 0;
    }*/
}

body[data-color-scheme="dark"] {
    color-scheme: dark;
    & img,
    & video, 
    & .thumbnail {
        /*opacity: 0.8;*/
        filter: brightness(.9);
    }
    & [data-zoom-image='active'] {
        filter: brightness(1);
    }
}

body[data-color-scheme="light"] {
    color-scheme: light;
}

body > header {
    margin: 0;
    padding: 0;
    background-color: transparent;
    grid-column: main;
    border: none;
}

nav {
    grid-column: page;
    position: sticky;
    top: 1rem;
    padding: 0 1rem;
    overflow: visible;
    text-align: center;
    display: inline-flex;
    pointer-events: none;
    z-index: 850; /* between data-zoom-image states */

    & > * {
        padding: 1rem;
        background: var(--glass-bg);
        box-shadow: 1px 1px 0 0 rgba(255, 255, 255, .5) inset,
            -1px -1px 0 0 rgba(255, 255, 255, .1) inset;
        border: var(--border) 1px solid;
        border-radius: 2rem;
        backdrop-filter: blur(1em);
        overflow: hidden;
        pointer-events: auto;
    }

    & > a {
        height: 3.5rem;
        min-width: 3.5rem;
        & .fa {
            margin: 0;
            width: 1rem;
            height: 1rem;
            transition: all .2s ease-in-out;
        }
        &:hover .fa {
            transform: rotate(-360deg);
        }
        &#logo {
            padding: 0;
            border: none;
            background: none;
            box-shadow: none;
            backdrop-filter: none;
        }
        & svg {
            height: 3.5rem;
        }
    }

    & ul.flex {
        margin: 0 0 0 auto;
        position: absolute;
        right: 1rem;
        /*float: right;*/
        gap: 1.5em;
        transition: width .2s ease;
        &::before,
        &::after {
            display: none;
        }
    }

    & li {
        flex-shrink: 0 !important;
        list-style: none;
        cursor: pointer;
    }
    
    & li.open,
    & li.close {
        display: none;
        & .fa {
            margin-right: 0;
        }
    }

    & a:link,
    & a:visited {
        color: var(--text);
        text-wrap: nowrap;
    }
    & .fa {
        margin-right: .5rem;
    }
}

nav .collapsed {
    padding-right: 4rem;
    & li:not(.always) {
        display: none;
    }
    
    & li.open {
        display: inline-block;
        position: absolute;
        right: 1rem;
    }
}

#color-scheme-switch {
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    overflow: hidden;
    position: sticky;
    top: 100vw;
    -webkit-tap-highlight-color: transparent;
}

#color-scheme-switch > * {
    display: block;
    line-height: 1.5em;
    transition: top .2s ease;
    position: relative;
    left: 0;
}

#color-scheme-switch.auto > * {
    top: 0;
}

#color-scheme-switch.dark > * {
    top: -1.5em;
}

#color-scheme-switch.light > * {
    top: -3em;
}

main {
    align-self: start;
    padding: 0;
    grid-column: full;
    display: grid;
    grid-template-columns: subgrid;
    gap: 2em 0;
}

main > * {
    grid-column: main;
    margin: 0;
}

main .full {
    grid-column: full;
}

body > footer {
    align-self: end;
    grid-column: main;
    padding: var(--gap) 0;
    margin: 0;
}

article {
    /*position: relative;*/
    /*top: 10em;*/
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    /*border-bottom: var(--border) 1px solid;*/
    /*transform: scale(.7);*/
    & small,
    & p {
        color: var(--text-light);
    }
    & p {
        margin-top: .5rem;
    }
    & h2 {
        font-size: 1.4rem;
        margin-top: 1em;
        margin-bottom: 1rem;
    }
}

article:last-of-type {
    border: none;
}

article > *:last-child {
    /*margin-bottom: 0;*/
}

article .thumbnail {
    aspect-ratio: 16 / 9;
    border-radius: var(--standard-border-radius);
    background-size: cover;
    background-position: center center;
    box-shadow: 0 0 var(--gap) rgba(0, 0, 0, .1);
}

.reveal {
    opacity: 0;
    transition: all .4s ease;
}

.reveal.active {
    top: 0;
    opacity: 1;
}

.blocklink-area {
    position: relative;
}

.blocklink::after {
  display: block;
  content: "";
  position:absolute;  
  top:0;  
  left: 0;  
  width:100%;  
  height:100%;  
  z-index: 1;  

}

.flex {
    display: flex;
    flex-flow: row nowrap;
    gap: var(--gap) calc(var(--gap) / 2);
}

.flex.wrap {
    flex-wrap: wrap;
}

.flex > * {
    flex: 1 0 auto;
    /*max-width: 100%;*/
}

.flex .flex-hidden, .flex::before, .flex::after {
    content: "";
    flex: 1 0 270px;
    flex-basis: 270px;
    order: 999;
}

.flex.equal > * {
    flex: 1 1 0;
}

.flex-1 > *,
.flex > .flex-1-1 {
    flex-basis: 100%;
}

.flex-2 > *,
.flex > .flex-1-2 {
    flex-basis: calc( 50% - var(--gap) / 2 );
}

.flex-3 > *,
.flex > .flex-1-3 {
    flex-basis: calc( 33% - 2 * var(--gap) / 3 );
}

.center {
    text-align: center;
    margin: 0 auto;
}

.right {
    float: right;
}

.green {
    color: green;
}

.red {
    color: #c60001;
}

.gray {
    color: gray;
}

.block {
    display: block;
}

.hidden {
    display: none;
}

textarea, select, input, button, .button, .trumbowyg, label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
    margin-bottom: 1rem;
    /*padding: 1rem;*/
}

input[type="checkbox"], input[type="radio"] {
    margin: .3rem;
}

input[type="checkbox"] {
    border-radius: .3em;
}

input[type="text"], 
input[type="password"], 
input[type="email"] {
    min-width: min(25em, 100%);
    width: auto;
}

fieldset, dialog {
    margin-bottom: var(--gap);
}

.dropfile-thumbnails {
    display: flex;
    gap: 1rem;

    & > div {
        flex: 0 0 3.5rem;
        aspect-ratio: 1;
        margin-bottom: 1rem;
        background-size: cover;
        outline: var(--border) 1px solid;
        border-radius: var(--standard-border-radius);
        cursor: pointer;
        position: relative;
        overflow: hidden;

        &:before,
        &:after {
            display: grid;
            place-items: center;
            font-family: 'FontAwesome';
            font-size: 1.2em;
            position: absolute;
            background: var(--bg);
            color: var(--text);
            width: 100%;
            height: 100%;
            transition: opacity .2s ease;
        }

        &:not([style*="background-image"]):before {
            content: "\f574";
        }

        &:after {
            content: "\f1f8";
            opacity: 0;
        }

        &:hover:after {
            opacity: 1;
        }
    }
}

.dropfile {
    position: relative;
    overflow: hidden;
    border: var(--border) 2px dashed;
    border-radius: 0.5em;
    padding: 2em 0;
    text-align: center;
    margin-bottom: 1em;
    cursor: pointer;

    &  > input {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        text-align: right;
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }
}


.cf-turnstile {
    width: min(25em, 100%);
    margin-bottom: .5rem;
}

.no-decoration, 
.no-decoration:hover {
    text-decoration: none !important;
}

.no-color {
    color: inherit !important;
}

p, time {
    /*margin: 1em 0;*/
}

a, a:visited {
    text-decoration: none;
    &:hover {
        text-decoration-thickness: 1px !important;
        text-underline-offset: 2px;
        text-decoration: underline;
    }
}

a[target="_blank"]::after {
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: .7em;
    content: "\f062";
    margin: 0 .3em;
    transform: rotate(45deg);
}

a.button:hover {
    text-decoration: none;
}

h1, h2, h3, h4 {
    font-weight: 400;
    margin: .5em 0 .2em;
    & a:link, & a:visited, & a:hover {
        color: var(--text);
        text-decoration: none !important;
    }
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

tr:nth-child(2n) {
    background-color: transparent;
}

tr:nth-child(2n+1) td {
    background-color: var(--accent-bg);
}

th, td {
    border: none;
    border-top: var(--border) 1px solid;
    border-left: var(--border) 1px solid;
}

tr:last-child > * {
    border-bottom: var(--border) 1px solid;
}

td:last-child, th:last-child {
    border-right: var(--border) 1px solid;
}

tr:first-child > *:first-child {
    border-top-left-radius: var(--standard-border-radius);
}

tr:first-child > *:last-child {
    border-top-right-radius: var(--standard-border-radius);
}

tr:last-child > *:first-child {
    border-bottom-left-radius: var(--standard-border-radius);
}

tr:last-child > *:last-child {
    border-bottom-right-radius: var(--standard-border-radius);
}

img {
    max-width: 100%;
    max-height: 100vh;
}

img.center {
    display: block;
}

img.ultrawide {
    box-shadow: 0 0 var(--gap) rgba(0, 0, 0, .07);
}

main > img.ultrawide,
main > p:has(img.ultrawide),
main > pre:has(code) {
    grid-column: full;
    /*margin: 1em auto;*/
    margin-left: auto;
    margin-right: auto;
}

iframe {
    grid-column: full;
    border-radius: var(--standard-border-radius);
    aspect-ratio: 16 / 9;
    height: 100%;
    width: 100%;
}

pre:has(code) {
    width: 100%;
    position: relative;
}

pre {
    padding: 0;
    font-size: .9rem;
    border: none;
}

pre code {
    padding: var(--gap) !important;
}

.autocopy-btn {
    position: absolute;
    right: 0;
    padding: 1em;
    cursor: pointer;
    color: var(--text-light);
}

.tooltip {
    position: absolute;
    padding: 1rem;
    background: var(--glass-bg);
    box-shadow: 1px 1px 0 0 rgba(255, 255, 255, .5) inset,
        -1px -1px 0 0 rgba(255, 255, 255, .1) inset;
    border: var(--border) 1px solid;
    border-radius: 2rem;
    border-top-right-radius: 0;
    backdrop-filter: blur(1em);
    opacity: 1;
    transition: opacity .2s ease;
    @starting-style {
        opacity: 0;
    }
}

[data-zoom-backdrop] {
    background-color: var(--bg);
}

[data-zoom-image] {
    transition: transform .4s ease,
                filter .4s ease;
}

[data-zoom-image='active'] {
    border-radius: 0;
}

@media screen and (max-width: 820px) {
    :root {
        --gap: 1rem;
    }

    article {
        min-width: 250px;
        margin: var(--gap) 0;
    }

    article > * {
        margin-left: var(--gap);
        margin-right: var(--gap);
    }
}

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

    body {
        /*grid-gap: 0;*/
    }

    body > header,
    main,
    footer {
        padding: var(--gap) 0;
        margin: 0;
    }

    nav a#logo {
        width: 3.5em;
    }

    nav ul.flex {
        flex-flow: column;
        /*gap: 1.5em;*/
        padding-right: 4rem;
        & li {
            /*flex-basis: 100%;*/
            text-align: left;
        }
        & li.close {
            display: inline-block;
            position: absolute;
            right: 1rem;
        }
    }

    nav .flex.collapsed li.close {
        display: none;
    }

    article .thumbnail {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
    }

    .flex {
        flex-wrap: wrap;
        /*gap: calc(var(--gap) * 2) var(--gap);*/
    }
    
    .hide-s {
        display: none;
    }

    img.ultrawide, video, pre:has(code), iframe {
        grid-column: full;
        border-radius: 0;
    }
    .autocopy-btn {
        display: block;
        position: relative;
        text-align: right;
    }

}


@view-transition {
  navigation: auto;
}

@keyframes move-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes move-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

::view-transition-old(root) {
  animation: 0.25s ease move-out;
}

::view-transition-new(root) {
  animation: 0.25s ease move-in;
}