/* This css used to be simple once, then I got ideas */

@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100;
  src: url('/font/noto_sans_100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/font/noto_sans_regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: url('/font/noto_sans_italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/font/noto_sans_500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/font/noto_sans_700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 900;
  src: url('/font/noto_sans_900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap;
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/font/noto_sans_mono_regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap;
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 700;
  src: url('/font/noto_sans_mono_700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap;
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 900;
  src: url('/font/noto_sans_mono_900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
        /* Fibonacci spacings */
        --dxs:  0.25rem;
        --ds:   0.50rem;
        --dm:   0.75rem;
        --dl:   1.25rem;
        --dxl:  2.00rem;
        --dxxl: 3.25rem;

        --bold: 700;

        /* Placeholder colors for chromatic drift, updated via JS */
        --driftC1: #00ffff;
        --driftC2: #ff00ff;

        /* Unit: px, read by JS */
        --tileSize: 100;

        /* Randomized via JS */
        --bg-img: url("/img/bg2.svg");

        --fontMono: 'Noto Sans Mono', monospace;
        --fontSans: 'Noto Sans', sans-serif;
}

* {
        transition: color 0.5s linear;
        transition: background-color 0.5s linear;
}

html, body {
        margin: 0px;
        padding: 0px;
        height: 100%;
}

body {
        font-family: var(--fontSans);
        font-weight: 400;
        background-color: var(--bg2);

        /* All actual content, reduced width & centered */
        #content {
                --dMainPad: 3%;
                margin: 0px auto;
                padding: var(--dxl) var(--dMainPad) var(--ds) var(--dMainPad);
                max-width: calc(100% - (2*var(--dMainPad)));
                min-height: calc(100% - var(--dxl) - var(--ds));
                width: 44rem;
                background-color: color-mix(in srgb, var(--bg1) var(--bgt), transparent);
                -webkit-backdrop-filter: blur(var(--dxs));
                backdrop-filter: blur(var(--dxs));
                color: var(--fg);
                /* We use flex for when the content doesn't fill the screen so the footer's still at the bottom */
                display: flex;
                flex-direction: column;

                a {
                        color: var(--hl1);
                        /* Block to enable animation */
                        display: inline-block;

                        &:visited {
                                color: var(--hl2);
                        }
                        &:hover {
                                color: var(--fg);
                                animation: 0.2s megaSquishy 1;
                        }
                }

                a[rel~="external"]:after {
                        content: " ↗";
                }

        }

        /* Both cover the entire screen */
        #background, #shibbles {
                position: fixed;
                top: 0px;
                left: 0px;
                width: 100vw;
                height: 100vh;
        }

        #background {
                background-image: var(--bg-img);
        }

        .tile {
                /* Tiles are added and randomly mirrored via JS */
                background-color: var(--bg1);
                -webkit-mask-image: var(--bg-img);
                -mask-image: var(--bg-img);
                /* On some zoom odd levels (eg. 110%)
                 * there are sub-pixel gaps between some tiles
                 * due to rounding.
                 */
                width: calc(var(--tileSize) * 1px);
                height: calc(var(--tileSize) * 1px);
                position: absolute;
                transform: rotate(0deg);
        }

        /* The transparent shibble layer is on top of everything else */
        #shibbles {
                pointer-events: none;
        }
}

#title {
        margin-top: 0;
        margin-bottom: var(--dm);
        font-family: var(--fontMono);
        font-weight: var(--bold);
        font-size: var(--dxl);
        line-height: 100%;
}

