/* fonts upright */

br.nocss,
div.nocss,
span.nocss,
h3.nocss,
hr.nocss,
a.nocss {
    display: none;
}

b.nocss {
    font-weight: inherit;
}

i.nocss {
    font-style: inherit;
}

@font-face {
    font-family: "iosevka";
    font-weight: 700;
    font-style: normal;
    src: url("https://www.31a05b.net/a/fonts/IosevkaCk-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "iosevka";
    font-weight: 900;
    font-style: normal;
    src: url("https://www.31a05b.net/a/fonts/IosevkaCk-Heavy.woff2") format("woff2");
}

@font-face {
    font-family: "iosevka";
    font-weight: 400;
    font-style: normal;
    src: url("https://www.31a05b.net/a/fonts/IosevkaCk-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "iosevka";
    font-weight: 200;
    font-style: normal;
    src: url("https://www.31a05b.net/a/fonts/IosevkaCk-ExtraLight.woff2") format("woff2");
}

/* fonts italic */


@font-face {
    font-family: "iosevka";
    font-weight: 400;
    font-style: italic;
    src: url("https://www.31a05b.net/a/fonts/IosevkaCk-Italic.woff2") format("woff2");
}

@font-face {
    font-family: "iosevka";
    font-weight: 700;
    font-style: italic;
    src: url("https://www.31a05b.net/a/fonts/IosevkaCk-BoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: "iosevka";
    font-weight: 200;
    font-style: italic;
    src: url("https://www.31a05b.net/a/fonts/IosevkaCk-ExtraLightItalic.woff2") format("woff2");
}

/* actual CSS */

* {
    /* this should be the fucking default */
    box-sizing: border-box;
}

:root,
[data-theme=dark] {
    /* --bg: #222;
    --fg: #a8a8a0;

    --col-hl: #d8d8b0;
    --col-head: #fb3;

    --col-link: #57a;
    --col-hover: #78e;

    --fg-red: #d89090; 
    --fg-green: #a0d8a0; 
    --fg-blue: #a0b3d8; 
    --fg-yellow: #d8d8a0; 
    --fg-magenta: #c8a0e8; 
    --fg-cyan: #a0e0b8; 
    --fg-orange: #e0b890; 
    --fg-pink: #d898c8; 
    --fg-white: #eee; 
    --fg-dark: #444; 
    --fg-light: #888; 
    --fg-gray: #666; 
    --fg-black: #000; */

    --bg: #222;
    --fg: #a8a8a0;

    --fg-white: #eee;
    --border: #444;
    --fg-dark: #666;
    --fg-light: #888;
    --fg-gray: #777;
    --fg-black: #000;

    --fg-prim-a: #ffbb33ff;
    --fg-prim-b: #d89090;
    --fg-prim-c: #61eda8ff;
    --fg-prim-d: #339effff;

    --fg-red: #e86767;
    --fg-green: #a0d8a0;
    --fg-blue: #90b3e6ff;
    --fg-yellow: #e0b890;
    --fg-magenta: #d795ceff;
    --fg-cyan: #90d3d1ff;
    --fg-orange: #e0b890;
    --fg-key: #eee;

    --col-hl: #d8d8b0;
    --col-head: var(--fg-prim-a);

    --col-link: #57a;
    --col-hover: #78e;


    /* --col-link: var(--fg-prim-d);
    --col-hover: color-mix(in lab, var(--fg-key), var(--col-link)); */

}

[data-theme=light] {
    --bg: #ddc;
    --fg: #666;

    --col-hl: #a77;
    --col-head: #b60;

    --col-link: rgb(57, 136, 214);
    --col-hover: rgb(62, 86, 224);

    --fg-red: #e87474;
    --fg-green: #44bb44;
    --fg-blue: #a0b3d8;
    --fg-yellow: #d8d8a0;
    --fg-magenta: #c8a0e8;
    --fg-cyan: #a0e0b8;
    --fg-orange: #dc8f42;
    --fg-pink: #d898c8;
    --fg-white: #000;
    --fg-dark: #a0a090;
    --fg-light: #888;
    --fg-gray: #444;
    --fg-black: #fff;
}

* {
    --fg--1: var(--fg);
    --fg--2: var(--fg--1);
    --fg--3: var(--fg--2);
    --fg--4: var(--fg--3);
    --fg--5: var(--fg--4);
    color: var(--fg--5);

    --bg--1: var(--bg);
    --bg--2: var(--bg--1);
    --bg--3: var(--bg--2);
    --bg--4: var(--bg--3);
    --bg--5: var(--bg--4);
    background-color: var(--bg--5);

    font-family: inherit;
}

html,
body {
    padding: 0;
    margin: 0;

    font-family: "iosevka";
    height: 100%;
    background-color: var(--bg);
    color: var(--fg);
    font-size: 13pt;
    font-style: normal;
    font-weight: normal;

    /* font-feature-settings: 'calt' 0, 'CLIK' 1; */
}

img {
    font-size: 10px;
}

footer {
    position: sticky;
    bottom: 0;
    font-size: 50%;
    padding: 1ch;
    border-top: solid 1px var(--fg-dark);
    --fg: var(--fg-light);
}

figure {
    display: table;
    width: 1px;
    text-align: center;
}

figure img {
    display: inline;
}

img {
    margin: 0;
    display: block;
    text-wrap: wrap;
}

figcaption {
    margin-top: 0.5ch;
    font-size: 75%;
    --fg: var(--fg-dark);
}

.block {
    margin: 0;
    padding-inline: 1ch;
    padding-block: 1ex;
}

.block:not(:last-of-type) {
    border-bottom: solid 1px var(--fg-dark);
}

.block::after,
.text::after {
    clear: both;
    content: "";
    display: table;
}

.no-liga {
    font-variant-ligatures: none;
    font-feature-settings: 'liga' 0;
}

.dlig {
    font-variant-ligatures: discretionary-ligatures historical-ligatures;
    font-feature-settings: 'dlig' 1;
}

a,
a:visited,
#theme-switch,
.button {
    text-decoration: none;
    --fg: var(--col-link);
}

a[href="/404"],
a[href="/unreachable"] {
    text-decoration: none;
    --fg: var(--fg-red);
}

a[href="/404"]:hover,
a[href="/unreachable"]:hover {
    --fg: var(--fg-magenta);
}


a[target="_blank"] {
    text-decoration: underline 1px color-mix(in lab, var(--fg--5) 50%, var(--bg--5));
}

a:hover,
#theme-switch:hover,
.button:hover {
    --fg: var(--col-hover);
}

#succ {
    --bg: #311;
}

div.para {
    margin-top: 1ch;
}

h3,
.h,
h4 {
    font-size: inherit;
    --fg: var(--col-head);
    margin-top: 0.5lh;
    margin-bottom: 0.25lh;
}

h4 {
    --fg: var(--fg-green);
}

.r {
    --fg: var(--fg-red);
}

.g {
    --fg: var(--fg-green);
}

.b {
    --fg: var(--fg-blue);
}

.y {
    --fg: var(--fg-yellow);
}

.m {
    --fg: var(--fg-magenta);
}

.c {
    --fg: var(--fg-cyan);
}

.o {
    --fg: var(--fg-orange);
}

.p {
    --fg: var(--fg-pink);
}

.w {
    --fg: var(--fg-white);
}

.hl {
    font-weight: bold;
    color: var(--col-hl);
}

.key {
    --fg--1: color-mix(in lab, var(--fg) 50%, var(--fg-key));
}

.dim,
div.dim *,
label,
.commentdate {
    --fg--2: color-mix(in lab, var(--fg--1) 50%, var(--bg));
}

.commentdebugtrailer {
    font-size: 40%;
    position: absolute;
    --fg--2: color-mix(in lab, var(--fg--1) 50%, var(--bg));
}

.text {
    clear: both;
    max-width: 100ch;
    padding-left: 4ch;
}

.text>.outset {
    margin-left: -4ch;
}

code {
    display: block;
    border-left: #AAA 2px solid;
    margin-right: -1ch;
    background-color: #181818;
    width: 120ch;
    padding-left: 2ch;
    margin-left: 1ch;
    white-space: pre;
    overflow-x: scroll;
}


td,
th {
    border-left: 1ch solid transparent;
}

tr>td:first-child {
    border-left: 0;
}

details>summary:hover:first-child::marker {
    color: var(--fg-light);
}

details>summary:first-child::marker {
    content: '[+] ';
    color: var(--fg-dark);
}

details[open]>summary:first-child::marker {
    content: '[-] '
}

details>summary:first-child {
    color: var(--fg-light);
}

details>summary:hover:first-child {
    color: var(--fg-white);
}

.scanlines:before,
.scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: fixed;
}

.scanlines:before {
    width: 100%;
    height: 50vh;
    z-index: 2147483649;
    background: rgba(127, 0, 255, 0.025);
    opacity: 0.7;
    animation: noise 0.01s linear infinite alternate,
               noise-colour 0.0128s linear infinite;
}
.scanlines:after {
    z-index: 2147483648;
    background: linear-gradient(
        to bottom,
        transparent 33%,
        rgba(255, 255, 0, 0.1) 40%,
        rgba(0, 0, 255, 0.1) 66%
    );
    background-size: 100% max(4px, 0.4vh);
    animation: scanlines 1s infinite;
}

@keyframes noise {
    00% {
        transform: translate(0, 100vh);
    }
    20% {
        transform: translate(0, -200%);
    }
    40% {
        transform: translate(0, 50vh);
    }
    80% {
        transform: translate(0, 0%);
    }
    90% {
        transform: translate(0, 30vh);
    }
    100% {
        transform: translate(0, 100vh);
    }
}

@keyframes noise-colour {
    00% {
        background: rgba(0, 0, 255, 0.025);
    }
    20% {
        background: rgba(127, 0, 0, 0.025);
    }
    40% {
        background: rgba(127, 255, 255, 0.025);
    }
    80% {
        background: rgba(255, 0, 0, 0.02);
    }
    90% {
        background: rgba(0, 0, 0, 0.025);
    }
    100% {
        background: rgba(255, 255, 0, 0.025);
    }
}

@keyframes scanlines {
    0% {
        background-position: 0 75%;
    }
    62% {
        background-position: 0 30%;
    }
    83% {
        background-position: 0 63%;
    }
    90% {
        background-position: 0 20%;
    }
}

.flicker {
     animation: flicker-b 0.01s infinite,
                flicker-s 0.00921s infinite;
}

@keyframes flicker-b {
    00% {
        filter: brightness(90%);
    }
    20% {
        filter: brightness(100%);
    }
    40% {
        filter: brightness(130%);
    }
    80% {
        filter: brightness(80%);
    }
    90% {
        filter: brightness(100%);
    }
    100% {
        filter: brightness(110%);
    }
}

@keyframes flicker-s {
    00% {
        filter: sepia(0%);
    }
    20% {
        filter: grayscale(10%);
    }
    40% {
        filter: grayscale(30%);
    }
    80% {
        filter: sepia(40%) hue-rotate(30deg)
    }
    90% {
        filter: grayscale(8%);
    }
    100% {
        filter: sepia(18%);
    }
}
 
/* -----------------*/


details.ec>summary:first-child::marker {
    content: '[.] ';
    color: #F77;
}

details.ec[open]>summary:first-child::marker {
    color: #7F7;
    content: '[X] '
}

details.ec>summary:first-child {
    color: #FDD;
}

details.ec[open]>summary:first-child {
    color: #DFD;
}


form {
    border: 1px color-mix(in lab, var(--border), var(--fg-green)) solid;
    padding: 1ch;
    vertical-align: top;
}

.commentform {
    margin-bottom: 2ch;
}

label {
    margin: 0;
    vertical-align: top;
}

input,
textarea {
    font: inherit;
    padding-inline: 5px;
    background-color: color-mix(in lab, var(--bg--5) 90%, var(--fg-green));
    border: 0.5px solid color-mix(in lab, var(--border) 80%, var(--fg-green));
}

input::placeholder,
textarea::placeholder {
    opacity: 0.5;
    vertical-align: middle;
    font-size: 75%;
}

input[type=submit],
input[type=reset] {
    margin-top: 3px;
    --fg: var(--col-link);
    background-color: color-mix(in lab, var(--bg--5) 90%, var(--col-link));
    border: 0.5px solid color-mix(in lab, var(--border) 80%, var(--col-link));
}



input[type=submit]:hover,
input[type=reset]:hover {
    margin-top: 3px;
    --fg: color-mix(in lab, var(--fg-white) 50%, var(--col-hover));
    background-color: color-mix(in lab, var(--bg--5) 70%, var(--col-hover));
    border: 0.5px solid color-mix(in lab, var(--fg-dark) 80%, var(--col-hover));
}

#cf_name {
    display: block;
    width: 32ch;
    margin-bottom: 3px;
}

