@font-face {
    font-family: equity_a;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    font-display: swap;
    src: url("equity_a_regular.woff2") format("woff2");
}

@font-face {
    font-family: equity_a;
    font-style: italic;
    font-weight: normal;
    font-stretch: normal;
    font-display: swap;
    src: url("equity_a_italic.woff2") format("woff2");
}

@font-face {
    font-family: equity_a;
    font-style: normal;
    font-weight: bold;
    font-stretch: normal;
    font-display: swap;
    src: url("equity_a_bold.woff2") format("woff2");
}

@font-face {
    font-family: equity_a;
    font-style: italic;
    font-weight: bold;
    font-stretch: normal;
    font-display: swap;
    src: url("equity_a_bold_italic.woff2") format("woff2");
}

:root {
    --base: 16px;
    --font-size: calc(var(--base) * 1.0);
    --font-weight: 400;
    --font: "Work Sans";
    --font: "Space Grotesk";
    --font: "Inter Variable";
    --font: "TX-02";
    --font: "Everyday Sans";
    --font: "Lexend";
    --font: equity_a, "Times New Roman", "Times", serif;
    --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
        "Roboto Mono", "Oxygen Mono", "Ubuntu Mono", "Source Code Pro",
        "Fira Mono", "Droid Sans Mono", "Consolas", "Courier New", monospace;

    --meteorite-black: #2a2c2f;
    --moon-rock: #b3aeaa;
    --punch-purple: #6400ff;
    --warm-gray: #ece8e3;
    --warm-white: #fdfcf4;
    --that-blue: #3222ff;
    --tree-green: #0b7007;
    --space-green: #7DA690;
    --solar-orange: #ff5623;
    --red: #ff0000;
    --fire-orange: #ff3300;
    --color-faded: #777;
    --color-faded-faded: #ddd;
    --color-faded-faded-faded: #f8f8f8;
    --color-bg-content: #fff;

    --color-bg: var(--color-faded-faded-faded);
    --color-text: var(--meteorite-black);
    --color-accent: var(--that-blue);
    --color-accent: var(--tree-green);
    --color-accent: var(--solar-orange);
    --color-accent: var(--punch-purple);
    --color-accent: var(--red); 
    --color-accent: var(--space-green);
    --color-accent: var(--punch-purple);
    --color-accent: var(--meteorite-black);

    --max-width: 30rem;
    --line-height: 1.3;
    --line-height-expanded: 1.7;
}

@media (prefers-color-scheme: dark) {
    :root {        
        --color-faded-faded: #444;
        --color-faded-faded-faded: #444;
        --color-bg: #111016;
        --color-text: #fafafa;
        --color-bg-content: #141414;
        --color-accent: var(--warm-white);
    }
}

