/* GLOBAL */
:root{
    /* colors */
    --primarycolor:     #222222;
    --accentcolor:      #9b9036;
    --extracolor:       #000000cc;

    --darkcolor:        #222222;
    --lightcolor:       #f3f3f3;
    --opaquecolor:      #0000000a;

    --bodycolor:        #dddbd7;
    --maincolor:        #efede8;
    --footercolor:      #111;

    /* rem */
    --REM:              8px;

    /* layout */
    --outerwidth:       100vw;
    --innerwidth:       100vw;

    --space:            4rem;
    --navheight:        65px;

    /* effects & misc */
    --slidespeed:       750ms;
    --shadow:           0 0 3rem #11111111;

    --slow:             800ms;
    --normal:           400ms;
    --quick:            250ms
}

@media (min-width: 600px) {
    :root{
        /* rem */
        --REM:          9px;

        /* layout */
        --innerwidth:   80vw;
    }
}

@media (min-width: 1200px) {
    :root{
        --REM:          10px;

        /* layout */
        --innerwidth:   1420px;
        --space:        5rem;
    }
}

@media (min-width: 1920px) {
    :root{
        /* layout */
        --outerwidth:   1920px;
    }
}

/* TYPOGRAPHY */
:root{
    --heading:          'Playfair Display', serif;
    --paragraph:        'Roboto', sans-serif;
}

h1,h2,h3,h4,h5,h6{
    --fontfamily:       var(--heading);
    --textalign:        left;
    --hyphens:          auto;
    --fontweight:       600;
    --color:            #222;
    --lineheight:       1.15;
    --texttransform:    none;
}

p,a,li,label,button,th,td,input,select,textarea{
    --fontfamily:       var(--paragraph);
    --textalign:        left;
    --hyphens:          none;
    --fontweight:       300;
    --color:            #444;
    --lineheight:       1.6;
}

/*SCROLL & SELECTION----------------------------------------------------------------------------------------------------*/

:root{
    --scrollbarsize: 8px;
}

::-webkit-scrollbar {width: var(--scrollbarsize); height: var(--scrollbarsize);}
::-webkit-scrollbar-track {background: #444}
::-webkit-scrollbar-thumb {background: #000;border-radius: var(--scrollbarsize);}
::-webkit-scrollbar-thumb:hover {background: var(--darkcolor)}

html.noscroll{
    overflow: hidden;
}

::selection {
    background:     #000;
    color:          var(--lightcolor)
}