/* Font Faces */

@font-face {
    font-family: 'Vollkorn';
    font-weight: 400 900;
    src: url('Vollkorn-variable.woff2') format('woff2-variations');
}

@font-face {
	font-family: 'Signika'; 
    font-weight: 300 700;
    src: url('Signika-variable.woff2') format('woff2-variations');
}

@font-face {
	font-family: 'Fira Code'; 
    font-weight: 300 700;
    src: url('FiraCode-variable.woff2') format('woff2-variations');
}

:root {
    /* Font Stacks */
    --serif: 'Vollkorn', 'Baskerville', 'Times New Roman', serif;
    --sans-serif: 'Signika', 'Arial', sans-serif; 
    --monospace: 'Fira Code', 'Courier New', monospace; 

    /* Type Scale */
    --step-6: 4em;
    --step-5: 2.4em;
    --step-4: 2em;
    --step-3: 1.8em;
    --step-2: 1.4em;
    --step-1: 1.2em;
    --step-0: 1em;
    --step--1: 0.8em;
    --step--2: 0.6em;
    --step--3: 0.4em;
}

body {
    font-family: var(--sans-serif); 
    font-weight: 400;
}


/* Headlines */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: var(--step-0);
    padding-top: 1em;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }
h6 { font-size: var(--step-0); }



/* paragraphs */

p {
    padding: var(--step--1) 0;
}

.footer p {
    font-size: var(--step--1);
    font-weight: 300;
}

.widgets p {
    padding: var(--step--3) 0;
}

/* lists */

ul, ol {
    padding-left: var(--step-5);
}

li {
    padding: 0 var(--step--3);
}


/* other */

code {
    font-family: var(--monospace);
    font-weight: 400;
}

blockquote p {
    font-family: var(--serif);
    filter: opacity(70%);
    padding: var(--step-3);
}

cite {
    font-style: normal;
    filter: opacity(60%);
    padding-left: var(--step-3);
}

figcaption {
    font-size: var(--step--1);
    filter: opacity(60%);
    text-align: center;
}