/* Fonts */

@font-face {
    font-family: 'Brother 1816';
    src: url('../fonts/brother1816-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fisterra Fora';
    src: url('../fonts/Fisterra-fora.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Komu';
    src: url('../fonts/komu.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


:root {
    --sans: 'Brother 1816', -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
    --header: 'Fisterra Fora', Georgia, 'Times New Roman', Times, serif;
    --script: 'Komu', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/* Global */

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--sans);
    line-height: 1.4;
    color: var(--black);
    background-color: var(--cream);
    overflow-x: hidden;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1024px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 1280px) {
    html {
        font-size: 20px;
    }
}

h1, h2 {
    font-family: var(--header);
}

h1, .h1 {
    font-size: 2.5rem;
    line-height: 1.05;
}
@media (max-width: 40em) {
    h1, .h1 {
        font-size: 2rem
    }
}
h2, .h2 {
    line-height: 1.2;
    font-size: 1.75rem
}
@media (max-width: 40em) {
    h2, .h2 {
        font-size: 1.5rem
    }
}
h3, .h3 {
    line-height: 1.3;
    font-size: 1.5rem
}
@media (max-width: 40em) {
    h2, .h2 {
        font-size: 1.375rem
    }
}
h4, .h4 {
    font-size: 1.125rem
}
h5, .h5 {
    font-size: .9rem
}
h6, .h6 {
    font-size: .8rem
}

.huge {
    font-size: 2.5rem;
    line-height: 1;
}
@media (min-width: 52em) {
    .huge {
        font-size: 3rem;
    }
}

.huger {
    font-size: 3.25rem;
    line-height: 1;
}
@media (min-width: 52em) {
    .huger {
        font-size: 5rem;
    }
}

p {
    margin-top: 0;
    margin-bottom: 1.75rem;
}

a {
    color: var(--black);
    text-decoration: underline;
    transition: color 200ms;
}

a:hover {
    color: var(--red);
    text-decoration: underline;
}

::-moz-selection {
    color: #151515;
    background: #d5c6b3;
}

::selection {
    color: #151515;
    background: #d5c6b3;
}


/* Custom Typography */

.sans {
    font-family: var(--sans);
}

.header {
    font-family: var(--header);
}

.script {
    font-family: var(--script);
}

.letter-spacing-25 {
    letter-spacing: 0.025em
}
.letter-spacing-50 {
    letter-spacing: 0.05em
}
.letter-spacing-100 {
    letter-spacing: 0.1em
}