html {
    font-size: var(--font-size);
}
body {
    text-wrap: pretty;
    margin: 0;
    padding: 0;
    font-family: var(--font);
    line-height: var(--line-height);
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: never;
    -moz-osx-font-smoothing: never;
    font-weight: var(--font-weight);
    font-feature-settings:
        "aalt" 0, /* Access All Alternates */
        "c2sc" 0, /* Small Capitals From Capitals */
        "calt" 0, /* Contextual Alternates */
        "case" 0, /* Case-Sensitive Forms */
        "ccmp" 0, /* Glyph Composition/Decomposition */
        "cpsp" 0, /* Capital Spacing */
        "cv01" 1, /* Alternate one */
        "cv02" 0, /* Open four */
        "cv03" 0, /* Open six */
        "cv04" 0, /* Open nine */
        "cv05" 1, /* Lower-case L with tail */
        "cv06" 0, /* Simplified u */
        "cv07" 0, /* Alternate German double s */
        "cv08" 1, /* Upper-case I with serif */
        "cv09" 0, /* Flat-top three */
        "cv10" 1, /* Capital G with spur */
        "cv11" 1, /* Single-story a */
        "cv12" 0, /* Compact f */
        "cv13" 0, /* Compact t */
        "dlig" 0, /* Discretionary Ligatures */
        "dnom" 0, /* Denominators */
        "frac" 0, /* Fractions */
        "locl" 0, /* Localized Forms */
        "numr" 0, /* Numerators */
        "ordn" 0, /* Ordinals */
        "pnum" 0, /* Proportional Figures */
        "salt" 0, /* Stylistic Alternates */
        "sinf" 0, /* Scientific Inferiors */
        "ss01" 0, /* Open digits */
        "ss02" 0, /* Disambiguation (with zero) */
        "ss03" 0, /* Round quotes & commas */
        "ss04" 0, /* Disambiguation (no zero) */
        "ss05" 0, /* Circled characters */
        "ss06" 0, /* Squared characters */
        "ss07" 1, /* Square punctuation */
        "ss08" 1, /* Square quotes */
        "subs" 0, /* Subscript */
        "sups" 0, /* Superscript */
        "tnum" 0, /* Tabular Figures */
        "zero" 0; /* Slashed Zero */
}
a {
    color: var(--color-accent);
}
a:hover {
    color: var(--color-text);
}
p {
    margin: 0 0 1rem;
}
h1,
h2,
h3 {
    font-weight: 900;
    margin: 2rem 0 1rem;
    margin: 0 0 1rem;
    line-height: 1.1em;
    font-size: 1.25rem;
    /*  font-family: var(--font);*/
    font-weight: 400;
}
h1 {
    font-size: 1rem;
    font-weight: 900;
    line-height: 100%;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
h2 {
    font-size: 1rem;
    font-weight: bold;
}
h3 {
    margin-bottom: 1rem;
    margin-top: 3rem;
    font-size: 1rem;
    color: var(--color-faded);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
h3 + p {
    margin-top: 0;
}

img {
    width: 100%;
    display: block;
}

img.avatar {
    box-shadow: 8px 8px 0 var(--color-accent);
    width: 25%;
    height: auto;
    margin: 0 0 3rem;
}

strong {
    font-weight: 700;
}

hr {
    background: 0;
    height: 0;
    border: 0;
    border-top: solid 4px var(--color-faded-faded-faded);
    margin: 2rem 0;
}

ul {
    list-style: square;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    /*  gap: 1rem;*/
    background: var(--color-bg-content);
    margin: 4rem auto;
    align-content: center;
    /*  border-left: 1px solid var(--warm-gray);*/
    max-width: var(--max-width);
    padding: 3rem;
    grid-template-areas:
        "header header"
        "sidebar sidebar"
        "content .";
}

.header {
    grid-area: header;
    margin-bottom: 2rem;
}
.sidebar {
    grid-area: sidebar;
}
.content {
    grid-area: content;
}

.bw-image {
    filter: grayscale(1);
}

.box {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(235, 235, 235);
    box-shadow:
        rgba(0, 0, 0, 0.02) 0px 4px 4px -1px,
        rgba(0, 0, 0, 0.08) 0px 1px 1px 0px;
    border-radius: 2px;
}

/* old school buttons */

.button {
    font-size: 0.75rem;
    border-width: 2px;
    border-style: outset;
    border-color: #f1f1f1;
    border-right-color: #424242;
    border-bottom-color: #424242;
    background: silver;
    text-decoration: none;
    cursor: cursor;
    color: black;
    padding: 1px 8px 2px;
    border-radius: 1px;
}
.button:active {
    border: 2px inset #f1f1f1;
    background: silver;
    color: #424242;
    box-shadow: -1px -1px #000;
}
.button.active {
    background: var(--accent);
    color: white;
}

.rotatable {
    transform: rotate(-1deg);
    transition: transform 0.08s ease-in;
    border: rgba(100, 100, 100, 0.08) 4px solid;
    border-radius: 10px;
}
.rotatable:hover {
    transform: rotate(-2.5deg);
}

.rounded {
    border-radius: 3px; 
}

.faded {
    color: var(--color-faded);
}
.font-mono {
    font-family: var(--font-mono);
}
.small {
    font-size: calc(var(--font-size) * 0.8);
    line-height: var(--line-height-expanded);
}

@media (max-width: 840px) {
    :root {
    }
    .grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header header"
            "sidebar sidebar"
            "content content";
        margin: .25rem;
        padding: 1rem;
    }
}