/* Navigation bar between title and main */
#navigation {
        font-family: var(--fontMono);
        font-weight: var(--bold);
        border: solid;
        border-width: 2px 0px 2px 0px;
        padding-top: var(--ds);
        padding-bottom: var(--ds);
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr min-content;
        grid-auto-flow: column;
        justify-content: space-between;
        /* We need some additional space for the buttons */
        line-height: 1.1rem;

        /* Useful for other themes */
        #TOC {
                display:none;
        }

        .submenu ul {
                z-index: 1;
                --borderWidth: 2px;
                display: block;
                position: absolute;
                left: 50%;
                border: solid  var(--fg);
                border-width: 0px var(--borderWidth);
                border-radius: var(--ds);
                padding: var(--ds) var(--dm);
                background-color: color-mix(in srgb, var(--bg1) 50%, transparent);
                -webkit-backdrop-filter: blur(var(--dxs));
                backdrop-filter: blur(var(--dxs));
                list-style-type: none;
                text-align: center;

                /* These change when the submenu is opened */
                transition: transform 0.5s;
                transform: scaleX(0) translateX(-50%);
                transform-origin: left;
        }

        /* Button focus will open the ul */
        .submenu ul:hover, .submenu:focus-within ul {
                transform: scaleX(1) translateX(-50%);
        }

        .subMenuName {
                /* Buttons are messy */
                display:inline;
                box-sizing: content-box;
                line-height: inherit;
                background: none;
                border: none;
                padding: 0;
                color: var(--hl1);
                font-size: 1rem;
                font-family: var(--fontMono);
                font-weight: var(--bold);
                text-decoration: underline;
                cursor: pointer;

                &:hover {
                        color: var(--fg);
                        animation: 0.2s megaSquishy 1;
                }

                &:focus {
                        color: var(--fg);
                }
        }

        #settings .submenu ul {
                a {
                        color: var(--hl2);
                        &:hover {
                                color: var(--fg);
                        }
                }
                .selected {
                        color: var(--hl1);
                }
        }

        #mainNav > ul, #tagNav > ul, #settings {
                /* horizontal list */
                display:inline;
                margin: 0;
                padding: 0;
                white-space: nowrap;

                > li, .submenu {
                        /* inline-block serves as reference for sub-menus */
                        display: inline-block;
                        position: relative;
                }
        }

        #mainNav > ul, #tagNav > ul {
                > li:before {
                        content: "/ ";
                }
                > li:first-of-type:before {
                        content: "";
                }
        }

        #feed {
                white-space: nowrap;
                &:after {
                        /* I'm hungry! */
                        content: "me a";
                }
        }

        #settings:after {
                content: "!";
        }

        #mainNav {
                &:before {
                        content: "main:// ";
                }
        }

        #tagNav {
                display: inline;
                &:before {
                        content: "tags:// ";
                }
        }

        #date:before {
                content: "// ";
        }

        #settings, #feed {
                text-align: right;
        }
}

