/* my color palette */

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --dark0: #000000;
    --dark1: #393e41;
    --light0: #ffffff;
    --light1: #f2f3f6;
    --light2: #e7e5df;
    --light3: #d3d0cb;
    --blue1: #0075ba;
    --blue2: #ccecff;
    --blue3: #e0f4ff;
    --blue4: #f5fbff;
    --brown1: #be5a38;
}

html {
    --loading: rgba(255,255,255,.8);
    --body-bg: #fff;
    --body-color: #000;
    --header-bg: #fff;
    --header-border: #eee; 
    --languages-color: #aaa;
    --languages-color-hover: #777;
    --languages-color-active: #000;
    --header-a-color: #000;
    --header-a-active: #eee;
    --menu-toggle-bg: #000;
    --header-mobile-nav-bg: #fff;
    --footer-border: #eee; 
    --thumbnail: #eee;
    --post-box-shadow: #f2f2f2;
    --post-border: #eee;
    --category-bg: #f7f7f7;
    --category-bg-hover: #eee;
    --category-bg-active: #e7e7e7;
    --category-color: #000;
    --article-division: #ccc;
}

html.dark {
    --loading: rgba(0,0,0,.8);
    --body-bg: #222;
    --body-color: #eee;
    --header-bg: #222;
    --header-border: #333; 
    --languages-color: #777;
    --languages-color-hover: #aaa;
    --languages-color-active: #eee;
    --header-a-color: #eee;
    --header-a-active: #333;
    --menu-toggle-bg: #eee;
    --header-mobile-nav-bg: #222;
    --footer-border: #333; 
    --thumbnail: #333;
    --post-box-shadow: #2c2c2c;
    --post-border: #2c2c2c;
    --category-bg: #111;
    --category-bg-hover: #333;
    --category-bg-active: #3a3a3a;
    --category-color: #eee;
    --article-division: #444;
}

/* standard styles */

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    color: var(--dark0);
    margin: 0;
    padding: 0;
    background-color: var(--body-bg);
    color: var(--body-color);
}