/*

    Let's define some variables!

*/

@font-face {
    font-family: 'Averia Libre';
    src: local('Averia Libre'),
    url("../fonts/AveriaLibre-Regular.ttf") format("truetype");
}

@font-face {
    font-family: 'Zara';
    src: local('Zara'),
    url("../fonts/Zara-Regular.woff") format("woff");
}

@font-face {
    font-family: 'Crédible';
    src: local('Crédible'),
    url("../fonts/Crédible-Regular.woff") format("woff");
}

:root {
    /* Unchanging */
    --font          : 'Averia Libre', sans-serif; /* Verdana, sans-serif */
    --font-alt      : 'Crédible', serif, cursive;
    --font-alt2     : 'Zara', serif;
    --bg-image      : url("../img/forest.png");
	--font-size	    : calc(1rem + (1vw / 5));
    --brown-color   : #150F0B;
    --drop-shadow   : black;

    /* -- Colors -- */
    --bg-color          : #ADB6DA; /* #2f1b2b */
    --color             : #1f161d;
    --back              : #E1EAE9; /* #CCEDCD */
    --accent            : #132B06;

    --nav-a             : #B5CFDC;
    --accent-color-01   : #132B06;
    --accent-color-02   : #000000;

    /* Headings */
    --head-1    : #003959;
    --head-2    : #004754;
    --head-3    : #004C4E;
    --head-4    : #005237;
    --head-5    : #004E47;
    --head-6    : #0E4E00;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color          : var(--head-2);
        --color             : #D2DFCA;
        --back              : #111218; /* #0A0809 */
        --accent            : #DBFFC5;

        --accent-color-01   : #B5CFDC;
        --accent-color-02   : #C2F9D5;

        /* Headings */
        --head-1    : #B6E1F7;
        --head-2    : #ADB6DA;
        --head-3    : #85B4C2;
        --head-4    : #7CC2C0;
        --head-5    : #7DD29F;
        --head-6    : #85E3A2;
    }
}