#cf_content {
    display: block;
    resize: none;
    width: 100%;
    margin: 0;
    height: 8.1lh;
    overflow: hidden;
    text-wrap: nowrap;
}

input:focus,
textarea:focus {
    outline: none;
}

.box {
    border: 1px var(--border) solid;
}

#backlinks,
#ibacklinks {
    font-size: 75%;
    border: 1px var(--border) solid;
    padding: 1ch;
    padding-top: 0.0ch;
    padding-bottom: 0.5ch;
    margin-block: 1ch;
    width: fit-content;
}

.backlink-list,
.ibacklink-list {
    margin-block: 0.5ch;
    padding-left: 0;

}

.backlink-list li,
.ibacklink-list li {
    list-style-position: inside;

}

.backlink-list li::marker,
.ibacklink-list li::marker {
    color: var(--fg-dark);
}

.backlink-count,
.ibacklink-count {
    color: var(--fg-dark);
    font-size: 75%;
    margin-left: -0.5ch;
}

.backlink-count::before {
    content: 'backlinks: '
}


.ibacklink-count::before {
    content: 'included in: '
}

ul {
    margin: 0;
}

li {
    margin: 0;
    list-style-type: '- ';
    list-style-position: outside;
}

br.vtab {
    margin-block: 1lh;
}

