@font-face {
        font-family: "Noto Sans Mono";
        src: url('/font/noto-sans-mono.woff2'), format('woff2');
}

@font-face {
        font-family: "Noto Sans";
        src: url('/font/noto-sans.woff2'), format('woff2');
}

:root {
        --dz:  0rem;
        --dxs: 0.25rem;
        --ds:  0.5rem;
        --dm:  0.75rem;
        --dl:  1.25rem;
        --dxl: 2rem;
        --dxxl: 3.25rem;

        --oracleWidth: 18;
        --tileSize: 100;

        --dMainPad: 3%;

        --driftC1: #00ffff;
        --driftC2: #ff00ff;
}

@property --driftX {
        syntax: '<number>';
        initial-value: 0;
        inherits: false;
}

@keyframes xDrift {
        0% {--driftX: -.15};
        100% {--driftX: .15};
}

@property --driftY {
        syntax: '<number>';
        initial-value: 0;
        inherits: false;
}

@keyframes yDrift {
        0% {--driftY: -.15};
        100% {--driftY: .15};
}

@keyframes move-right {
        0% { transform: translateX(0%);}
        100% { transform: translateX(1%);}
}

/* Use move-right before alternating swing */
@keyframes swing {
        0% { transform: translateX(1%);}
        100% { transform: translateX(-1%);}
}
@keyframes swing-tilt {
        0% {transform: rotate(0deg);}
        25% {transform: rotate(1deg);}
        50% {transform: rotate(0deg);}
        75% {transform: rotate(-1deg);}
        100% {transform: rotate(0deg);}
}

@keyframes flip {
        0% {transform: rotate(0deg);}
        25% {transform: rotate(90deg);}
        50% {transform: rotate(180deg);}
        75% {transform: rotate(270deg);}
        100% {transform: rotate(360deg);}
}

@keyframes squishy {
        0% {transform: scale(1, 1)}
        33% {transform: scale(0.99, 1.01)}
        66% {transform: scale(1.01, 0.99)}
        100% {transform: scale(1, 1)}
}

a {
        color: var(--hl1);
        &:hover {
                color: var(--hl2);
        }
}

blockquote {
        font-style: italic;
}

body {
        margin: 0px;
}

em {
        text-decoration: underline;
        text-decoration-style: dashed;
}

figure {
        display: flex;
        justify-content: center;
        position: relative;
        &:hover figcaption {
                opacity: 1;
        }
}

figcaption {
        text-align: center;
        background-color: color-mix(in srgb, var(--bg1) 70%, transparent);
        -webkit-backdrop-filter: blur(var(--dxs));
        backdrop-filter: blur(var(--dxs));
        padding: var(--dm);
        position: absolute;
        bottom: 0;
        margin: var(--dm);
        border-radius: var(--ds);
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
}

h1 {
        margin-top: var(--dz);
        margin-bottom: var(--dm);
}


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

h3 {
        margin-top: var(--dl);
        margin-bottom: var(--dm);
}

header {
        font-family: 'Noto Sans Mono', monospace;
        font-weight: bold;
        margin-bottom: var(--dxl);
        .bar {
                border: solid;
                border-width: 2px 0px 2px 0px;
                padding-top: var(--ds);
                padding-bottom: var(--ds);
        }
        #title {
                font-size: var(--dxl);
                line-height: 100%;
        }
}

footer {
        margin-top: var(--dxl);
        .bar {
                border: solid;
                border-width: 2px 0px 0px 0px;
                padding-top: var(--ds);
                font-size: smaller;
                font-family: 'Noto Sans', sans-serif;
        }
}

hr {
        border: dashed 1px;
}

html {
        background-color: var(--bg1);
        color: var(--fg2);
        font-family: 'Noto Sans', sans-serif;
        line-height: 120%;
        margin-left:auto;
        margin-right:auto;
        text-align: left;
        font-size: 16px;
}

img {
        max-width: 100%;
        max-height: 100%;
        &:hover {
                animation: 0.2s squishy 1;
        }
}

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

#background, #shibbles {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
}

#background {
        z-index: -1;
}

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

#content {
        background-color: color-mix(in srgb, var(--bg1) var(--bgt), transparent);
        -webkit-backdrop-filter: blur(var(--ds));
        backdrop-filter: blur(var(--ds));
        color: var(--fg);
        width: 44rem;
        max-width: calc(100% - (2*var(--dMainPad)));
        margin-left:auto;
        margin-right:auto;
        padding: var(--dxxl) var(--dMainPad) var(--ds) var(--dMainPad);
}

#shibbles {
        pointer-events: none;
}


.artInfo {
        margin-top: var(--ds);
        display: flex;
        justify-content: space-between;
        font-size: smaller;
}

.author p {
        margin-top: var(--dz);
        text-align: right;
        &:before {
                /* Em-dash */
                content: "\2014";
        }
}

.bar {
        display: flex;
        justify-content: space-between;
}

.chromatic {
        animation:
                3s xDrift infinite alternate,
                7s yDrift infinite alternate;
        text-shadow:
                calc(var(--driftX) * 1rem) calc(0px - var(--driftY) * 1rem) 1px var(--driftC1),
                calc(0px - var(--driftX) * 1rem) calc(var(--driftY) * 1rem) 1px var(--driftC2);
}

.flipTile {
        transform: scale(-1, 1);
}

.right {
        text-align: right;
        white-space: nowrap;
}

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

        p {
                padding-left: var(--dl);
                margin: var(--dz);
        }
}

.swing {
        animation:
                5s ease-in-out move-right,
                10s ease-in-out 5s swing infinite alternate;
}

.swing-tilt {
        animation: ease-in-out 20s swing-tilt infinite;
}

.tile {
        width: calc(var(--tileSize) * 1px);
        height: calc(var(--tileSize) * 1px);
        position: absolute;
}

/* 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: 450px) {
        html {
                font-size: 12px;
        }
}

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