/* variables */

    :root {
        --header-image: url('/images/blu-j-div-welcome-header.png');
        --body-bg-image: url('/images/resources/background-clouds.png');
        --character-image: url('/hyperweb/images/div.png');
        --ear-l: url('/hyperweb/images/ears/div_l.png');
        --ear-r: url('/hyperweb/images/ears/div_r.png');

        /* colors */

        --whiteblue: #c8d0e9;
        --lightblue:#99a6cf;
        --blue: #626ea9;
        --darkblue: #343978;
        --blackblue: #0c0a36;

        --whitebrown: #f4d8c4;
        --lightbrown: #cda085;
        --brown: #815c42;
        --darkbrown: #442d1c;

        --lightpink: #ffb6ce;
        --pink: #f481a7;
        --darkpink: #a02a52;

        --lightyellow: #ffeac8;
        --yellow: #fac674;

        --lightgreen: #c3d693;
        --green: #96aa62;
        --darkgreen: #3e572a;

        /* scrollbars */
        --root-scroll-main: var(--pink);
        --root-scroll-handle: var(--yellow);

        --body-scroll-main: var(--darkblue);
        --body-scroll-handle: var(--pink);

        --updates-scroll-main: var(--pink);
        --updates-scroll-handle: var(--darkblue);

        /* navigation */
        --nav-bg: var(--darkblue);
        --nav-border: var(--blackblue);
        --nav-link: var(--pink);
        --nav-link-hover: var(--yellow);

        --footer-bg: var(--blackblue);
        --footer-border: var(--blackblue);
        --footer-text: var(--pink);
        --footer-link: var(--pink);
        --footer-link-hover: var(--yellow);

        /* main and aside */
        --main-bg: var(--blue);
        --main-border: var(--darkblue);
        --main-text: white;

        --aside-bg: var(--darkblue);
        --aside-border: var(--blackblue);
        --aside-text: white;

        /* text n stuff */
        --link: var(--lightyellow);
        --link-hover: var(--lightpink);
        --text-strong: var(--pink);
        --hr-color: var(--yellow);

        /* headings */
        --h1-text: var(--yellow);
        --h1-bottom: var(--pink);
        --h2-text: var(--yellow);
        --h2-bg: var(--darkblue);
        --h2-shadow: var(--blackblue);
        --h3-text: var(--lightyellow);
        --h3-top: var(--darkblue);
        --h3-bottom: var(--lightblue);
        --h4-text: var(--blackblue);
        
        /* updates */
        --updates-bg: var(--lightblue);
        --updates-border: var(--darkblue);
        --updates-text: var(--blackblue);
        --updates-h2-bg: var(--blue);
        --updates-h2-text: var(--yellow);
        --updates-link: var(--blackblue);
        --updates-link-hover: var(--lightyellow);

        /* tab buttons */
        --tab-btn: var(--green);
        --tab-btn-border: var(--darkgreen);
        --tab-btn-hover: var(--yellow);
        --tab-btn-border-hover: var(--pink);
        --tab-btn-text: var(--blackblue);

        /* to-do box */
        --todo-bg: var(--green);
        --todo-border: var(--darkblue);
        --todo-text: var(--blackblue);
        --todo-link: var(--blackblue);
        --todo-link-hover: var(--blackblue);

        /* wiki */
        --info-bg: var(--yellow);
        --info-text:var(--blackblue);
        --info-tr-odd:var(--lightyellow);
        --info-h-text:var(--darkblue);
        --info-center-h-bg:var(--green);
        --info-center-h-text:var(--blackblue);
        --info-link: var(--darkblue);
        --info-link-hover: var(--darkpink);

        /* misc */
        --body-bg-color: var(--pink);
        --favs-bg: var(--darkblue);
    }

    aside h2 {
        border: 5px solid var(--h2-shadow);
    }

    #favs h2 {
        border: 5px solid var(--h2-shadow);
    }

    .updates a:hover {
        background-color: var(--blue);
        border-radius: 5px;
        padding: 2px
    }