.commentsection {
    margin-top: 3ch;
}

.commentsection .comment {
    border: 1px var(--border) solid;
    padding-inline: 1ch;
    padding-bottom: 1ch;
    padding-top: 0.5ch;
    margin-bottom: 0.5ch;
    white-space: pre;
}

.commentdate {
    vertical-align: top;
    font-size: 70%;
}

.small {
    vertical-align: middle;
    font-size: 60%;
}

.commentauthor {
    vertical-align: top;
    font-size: 70%;
    --fg: var(--fg-orange);
}

.ct1 .commentauthor {
    --fg: var(--fg-red);
}

.commentextra {
    vertical-align: top;
    font-size: 80%;
    margin-right: 0.75ch;
    --fg: var(--fg-gray);
}

img.aliasing,
.aliasing img:not([noalias]) {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    /* Firefox                        */
    image-rendering: -o-crisp-edges;
    /* Opera                          */
    image-rendering: -webkit-optimize-contrast;
    /* Chrome (and eventually Safari) */
    image-rendering: pixelated;
    /* Universal support since 2021   */
    image-rendering: optimize-contrast;
    /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;
    /* IE8+                           */

}

.button-main {
    display: flex;
    width: 100ch;
    flex-wrap: wrap;
}

.button-main>* {
    margin-bottom: 3px;
    margin-right: 3px;
}