/* The actual article */
main {
        flex: 1;
        padding-top: var(--dxl);

        &:has(#noise) {
                display: flex;
        }

        > :first-child {
                margin-top: 0px;
        }

        h2 {
                margin-top: var(--dxxl);
                margin-bottom: var(--dm);
        }

        h3, h4, h5, h6 {
                margin-top: var(--dxl);
                margin-bottom: var(--dm);
        }

        h4, h5, h6 {
                font-size: 1rem;
        }

        h5, h6 {
                font-weight: 400;
                text-decoration: underline dashed;
        }

        /* Immediate sub-sections */
        h2 + h3, h3 + h4, h4 + h5, h5 + h6 {
                margin-top: 0;
        }

        h2:has(+h3), h3:has(+h4), h4:has(+h5), h5:has(+h6) {
                margin-bottom: var(--ds);
        }

        p {
                margin-top: var(--dm);
                margin-bottom: var(--dm);

                &:first-of-type {
                        margin-top: 0px;
                }
        }

        code {
                font-family: var(--fontMono);
                line-height: 100%;

                .kw, .cf, .co {
                        font-style: italic;
                }

                .st, .co {
                        color: var(--hl1);
                }
        }

        ul, ol {
                padding-left: var(--dm);
                list-style-position: inside;
        }

        math * {
                /* inline equations mess with line height, FF/Chrome are different */
                @-moz-document url-prefix() {
                        height: 1em;
                }

                @supports (-webkit-app-region: inherit) {
                        max-height: 1em;
                }
        }

        blockquote {
                display: flex;
                margin-left: 0px;
                margin-right: 0px;
                border-radius: var(--ds);
                border: 1px dashed var(--hl2);
                padding: var(--ds);
                font-style: italic;

                p {
                        margin: 0px;
                }
        }

        /* Optional author below blockquotes */
        .author {
                /* Compensate for p's bottom margin */
                position: relative;
                top: calc(0px - var(--dm));
                color: var(--hl2);
                font-weight: var(--bold);

                p {
                        margin-top: 0;
                        text-align: right;
                        &:before {
                                /* Em-dash */
                                content: "\2014";
                        }
                }
        }

        em:not(.math *) {
                text-decoration: underline;
                text-decoration-style: dashed;
        }

        /* GnuPlot output needs some styles overwritten */
        svg:has(#gnuplot_canvas) {
                height: unset;
                width: 100% !important;
                background-color: var(--bg1);
                /* Hide harsh background edges */
                position: relative;
                z-index: -1;
                box-shadow: 0 0 2rem 2rem var(--bg1);

                tspan {
                        font-family: var(--fontSans) !important;
                }
        }

        figure:not(:has(#orbit)):not(:has(#noise)) {
                justify-content: center;
                display: inline;
                /* Reference for figcaption */
                position: relative;
                width: 40%;
                transition: width 0.5s;
                margin-left: 0px;
                margin-right: 0px;
                padding: 0px;
                /* Needed for drop-shadow hack of .deco images */
                overflow: clip;

                &:nth-of-type(2n) {
                        float: left;
                        margin-right: var(--dl);
                        transform: rotate(-1deg);
                }

                &:nth-of-type(2n+1) {
                        float: right;
                        margin-left: var(--dl);
                        transform: rotate(1deg);
                }

                &:hover {
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        transform: rotate(0deg);
                        margin: var(--dm) 0px var(--dm) 0px;
                }

                img {
                        min-width: 100%;
                        max-width: 100%;
                }

                .deco {
                        /* Decorational images are stylised */
                        /* If it's stupid, but it works, it's still stupid... but it works! */
                        filter: drop-shadow(-1000rem 0px 0 var(--hl2));
                        transform: translateX(1000rem);
                        border-radius: var(--dl);
                }

                &:has(.deco) {
                        pointer-events: none;
                        figcaption {
                                /* Hide captions */
                                display: none;
                        }

                        &:has(.captioned) figcaption {
                                /* Unless we want them */
                                color: var(--hl2);
                                display: block;
                        }
                }

                figcaption {
                        font-weight: var(--bold);
                        font-style: italic;
                        font-size: smaller;
                        text-align: center;
                }

        }
        figure:has(#noise) {
                margin: 0px;
                padding: 0px;
                width: 100%;

                canvas {
                        --bWidth: 2px;
                        width: calc(100% - var(--bWidth) * 2);
                        height: 100%;
                        border: var(--bWidth) solid var(--hl1);
                        border-radius: var(--ds);
                }

                figcaption {
                        display: none;
                }
        }

        figure:has(#orbit) {
                float: right;
                width: 40%;
                height: 20rem;
                position: relative;
                margin-left: var(--dl);
                margin-right: 0px;
                border: 2px solid var(--hl1);
                border-radius: var(--dm);
                background-color: var(--bg1);

                figcaption {
                        color: var(--hl1);
                        font-family: var(--fontMono);
                        position: absolute;
                        top: var(--ds);
                        left: var(--dm);
                        font-size: smaller;
                }

                #orbit {
                        height: 100%;
                        width: 100%;
                }
        }

        strong, b {
                font-weight: var(--bold);
        }

        strong {
                animation:
                        3s xDrift infinite alternate linear,
                        7s yDrift infinite alternate linear;
                text-shadow:
                        calc(var(--driftX) * 1rem) calc(0px - var(--driftY) * 1rem) 0.08rem var(--driftC1),
                        calc(0px - var(--driftX) * 1rem) calc(var(--driftY) * 1rem) 0.08rem var(--driftC2);
                &:hover {
                        text-shadow: none;
                }
        }

        hr {
                clear: both;
                /* We use padding instead margin because margin ignores floats */
                padding-top: var(--dxl);
                border: 0px;
                border-bottom: dashed 1px;
                margin-bottom: var(--dxl);
        }

        .warn {
                animation: blink 1.5s linear infinite;
        }

        figure {
                margin-top: var(--ds);
                margin-bottom: var(--ds);
        }

        h2 + figure, h3 + figure, h4 + figure, h5 + figure, h6 + figure {
                /* Flex hack */
                margin-top: 0px;
        }

        table {
                width: 100%;
        }

        tr:hover {
                color: var(--hl1);
                border: 1px solid;
        }

        pre {
                overflow-x: auto;
                border-radius: var(--ds);
                border: 1px dashed var(--hl2);
                padding: var(--ds);
        }

        /* Article summaries are slightly condensed */
        figure:has(+ .summary) {
                pointer-events: none;
                figcaption {
                        display: none;
                }
        }

        .summary {

                h2 {
                        margin-bottom: var(--ds);
                        margin-top: var(--ds);
                        font-size: larger;
                }

                p {
                        margin: 0;

                }


                .artInfo {
                        margin-top: var(--ds);
                        font-size: smaller;
                }
        }
}

footer {
        display: flex;
        justify-content: space-between;
        margin-top: var(--dxl);
        border: solid;
        border-width: 2px 0px 0px 0px;
        padding-top: var(--ds);
        font-size: smaller;
        font-family: var(--fontSans);
}


/* The following media queries are dedicated
 * to my good friend Benjamin,
 * who told me to get a 600 Euro/year subscription
 * to some AI web-builder, so my
 * layout could be "responsive".
 */

@media only screen and (max-width: 600px) {
        html {
                font-size: 12px;
        }
}

@media only screen and (max-width: 450px) {
        html {
                font-size: 8px;
        }
}