/*Fonts*/
@font-face {
    font-family: "Alegreya";
    src: url("Alegreya-VariableFont_wght.ttf");
    font-display: swap;
}

@font-face {
    font-family: "Nunito Sans";
    src: url("NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf");
    font-display: swap;
}

/* Defaults */
:root {
    --font-family-serif: "Alegreya", serif;
    /*   --font-family-serif: 'ITC Cheltenham Std', serif;    */
    --font-family-sans: "Nunito Sans", sans-serif;
    /* --font-family-sans: 'Libre Franklin', sans-serif;    */
    /* --font-family-sans: 'Univers Next Pro', sans-serif; */
    /* --font-family-typewriter: 'L', sans-serif; */
    /* --font-family-typewriter: 'CMU Typewriter Text', sans-serif;*/
    --font-family-monospace:
        Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console,
        Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono,
        Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
}

/* Theme colors */
:root {
    --color-gray-20: #e0e0e0;
    --color-gray-50: #c0c0c0;
    --color-gray-90: #333;

    --background-color: #fff;

    --highligher-yellow: 255, 225, 0;
    --highligher-green: 20, 225, 0;
    --highligher-pink: 255, 0, 170;

    --tape-gray: #dbd8be;
    --tape-edge-gray: #b7b49d;

    /* --background-color: #fffcf8; */

    --text-color: var(--color-gray-90);
    --text-color-link: #082840;
    --text-color-link-active: black;
    --text-color-link-visited: #060517;

    --syntax-tab-size: 2;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-gray-20: #e0e0e0;
        --color-gray-50: #c0c0c0;
        --color-gray-90: #dad8d8;

        /* --text-color is assigned to --color-gray-_ above */
        --text-color-link: #95bddb;
        --text-color-link-active: #64a4d3;
        --text-color-link-visited: #95bddb;
        /*
        --text-color-link: #1493fb;
        --text-color-link-active: #6969f7;
        --text-color-link-visited: #a6a6f8;
*/

        --background-color: #15202b;
    }
}

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
/*Reset*/

*,
*::before,
*::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
    display: block;
    /*max-width: 100%;*/
    margin: 0 auto;
}

input,
button,
textarea,
select {
    font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}
#root,
#__next {
    isolation: isolate;
}

/* GLOBAL */

html {
    font-size: 100%;
}

main {
    padding: 1rem;
}

main :first-child {
    margin-top: 0;
}

main.container {
    max-width: 44rem;
    padding: 20px;
    margin: 0 auto;
}

body {
    font-family: var(--font-family-serif);
    font-size: 1.25rem;
    background-color: var(--background-color);
    color: var(--text-color);
}

p {
    font-family: var(--font-family-serif);
    color: var(--text-color);
    font-weight: 400;
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.6em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-sans);
    font-weight: 700;
    font-variation-settings:
        "wdth" 90,
        "YTLC" 480;
}

h1.title {
    font-weight: 800;
    padding-bottom: 0.5em;
}

h2 {
    font-size: 1.5em;
    padding-top: 1rem;
}

li {
    margin-bottom: 1em;
}

