@font-face {
    font-family: 'Fanwood Text';
    src: url('/assets/type/fanwoodtext.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fanwood Text';
    src: url('/assets/type/fanwoodtext_italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'League Gothic';
    src: url('/assets/type/leaguegothic_semi-condensed.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --ratio: 1.4;
    --space--2: calc(var(--space--1) / var(--ratio));
    --space--1: calc(var(--space-0) / var(--ratio));
    --space-0: calc(1rem + .45vw);
    --space-1: calc(var(--space-0) * var(--ratio));
    --space-2: calc(var(--space-1) * var(--ratio));
    --space-3: calc(var(--space-2) * var(--ratio));
    --space-4: calc(var(--space-3) * var(--ratio));
    --max-width: 55ch;
    --body: 'Fanwood Text',serif,system-ui;
    --heading: 'League Gothic',sans-serif,system-ui;
    --paragraph: calc(1.25rem + .45vw);
    --primary: #161718;
    --accent: #8D8C8C;
    --link: #AD0000;
    --background: #FBFAF7;                                
}

:focus-visible {
    outline: 3px solid #AD0000;
    outline-offset: 2px;
}

@media (prefers-color-scheme: dark){
    :root {
        --primary:#D3CEC1;
        --link:#FF7A7A;
        --accent:#8D8C8C;
        --background:#161718;
        --dark-primary: #161718;
    }
    h3 {                                            
        letter-spacing: .5px;
    }
    :focus-visible {
        outline: 3px solid #FF7A7A;
    }
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    background: none;
    overscroll-behavior: none;
}

html {
    font-size: 16px;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: #fff0;
}

html:focus-within {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    margin: unset;
    padding: var(--space-3) var(--space-1);
    font-family: var(--body);
    font-size: var(--paragraph);
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    color: var(--primary);
    background-color: var(--background);
}

main {
    max-width: var(--max-width);
    margin: 0 auto;
}

main > * + * {
    margin-block-start: var(--space-3);
}

main.single-section > * + *,
section > * + *,
.fancy-pants-list > * + * {
    margin-block-start: var(--space-1);
}

.just-a-list > * + * {
    margin-block-start: var(--space-0);
}

.gap--2 {
    display: inline-block;
    width: var(--space--2);
}

.gap--1 {
    display: inline-block;
    width: var(--space--1);
}

.center {
    text-align: center;
}

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 {
    font-family: var(--heading);
    font-size: calc(var(--paragraph) * 5.25);
    font-weight: normal;
    line-height: 1;
}

h2 {
    font-size: calc(var(--paragraph) * 1.175);
    font-weight: normal;
    line-height: 1.3;
}

h3 {
    font-family: var(--heading);
    font-size: calc(var(--paragraph) * 2);
    font-weight: normal;
    line-height: 1.3;
}

blockquote {
    font-family: var(--body);
    font-size: calc(var(--paragraph) * 1.05);
    font-style: italic;
}

hr {
    height: 1px;
    background: var(--accent);
}

hr.transparent {
    background: transparent;
}

.just-a-list li {
    list-style: none;
}

.fancy-pants-list li {
    list-style: decimal;
    list-style-position: inside;
}

.downloads {
    gap: 2rem;
}

.downloads svg, 
a.sticker-link {
    display: inline-block;
    width: auto;
    height: 80px;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--max-width);
    margin: var(--space-3) auto 0;
}

.copyright {
    position: relative;
    top: -0.15em;
}

a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--accent);
    text-decoration-skip: all;
    text-underline-offset: 2px;
    cursor: pointer; 
    transition: opacity .2s ease;
}

@media (hover:hover) and (pointer:fine) {
    a:hover {
        opacity: .6;
    }
}

.linkstyling-off {
    text-decoration: none;
}

.backlink > a {
    color: var(--link);
    fill: var(--link);
}

.arrow-lft {
    width: auto;
    height: .7em;
}

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