@font-face {
    font-family: 'Redaction';
    src: url('./fonts/Redaction/Redaction-Regular.woff2') format('woff2'),
         url('./fonts/Redaction/Redaction-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Redaction Bold';
    src: url('./fonts/Redaction/Redaction-Bold.woff2') format('woff2'),
         url('./fonts/Redaction/Redaction-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Redaction 10';
    src: url('./fonts/Redaction/Redaction_10-Regular.woff2') format('woff2'),
         url('./fonts/Redaction/Redaction_10-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Redaction 20';
    src: url('./fonts/Redaction/Redaction_20-Regular.woff2') format('woff2'),
         url('./fonts/Redaction/Redaction_20-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Redaction 35';
    src: url('./fonts/Redaction/Redaction_35-Regular.woff2') format('woff2'),
         url('./fonts/Redaction/Redaction_35-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Redaction 50';
    src: url('./fonts/Redaction/Redaction_50-Regular.woff2') format('woff2'),
         url('./fonts/Redaction/Redaction_50-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Redaction 70';
    src: url('./fonts/Redaction/Redaction_70-Regular.woff2') format('woff2'),
         url('./fonts/Redaction/Redaction_70-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'iA Writer Quattro';
    src: url('./fonts/iA Writer Quattro/iAWriterQuattroS-Regular.woff2') format('woff2'),
         url('./fonts/iA Writer Quattro/iAWriterQuattroS-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'iA Writer Quattro Bold';
    src: url('./fonts/iA Writer Quattro/iAWriterQuattroS-Bold.woff2') format('woff2'),
         url('./fonts/iA Writer Quattro/iAWriterQuattroS-Bold.woff') format('woff');
    font-weight: bold;
    font-style: bold;
}

@font-face {
    font-family: 'iA Writer Quattro Italic';
    src: url('./fonts/iA Writer Quattro/iAWriterQuattroS-Italic.woff2') format('woff2'),
         url('./fonts/iA Writer Quattro/iAWriterQuattroS-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

:root{
    
    /*Typography*/
    --font-headings: 'Redaction Bold', serif;
    --font-body: 'iA Writer Quattro', sans-serif;
    --font-button: 'iA Writer Quattro Bold', sans-serif;
}

/* Typography controls */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    letter-spacing: 1px;
    margin: auto;
}
p, a, li, span, td, th {
    font-family: var(--font-body);
    margin: auto;
    font-size: 1.125rem;
    line-height: 2rem;
}
h1{
    font-size: 2.75rem;
    line-height: 3.5rem;
}
h2 {
    font-size: 2rem;
    line-height: 3rem;
    margin: 0;
    padding-top: 1.5rem;
}
h3 {
    font-size: 1.5rem;
    line-height: 2.25rem;
    margin: 0;
}
p, td {
    color: var(--text-tertiary);
}
a {
    text-decoration-color: var(--border-action);
    text-decoration-thickness: .055em;
    text-underline-offset: 3.75px;
    text-decoration-skip-ink: auto;
    transition: 0.3s;
    color: var(--text-primary);
}
a:hover {
    text-decoration-color: var(--border-card);
}

@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
        line-height: 3rem;
    }
    h2 {
        font-size: 1.5rem;
        line-height: 2.25rem;
    }
    h3 {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}