a {
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

p.page-description {
    font-size: 1.5rem;
    line-height: 1.3em;
}

ul.post-metadata > li {
    font-size: 0.95em;
    margin-bottom: 0em;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

a[href] {
    color: var(--text-color-link);
}

a[href]:visited {
    color: var(--text-color-link-visited);
}

a[href]:hover,
a[href]:active {
    color: var(--text-color-link-active);
}

/* HEADERFOOTER */
/* Header */
header {
    font-family: var(--font-family-sans);
    display: flex;
    gap: 1em 0.5em;
    flex-wrap: wrap;
    align-items: center;
    padding: 1em;
    max-width: 800px;
    /* margin-left: 50% !important; */
    /* flex-wrap: wrap; */
    margin: auto;
}
.home-link {
    /* font-size: 1.em; 16px /16 */
    font-weight: 600;
    margin-right: 2em;
}
.home-link:link:not(:hover) {
    text-decoration: none;
}

/* Nav */

nav {
    margin-left: auto;
}

.nav {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}
.nav-item {
    display: inline-block;
    margin-bottom: 0;
    font-size: 85%;
    /* margin-right: 1em; */
}

.nav-link {
    padding: 0.5rem 0 0.5rem 1rem;
}

.nav-item a[href]:not(:hover) {
    text-decoration: none;
}
.nav a[href][aria-current="page"] {
    text-decoration: underline;
}

a.nav-link > img {
    width: 20px;
}

/* Footer Tags */

.links-nextprev {
    list-style: none;
    border-top: 1px dashed var(--color-gray-50);
    border-bottom: 1px dashed var(--color-gray-50);
    /*padding: 1em 0; */
    /* height: 400px; */
    flex-flow: column wrap;
    align-content: space-between;
    position: relative;
}

.previousPost {
    float: left;
    display: flex;
    align-items: center;
}

.nextPost {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.nextPost svg {
    display: block;
    max-width: 15px;
    margin: 20px;
}

.previousPost svg {
    display: block;
    max-width: 15px;
    margin: 20px;
}

a.header-anchor {
    color: white;
    text-decoration: none;
}

.footer {
    font-family: var(--font-family-sans);
    display: flex;
    /* justify-content: center; */
    align-items: flex-start;
    /* margin: 0 130px 50px 130px; */
    max-width: 44em;
    /* width: 500px; */
    /* padding: 20px; */
    margin: 0 auto;
    flex-wrap: wrap;
}

.footerColumn {
    list-style: none;
    padding: 10px;
    flex: 1 1;
}

/* POST */
/* Image */

img {
    width: 100%;
    display: flex;
    justify-content: center;
}

img.wide {
    width: 60vw;
    min-width: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
    height: auto;
}

img.fullWidth {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    height: auto;
}

p.source {
    font-size: 1rem;
    color: gray;
    text-align: center;
}

/* Cover Images */

img.page-cover-image {
    min-width: 100%;
    width: 40vw;
    margin-left: 50%;
    transform: translateX(-50%);
    height: auto;
    padding-bottom: 2rem;
}

/* NOTECARDS */

/* Post Lists */

div.postlist {
    list-style: none;
}

a.postlist-link {
    font-size: 1.5em;
    font-weight: 600;
}

li.postlist-item {
    list-style: none;
}

li.postlist-item:first-child ~ li.postlist-item {
    margin-top: 2em;
}

div.postListDescription {
    font-size: 1em;
    margin-top: 0.5em;
    padding-left: 1em;
    padding-bottom: 1em;
}

div.postListDate {
    font-family: var(--font-family-sans);
    font-size: 75%;
    margin-top: 0.5em;
    padding-left: 1em;
    color: darkgray;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 0.9rem;
}

div.cardCategory {
    font-family: var(--font-family-sans);
    font-size: 75%;
    margin-top: 0.5em;
    padding-left: 1em;
    position: absolute;
    bottom: 1rem;
    left: 1rem;
}

.cardTag {
    margin: 0 -0.4em;
    padding: 0.1em 0.4em;
    border-radius: 0.8em 0.3em;
    background: transparent;
    background-image: linear-gradient(
        to right,
        rgba(var(--highligher-green), 0.1),
        rgba(var(--highligher-green), 0.7) 4%,
        rgba(var(--highligher-green), 0.3)
    );
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transform: skew(15deg, -2deg);

    display: inline-block;
    -webkit-transform: rotate(-5deg);
}

.cardTag.tag--RStats {
    margin: 0 -0.4em;
    padding: 0.1em 0.4em;
    border-radius: 0.8em 0.3em;
    background: transparent;
    background-image: linear-gradient(
        to right,
        rgba(var(--highligher-pink), 0.1),
        rgba(var(--highligher-pink), 0.7) 4%,
        rgba(var(--highligher-pink), 0.3)
    );
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transform: skew(15deg, -2deg);

    display: inline-block;
    -webkit-transform: rotate(-5deg);
}

.tagText {
    display: inline-block;
    -webkit-transform: rotate(5deg) !important;
}

/* Cards */

.card {
    position: relative;
    margin: 40px auto;
    max-width: 40rem;
    min-height: 350px;
    padding: 20px 30px;
    background: #fff;
    border-radius: 2px;
    border: none;
    color: #082840;
}

/* Card Style: Plain */

#indexcard.card {
    box-shadow: 0 0 125px #8f592220 inset;
}

/* Card Style: DotGrid */

#indexcard2.card {
    box-shadow: 0 0 125px #8f592220 inset;
    background-image:
        linear-gradient(
            180deg,
            white 3rem,
            #f0a4a4 calc(3rem),
            #f0a4a4 calc(3rem + 2px),
            transparent 1px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1.5rem,
            #ddd 1px,
            #ddd calc(1.5rem + 1px)
        );
}

/* Card Style: DotGrid */

#indexcard3.card {
    box-shadow: 0 0 125px #8f592220 inset;
    background-size: 30px 30px;
    background-position: 30px;
    background-image: radial-gradient(
        circle,
        #00000020 1px,
        rgba(0, 0, 0, 0) 0.5px
    );
}

.card::before,
.card::after {
    content: "";
    position: absolute;
    bottom: 10px;
    width: 35%;
    height: 10px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
    z-index: -1;
    transition: all 0.3s ease-in-out;
}

.card::before {
    left: 15px;
    transform: skew(-5deg) rotate(-5deg);
}

.card::after {
    right: 15px;
    transform: skew(5deg) rotate(5deg);
}

