/* reddit-mono-latin-wght-normal */
@font-face {
    font-family: 'Reddit Mono Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/reddit-mono:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Variables go here */
    /* Typography */
    --font-main: "Reddit Mono Variable", system-ui, sans-serif;
    --bold-weight: 800;

    /* Colors */
    --neo-yellow: #FFD23F;
    --neo-pink: #FF6B6B;
    --neo-blue: #3998f7;
    --neo-green: #88D498;
    --neo-purple: #B8A9FA;
    --neo-orange: #ff9d34;
    --neo-white: #FFFFFF;
    --neo-black: #000000;

    /* TODO: Pick one of these to stick with */
    --neo-bg-champagne: #F7F3E9;
    --neo-bg-parchment: #F0EAD6;
    --neo-bg-sand: #E6DFCF;
    --neo-bg-color: var(--neo-bg-sand);

    --text-color: var(--neo-black);

    /* Shadows */
    --neo-shadow: .2rem .2rem 0 var(--neo-black);
    --neo-shadow-deep: .375rem .375rem 0 var(--neo-black);
    --neo-border: .2rem solid var(--neo-black);
    --neo-border-thin: .125rem solid var(--neo-black);

    /* Spacing */
    --space-xs: .25rem;
    --space-s: .5rem;
    --space-m: 1rem;
    --space-l: 2rem;

    --list-indent: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);

    --space-3xs: clamp(0.25rem, 0.2148rem + 0.1563vw, 0.3125rem);
    --space-2xs: clamp(0.4375rem, 0.332rem + 0.4688vw, 0.625rem);
    --space-xs: clamp(0.6875rem, 0.5469rem + 0.625vw, 0.9375rem);
    --space-s: clamp(0.875rem, 0.6641rem + 0.9375vw, 1.25rem);
    --space-m: clamp(1.3125rem, 0.9961rem + 1.4063vw, 1.875rem);
    --space-l: clamp(1.75rem, 1.3281rem + 1.875vw, 2.5rem);
    --space-xl: clamp(2.625rem, 1.9922rem + 2.8125vw, 3.75rem);
    --space-2xl: clamp(3.5rem, 2.6563rem + 3.75vw, 5rem);
    --space-3xl: clamp(5.25rem, 3.9844rem + 5.625vw, 7.5rem);


    /* Radii */
    --radius-sm: 0px;
    --radius-sm: .125rem;
    --radius-md: .3125rem;
    --radius-lg: .625rem;

    /* Font Steps */
    /* https://utopia.fyi/type/calculator/?c=360,14,1.067,1000,18,1.2,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12 */
    --step--2: clamp(0.6944rem, 0.8103rem + -0.1853vw, 0.7686rem);
  --step--1: clamp(0.8201rem, 0.8126rem + 0.0332vw, 0.8333rem);
  --step-0: clamp(0.875rem, 0.8047rem + 0.3125vw, 1rem);
  --step-1: clamp(0.9336rem, 0.7838rem + 0.6659vw, 1.2rem);
  --step-2: clamp(0.9962rem, 0.7465rem + 1.1096vw, 1.44rem);
  --step-3: clamp(1.0629rem, 0.6888rem + 1.6627vw, 1.728rem);
  --step-4: clamp(1.1341rem, 0.6057rem + 2.3487vw, 2.0736rem);
  --step-5: clamp(1.2101rem, 0.4911rem + 3.1955vw, 2.4883rem);
}


h1 {
    font-size: var(--step-5);
}
h2 { font-size: var(--step-4);}
h3 { font-size: var(--step-3);}
h4 { font-size: var(--step-2);}
h5 { font-size: var(--step-1);}
h6 {font-size: var(--step-0);}
body {font-size: var(--step-0)}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    margin-block-start: var(--space-m);
    font-weight: var(--bold-weight);

}

body {
    max-width: 80ch;
    line-height: 1.6;
    margin: auto;
    padding: 0 var(--space-2xs);
    font-family: var(--font-main);
    background-color: var(--neo-bg-color);
    color: var(--text-color);
}

footer {
    margin-block-start: var(--space-l);
    padding-top: var(--space-l);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
    padding: var(--space-m);
    row-gap: var(--space-xs);

    div {
        display: flex;
        align-items: center;
        gap: var(--space-xs) var(--space-m);
    }

    a {
        border: var(--neo-border-thin);
        border-radius: var(--radius-sm);
        box-shadow: var(--neo-shadow);
        padding: var(--space-3xs) var(--space-2xs);
        background-color: var(--neo-orange);
        font-weight: var(--bold-weight);
    }
}

header {
    margin-block-end: var(--space-s);
}

a {
    color: var(--text-color);
    text-decoration: none;
    border-bottom: var(--neo-border);
    border-color: var(--neo-blue);
    font-weight: var(--bold-weight);
    transition: all 0.1s;
}

a:hover {
    color: var(--neo-white);
    background-color: var(--neo-blue);
}

section,
article {
    margin: var(--space-2xs);
    margin-block-start: var(--space-l);
    padding: var(--space-s);
    border: var(--neo-border);
    box-shadow: var(--neo-shadow-deep);
    background-color: var(--neo-white);
    border-radius: var(--radius-lg);
}


p {
    margin-top: var(--space-m);
}


mark {
    position: relative;
    color: unset;
    background-color: unset;
    z-index: 1;
}

mark::after {
    content: "";
    position: absolute;
    width: 100%;
    height: .75em;
    left: 0;
    bottom: .375em;
    z-index: -1;
    background-color: var(--neo-yellow);
    opacity: .65;
}

.tag {
    position: relative;
    z-index: 1;
}

.tag:hover {
    cursor: pointer;
}

.tag::after {
    content: "";
    position: absolute;
    width: 100%;
    height: .75em;
    left: 0;
    bottom: .375em;
    z-index: -1;
    background-color: var(--neo-green);
    border-radius: var(--radius-sm);
    opacity: .65;
}

.tag:hover::after {
    background-color: var(--neo-orange);
}


.button-88-31,
.button-88-31:hover {
    width: 88px;
    height: 31px;
    text-decoration: none;
    border: none;
    margin: var(--space-s);
    box-shadow: var(--neo-shadow);
    background-color: var(--neo-black);
    color: var(--neo-black);
}

div.highlight {
    margin: var(--space-s) var(--space-2xs);
    padding: var(--space-s);
    border: var(--neo-border-thin);
    overflow-x: auto;
}

aside {
    padding: var(--space-l);
    border: var(--neo-border-thin);
    border-radius: var(--radius-lg);
    box-shadow: var(--neo-shadow);
    width: 35ch;
    min-height: 15ch;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: var(--space-l);
}


a.link-button {
    padding: var(--space-l);
    border: var(--neo-border-thin);
    border-radius: var(--radius-lg);
    box-shadow: var(--neo-shadow);
    width: 35ch;
    min-height: 5ch;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: var(--space-l);
}

a.link-button:hover {
    transform: translate(-.2rem, -.2rem);
    box-shadow: var(--neo-shadow-deep);
}

li.post-link-item {
    margin-block-start: var(--space-xs);
}

ul, ol {
    padding-inline-start: var(--list-indent);
}

img {
    max-width: 100%;
    display:block;
    height: auto;
    max-height:80vh;
}