@font-face {
    font-family: fira;
    src: url(/fonts/FiraCode-VariableFont_wght.ttf);
    font-feature-settings: cv06, cv16, cv25, cv26, cv28, cv32, ss01, ss06, ss07, ss09;
}

:root {
    --black: #000;
    --white: #fff;
    --light: #555;
    --red: #f00;
    --soft-red: rgb(254, 98, 98);
    --dark-red: rgb(158, 0, 0);
    --yellow: #fffb00;
    --lime: #00ff1e;
    --pink: #ffc0cb;
    --aqua: #00b8eb;
    --moss: #48eedb;
    --soft-aqua: #0028eb;
    --deep-aqua: #0052b9;
    --fg: #bbb;
    --bg-trans: rgba(20, 20, 20, 0.8);
    --top-bg-trans: rgba(20, 20, 20, 0.9);
    --th-fg: #eee;
    --gr: hsl(000,00%,40%);
    --b: 0.1rem solid;
    --black-border: #35393b;
}

.lime {
    color: var(--lime);
}

.yellow {
    color: var(--yellow);
}

.red {
    color: var(--red);
}

.red a:link {
    color: var(--red);
}

.red a:visited {
    color: var(--red);
}

.red a:hover {
    color: var(--soft-red);
}

.moss {
    color: var(--moss);
}

.aqua {
    color: var(--aqua);
}

.aqua a:visited {
    color: var(--aqua);
}

.shadow {
    text-shadow: 0px 0px 5px;
}

.right {
    text-align: right;
}

html {
    height: 100%;
}

body {
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    background-image: url(/img/screen-glitch.gif);
    background-color: var(--bg-trans);
    background-blend-mode: multiply;
    color: var(--th-fg);
    font-family: fira, courier, monospace;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    width: 100%;
}

main {
    display: flex;
    max-width: 1064px;
    width: 100%;
    margin: 3.1rem auto 0 auto;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

img {
    display: flex;
    margin: 0 auto;
    padding: 0.5rem;
}

code {
    color: var(--lime);
    font-family: monospace;
}

h1 {
    color: var(--th-fg);
    font-size: 5rem;
    text-shadow: 1px 0px 10px;
}

h2 {
    color: var(--lime);
    font-size: 2rem;
    text-shadow: 0px 0px 15px;
    padding: 0.2rem;
    margin: 0.3rem 0.3rem 0 0.4rem;
    border-bottom: 2px solid var(--black-border);
}

p {
    color: var(--white);
    margin: 0;
    font-size: 1.2rem;
    text-shadow: none;
}

a {
    padding: 0.25rem;
}

a:link {
    color: var(--aqua);
}

a:visited {
    color: var(--deep-aqua);
}

a:hover {
    color: var(--soft-aqua);
}

hr {
    border: 1px solid var(--fg);
}

header {
    display: block;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    padding: 0 0.5rem;
    width: 100%;
    background-color: var(--top-bg-trans);
    /*border-bottom: 2px solid var(--bg-trans);*/
    font-size: 1.8rem;
    text-align: left;
    font-weight: bold;
    text-shadow: 1px 0px 10px;
    z-index: 2;
}

footer {
    background-color: var(--bg-trans);
    background-blend-mode: multiply;
    flex-grow: 0;
    text-align: center;
    margin-top: auto;
    border-top: 2px solid var(--th-fg);
    padding: 0.6rem;
}

footer p {
    text-shadow: 0px 0px 10px;
    font-size: 1.5rem;
}

footer::before {
    clear: both !important;
    display: block !important;
    height: 120px !important;
    min-height: 120px !important;
}

br {
    display: block;
    margin: 5px;
    content: " ";
}

ol {
    list-style-type: decimal-leading-zero;
    margin: 0.5rem;
    font-size: 1.2rem;
    padding-left: 3rem;
}

ul {
    list-style-position: inside;
    list-style-type: '> ';
    padding-inline-start: 1rem;
    margin: 0.6rem 0.4rem 0.6rem 0.5rem;
    font-size: 1.2rem;
}

ol ul {
    padding-inline-start: 0rem;
}

ul ul {
    list-style-type: '>> ';
    padding-inline-start: 1.5rem;
}

/* Chrome-specific */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    .noise {
        filter: contrast(290%) brightness(1000%);
    }
}

@media only screen and (max-width: 1200px) {
    :where * {
        letter-spacing: 0;
    }

    main {
        margin: 2.5rem auto 0 auto;
    }

    :where(h1) {
        font-size: 2rem !important;
    }

    :where(h2) {
        font-size: 1.5rem !important;
    }

    :where(p) {
        font-size: 1.1rem !important;
    }

    :where(ul) {
        font-size: 1.1rem !important;
    }

    :where(ol) {
        font-size: 1.1rem !important;
    }

    .intro h1 {
        font-size: 3rem !important;
    }

    .entry div {
        padding: 0.5rem !important;
    }

    .art div {
        padding: 0.5rem !important;
    }

    .post div {
        padding-top: 0.25rem !important;
    }

    header {
        font-size: 1.2rem;
    }

    footer {
        font-size: 0.8rem;
    }
}