@import "/fonts/fonts.css";

:root {
    --c0: #000000;
    --c1: #626262;
    --c2: #898989;
    --c3: #adadad;
    --c4: #ffffff;
    --c5: #9f4e44;
    --c6: #cb7e75;
    --c7: #6d5412;
    --c8: #a1683c;
    --c9: #c9d487;
    --ca: #9ae29b;
    --cb: #5cab5e;
    --cc: #6abfc6;
    --cd: #887ecb;
    --ce: #50459b;
    --cf: #a057a3;

    --font-normal: "Galmuri11", serif;
    --font-mono: "GalmuriMono9", monospace;
    --font-pixel: "Anvil";
    --font-pixel-alt: "Anvil Alternate";
    --font-pixel-cur: "Noted";
    --font-pixel-sml: "ZX Sierra Quest";

    --font-s-mono: 20px;
    --font-s-s: 12px;
    --font-s-n: calc(var(--font-s-s) * 2);
    --font-s-p-n: calc(10px * 2);
    --font-s-p-l: calc(10px * 2);
    --font-s-p-xl: calc(10px * 3);
    --font-s-p-xxl:  calc(10px * 4);

    --highlight-border-radius: 4px;
    --border-radius: 4px;
    --yellow-highlight: var(--c9);

    --background: var(--c3);
    --background-main: var(--c3);
    --background-alt: var(--c2);
    --background-inputs: var(--c1);
    --text: var(--c0);
    --border: var(--c1);
    --links: var(--ce);
    --focus-highlight: var(--cf);
    --shadow-color: var(--c1);
    --shadow-box: 2px 2px 0px var(--border), -2px -2px 0px var(--border);
    --table-highlight: var(--c4);

    --flicker-a: #d887f0;
    --flicker-b: #81f4b1;
}

@media (prefers-color-scheme: dark) {
    :root {
    }
}

body {
    font-family: var(--font-normal);
    font-size: var(--font-s-n);
    line-height: 1.6;
    background-color: var(--background);
}

pre,code {
    font-family: var(--font-mono);
    font-size: var(--font-s-p-n);
}

pre {
    border-top: 1px solid var(--background-alt);
    border-bottom: 1px solid var(--background-alt);
}

h1 {
    font-family: var(--font-pixel);
}

ul {
    list-style: square;
}

// Classes
.pixel {
    font-family: var(--font-pixel);
    font-size: var(--font-s-p-n);
}
.pixel.alt {
    font-family: var(--font-pixel-alt);
}

article>* {
    max-width: 40em;
}
article img {
    max-width: 39em;
    image-rendering: pixelated;
    border: 4px solid var(--border);
    border-radius: 0px;
    outline: 2px solid var(--border);
    outline-offset: 2px;
    width: 97%;
}
article ul {
    list-style: square;
}
article p {
    line-height: 1.8em;
}
article nav {
    font-size: var(--font-s-s);
}
article h1:first-child {
    margin-bottom: 1em;
  animation: textflicker 0.01s infinite;
}

body {
    background-image: gradient
}

// 2 columns flex body
main {
    display: flex;
    flex-wrap: wrap;
}
main aside {
    padding-left: 8px;
    flex-basis: 320px; // minimum sidebar size
    flex-grow: 1;
}
main aside nav.menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
main aside section {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: 50%;
    padding: 0 1em;
}

/*        */
/* HEADER */
/*        */
nav.breadcrumbs ul {
    list-style-type: none;
    text-align: center;
    margin-top: 1.0rem;
    padding-inline-start: 0;
}
nav.breadcrumbs ul>li {
    font-size: 1.3em;
    font-family: var(--font-pixel-alt);
    font-smooth: never;
    display: inline;
    margin: 0 1.2rem;
}
nav.breadcrumbs ul>li>a {
    text-decoration: none;
    color: var(--text);
}
nav.breadcrumbs ul>li>a::before {
    content: ">";
    opacity: 0;
}

nav.breadcrumbs ul>li>a:hover::before {
    opacity: 1;
}

nav.tags a {
    font-variant: all-small-caps;
    font-style: italic;
    font-weight: bold;
}

.post-meta {
    font-family: var(--font-pixel-cur);
    font-size: var(--font-p-s);
}
.post-meta time::after {
    content: "~";
}
.post-meta time {
    font-family: var(--font-pixel-cur);
    font-size: var(--font-p-s);
}

.cursor::after {
    font-smooth: never;
    font-family: var(--font-normal);
    content: "█";
    // content: "▄";
    margin-left: 0;
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

.tag-list {
    font-size: var(--font-s-ss);
    font-family: var(--font-pixel-cur);
    margin-top: 1em;
    margin-bottom: 1em;
    border-bottom: 1px solid var(--background-main);
}

.tag-list a::before {
    content: "#";
    opacity: 0;
}
.tag-list a:hover::before {
    opacity:1;
}

.reaction-button {
    backgound-color: #a2a2ac;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    outline: 1px solid black;
    padding-left: 0.3em;
    padding-right: 0.3em;
}
.reaction-button:active {
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
}

.preview {
    border-bottom: 2px solid var(--background-alt);
}
.preview time {
    font-size: var(--font-s-ss);
}
.preview  &>a {
    font-family: var(--font-pixel);
    font-size: var(--font-s-l);
}
.preview  .tag-list a{
    font-size: var(--font-s-ss);
}

.scanlines::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.25) 50%),
        linear-gradient(90deg,
        rgba(255, 0, 0, 0.06),
        rgba(0, 255, 0, 0.02),
        rgba(0, 0, 255, 0.06));
    background-size: auto, auto;
    z-index: 2;
    background-size: 640px 2px, 3px 512px;
    pointer-events: none;
    backdrop-filter: blur(0.04rem);
}

.signature {
    font-family: var(--font-pixel-cur);
}

.no-select {
  user-select: none;
  -khtml-user-select: none;
}

//
// Animations
//
@keyframes textflicker {
from {
    text-shadow: 1px -0.5px 0 var(--flicker-a), -1px -0.5px 0 var(--flicker-b);
}
to {
    text-shadow: 0px 0.5px 0px var(--flicker-a), 0px -0.5px 0px var(--flicker-b);
}
}

@keyframes blink-animation {
to {
    visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
    visibility: hidden;
}
}