.changelog {
    font-size: 70%;
}

.keychangelog {
    font-size: 90%;
}

#discord_activity {}

#discord_status {}

#discord_status::before {
    content: "[ discord | enable JS for live update ] ";
    display: block;
    font-size: 50%;
    margin-top: -0.5ex;
    margin-left: -0.5ch;
    margin-bottom: 0.25ch;
    color: var(--fg-dark);
}

#discord_status.live::before {
    content: "[ discord | live ] ";
}

#discord_status_type {
    color: var(--fg-prim-a);
}

#discord_status_type::after {
    content: " // ";
    color: var(--fg-dark);
}

.discord_activity {
    display: grid;
    grid-template:
        "a b b"
        ". c c"
        ". d d";
    justify-items: start;
    justify-content: start;
    min-width: 40ch;
    font-size: 75%;
}

.discord_activity_time {
    color: var(--fg-green);
    margin-right: 1ch;
    justify-self: start;
}

.discord_activity_finished .discord_activity_time {
    color: var(--fg-magenta);
    justify-self: start;
}

.discord_activity_name {
    color: var(--fg-cyan);
    justify-self: start;
}

.discord_activity_state {
    color: var(--fg-white);
    grid-area: c;
    justify-self: start;
}

.discord_activity_details {
    grid-area: d;
    justify-self: start;
}

.data-grid {
    font-size: 75%;
    display: grid;
    justify-content: start;
    align-content: start;

    justify-items: center;
    align-items: center;

    grid-template:
        "a a d b e"
        "a a c c e"
        "h g g g e" min-content / min-content min-content min-content auto 1fr;
    ;
}

.data-grid>div:empty {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /><path d='M0 99 L99 0 L100 1 L1 100' fill='black' /></svg>");
}

.data-grid>div {
    border: 1px solid var(--border);
    padding: 1ch;
    margin: 0.5ch;
}

#x1 {
    grid-area: a;
    justify-self: start;
}

#x1::before {
    content: "[ contact info ] ";
    display: block;
    font-size: 50%;
    margin-top: -0.5ex;
    margin-left: -0.5ch;
    color: var(--fg-dark);
}

#x3 {
    grid-area: b;
    height: fit-content;
}

#x2::before {
    content: "[ webrings ] ";
    display: block;
    font-size: 50%;
    margin-top: -0.5ex;
    margin-left: -0.5ch;
    color: var(--fg-dark);
}

#x2 {
    grid-area: c;
    height: fit-content;
    width: fit-content;
}

#x4 {
    grid-area: h;
    align-self: start;
    justify-self: end;
}

#x5 {
    grid-area: e;
    min-height: 4ch;
}

#x5::before {
    content: "[ random ] ";
    display: block;
    font-size: 50%;
    margin-top: -0.5ex;
    margin-left: -0.5ch;
    color: var(--fg-dark);
}

#x6 {
    grid-area: d;
    display: flex;
    margin: none;
    border: none;
}

#x6 img {
    margin: 2px;
    border: 1px solid var(--border);
    padding: 1ch;
    margin: 0.5ch;
    box-sizing: content-box;
}

#x2 {
    grid-area: c;
}

#x7 {
    max-width: 60ch;
    width: max-content;
    grid-area: g;
}

#x7::before {
    content: "[ projects ] ";
    display: block;
    font-size: 50%;
    margin-top: -0.5ex;
    margin-left: -0.5ch;
    color: var(--fg-dark);
}

#x7> :first-child {
    margin-top: 0;
}