.card:hover::before,
.card:hover::after {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.card:hover::before {
    left: 5px;
}

.card:hover::after {
    right: 5px;
}

a.cardLink {
    text-decoration: none;
}

.cardHeadline {
    font-size: 1.5rem;
    margin-top: -2rem !important;
    padding-bottom: 10px;
    padding-top: 20px;
    margin-left: 1rem;
}

hr {
    border-color: #fb3471;
    margin: 20px -20px 20px;
}

/* Tape */

.tape-section {
    position: absolute;
    width: 100%;
}

.top-tape {
    position: relative;
    height: 40px;
    bottom: 40px;
    width: 100%;
    background-color: var(--tape-gray);
    border-right: 1px dotted var(--tape-edge-gray);
    border-left: 1px dotted var(--tape-edge-gray);
    opacity: 0.5;
}

#skip > div.postlist > a:nth-child(1) > div.box > div.top-tape {
    transform: rotate(0deg);
}

#skip > div.postlist > a:nth-child(2) > div.box > div.top-tape {
    transform: rotate(0.8deg);
}

#skip > div.postlist > a:nth-child(3) > div.box > div.top-tape {
    transform: rotate(-0.5deg);
}

#skip > div.postlist > a:nth-child(4) > div.box > div.top-tape {
    transform: rotate(0deg);
}

#skip > div.postlist > a:nth-child(5) > div.box > div.top-tape {
    transform: rotate(0.4deg);
}

.tape-section:first-of-type {
    top: 0;
}

.tape-section:last-of-type {
    bottom: 0;
}

.tape-section::before,
.tape-section::after {
    content: "";
    width: 10vmin;
    height: 4vmin;
    position: absolute;
    background-color: var(--tape-gray);
    opacity: 0.5;
    border-right: 1px dotted var(--tape-edge-gray);
    border-left: 1px dotted var(--tape-edge-gray);
}

.tape-section:last-of-type::after {
    transform: rotate(-45deg);
    right: -4vmin;
    top: -3vmin;
}

.tape-section:first-of-type::before {
    transform: rotate(-45deg);
    left: -4vmin;
}

.tape-section:first-of-type::after {
    transform: rotate(45deg);
    right: -4vmin;
    top: 0;
}

.tape-section:last-of-type::before {
    transform: rotate(45deg);
    left: -4vmin;
    bottom: 0;
}

.allposts {
    font-family: var(--font-family-sans);
    font-size: 1rem;
}

/* Page Code */

mark {
    padding: 0.2em;
    /* background-color: #fcf8e3; */
    --mark-color: #f8db7585;
    --mark-skew: 0.25em;
    --mark-height: 2.5rem;
    --mark-overlap: 0.3em;
    margin-inline: calc(var(--mark-overlap) * -1);
    padding-inline: var(--mark-overlap);
    background-color: transparent;
    background-image:
        linear-gradient(
            to bottom right,
            transparent 50%,
            var(--mark-color) 50%
        ),
        linear-gradient(var(--mark-color), var(--mark-color)),
        linear-gradient(to top left, transparent 50%, var(--mark-color) 50%);
    background-size:
        var(--mark-skew) var(--mark-height),
        calc(100% - var(--mark-skew) * 2 + 1px) var(--mark-height),
        var(--mark-skew) var(--mark-height);
    background-position:
        left center,
        center,
        right center;
    background-repeat: no-repeat;
    color: inherit;
}

/* CODE */

/* PrismJS 1.30.0
https://prismjs.com/download#themes=prism-tomorrow&languages=markup+css+r */
code[class*="language-"],
pre[class*="language-"] {
    color: #ccc;
    background: 0 0;
    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    font-size: 1rem;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
pre[class*="language-"] {
    padding: 1em;
    margin: 0.5em 0;
    overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    background: #2d2d2d;
}
:not(pre) > code[class*="language-"] {
    padding: 0.1em;
    border-radius: 0.3em;
    white-space: normal;
}
.token.block-comment,
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
    color: #999;
}
.token.punctuation {
    color: #ccc;
}
.token.attr-name,
.token.deleted,
.token.namespace,
.token.tag {
    color: #e2777a;
}
.token.function-name {
    color: #6196cc;
}
.token.boolean,
.token.function,
.token.number {
    color: #f08d49;
}
.token.class-name,
.token.constant,
.token.property,
.token.symbol {
    color: #f8c555;
}
.token.atrule,
.token.builtin,
.token.important,
.token.keyword,
.token.selector {
    color: #cc99cd;
}
.token.attr-value,
.token.char,
.token.regex,
.token.string,
.token.variable {
    color: #7ec699;
}
.token.entity,
.token.operator,
.token.url {
    color: #67cdcc;
}
.token.bold,
.token.important {
    font-weight: 700;
}
.token.italic {
    font-style: italic;
}
.token.entity {
    cursor: help;
}
.token.inserted {
    color: green;
}