/* ========================================================================= */
/* GLOBAL                                                                 */
/* ========================================================================= */

/* FONTS */

@font-face {
    font-family: 'Aboreto';
    src:  local('Aboreto');
    src:  url('/assets/fonts/Aboreto-Regular.ttf') format('truetype');
    font-weight: normal;
}
  
@font-face {
    font-family: 'Petrona';
    src:  local('Petrona');
    src:  url('/assets/fonts/Petrona-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
}
  
@font-face {
    font-family: 'Petrona';
    src:  local('Petrona-Italic');
    src:  url('/assets/fonts/Petrona-Italic-VariableFont_wght.ttf') format('truetype');
    font-style: italic;
}

@font-face {
    font-family: 'Playpen Sans';
    src:  local('Playpen-Sans');
    src:  url('/assets/fonts/PlaypenSans-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
}

/* ========================================================================= */
/* VARIABLES                                                                 */
/* ========================================================================= */

:root {
    /* colors */
    --accent: #707b71;
    --secondary: #aeb9bc;
    --subtle: #6b6b6b;
    --foreground: #131313;
    --background: #f1f3f9;

    /* fonts */
    --serif: "Petrona", "Hoefler Text", "Noto Serif", Garamond, serif;
    --sans-serif: "Aboreto", "Helvetica Neue", Helvetica, sans-serif;
    --handwritten: "Playpen Sans", sans-serif;
    /* Fluidly variable between: 16px @ 320px and 32px @ 1920px */
    --font-unit: calc(1rem + ((1vw - 0.2em) * 1));

    /* whitespace */
    --whitespace-scale: 1;

    /* borders */
    --focus-outline: solid 0.25rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent: #707b71;
        --secondary: #3b5250;
        --subtle: #6b6b6b;
        --foreground: #f1f3f9;
        --background: #131313;
    }
  }

/* ========================================================================= */
/* NORMALIZE                                                                 */
/* ========================================================================= */

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

* {
    margin: 0;
    padding: 0;
    border: none;
}

body {
    /* Fix Safari bug with viewport units in calc() */
    /* min-height: 0vw; */

    color: var(--body);
    font: 400 var(--font-unit)/1.5 var(--serif);
    background-color: var(--background);
}

:focus {
    outline: var(--secondary) var(--focus-outline);
    border-radius: 5px;
}

#content :focus {
    outline: var(--accent) var(--focus-outline);
    border-radius: 5px;
}

::-moz-selection {
    color: var(--background);
    background-color: var(--accent);
}

::selection {
    color: var(--background);
    background-color: var(--accent);
}

a {
    color: var(--accent);
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--font-unit);
    font-family: var(--sans-serif);
}

hr::after {
    content: '* * *';
    display: block;
    color: var(--subtle);
    margin: var(--font-unit) auto calc(2 * var(--font-unit)) auto;
    text-align: center;
}

/* ========================================================================= */
/* ACCESSIBLE SKIP LINK                                                      */
/* by Mike Foskett <https://codepen.io/2kool2/pen/bxdzEJ>                    */
/* ========================================================================= */

.skiplink {
    position: absolute;
    padding: .5rem 1rem;
    color: var(--background);
    background-color: var(--foreground);
    text-decoration: none;
    font-weight: bold;
    z-index: 10;
    transform: translate3d(.125rem, -5rem, 0);
    transition: transform .3s ease-out;
}

.skiplink:focus {
    transform: translate3d(.125rem, .125rem, 0);
    outline: #fff solid .125rem;
}

@media print {
    .skiplink {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skiplink {
        transition: none;
    }
}