:root {
    --white: #F5F5F5;
    --light-blue: #6F7FA6;
    --dark-blue: #242C52;
    --light-yellow: #E2912F;
    --gold: #B26720;
    --light-pink: #D65F6B;
    --dark-pink: #AA3A45;
    --black: #1B1B1b;
}

body {
    --main-buttons: var(--light-yellow);
    --button-border: var(--black);
    --main-button-hover: var(--gold);
    --hover-button-text: var(--white);
    --title-bar: var(--light-pink);
    --main-background: var(--light-blue);
    --main-text-color: var(--white);
    --nav-button-text: var(--dark-blue);
    --nav-text-hover: var(--white);
    --main-nav-hover: var(--dark-pink);
    --hr-color: var(--dark-blue);
    --settings-modal-text: var(--black);
    --quote-card: var(--light-yellow);
    --quote-card-text: var(--dark-blue);
    --quote-card-hover: var(--gold);
    --quote-card-hover-text: var(--white);
    --leaderboard-modal-text: var(--black);
    --leaderboard-modal-header: var(--dark-pink);
    --view-quotes-btn-primary: var(--black);
}

body.coolBlue {
    --light-white: #F5F5F5;
    --blue: #26408b88;
    --darker-blue: #26408b;
    --darkest-blue: #0f084b;
    --light-aqua: #c2e7d9;
    --aqua: #a6cfd5;
    --dark-purple: #0d0221;

    --main-buttons: var(--light-aqua);
    --button-border: var(--black);
    --main-button-hover: var(--aqua);
    --hover-button-text: var(--light-white);
    --title-bar: var(--darkest-blue);
    --main-background: var(--blue);
    --main-text-color: var(--light-white);
    --nav-button-text: var(--light-aqua);
    --nav-text-hover: var(--light-white);
    --main-nav-hover: var(--dark-purple);
    --hr-color: var(--darker-blue);
    --settings-modal-text: var(--black);
    --quote-card: var(--light-aqua);
    --quote-card-text: var(--darker-blue);
    --quote-card-hover: var(--aqua);
    --quote-card-hover-text: var(--light-white);
    --leaderboard-modal-text: var(--black);
    --leaderboard-modal-header: var(--dark-purple);
    --view-quotes-btn-primary: var(--black);
}

body.uAlbany {
    --yellow: #EEB211;
    --dark-gold: #977732;
    --bluish-gray: #85848F;
    --purple: #8E40C9;
    --dark-purple: #5C2883;
    --dark-maroon: #383131;

    --main-buttons: var(--yellow);
    --button-border: var(--black);
    --main-button-hover: var(--dark-gold);
    --hover-button-text: var(--white);
    --title-bar: var(--purple);
    --main-background: var(--bluish-gray);
    --main-text-color: var(--white);
    --nav-button-text: var(--dark-maroon);
    --nav-text-hover: var(--white);
    --main-nav-hover: #030303;
    --hr-color: var(--dark-maroon);
    --settings-modal-text: var(--black);
    --quote-card: var(--yellow);
    --quote-card-text: var(--dark-maroon);
    --quote-card-hover: var(--dark-gold);
    --quote-card-hover-text: var(--white);
    --leaderboard-modal-text: var(--black);
    --leaderboard-modal-header: var(--dark-purple);
    --view-quotes-btn-primary: var(--black);
}

body.krasne {
    --aqua: #3BA99C;
    --dark-aqua: #2a8177;
    --blue: #1779D5;
    --darker-blue: #145ea3;
    --darkest-blue: #31353A;
    --yellow: #DDD32F;

    --main-buttons: var(--aqua);
    --button-border: var(--black);
    --main-button-hover: var(--dark-aqua);
    --hover-button-text: var(--white);
    --title-bar: var(--blue);
    --main-background: var(--darkest-blue);
    --main-text-color: var(--white);
    --nav-button-text: var(--yellow);
    --nav-text-hover: var(--white);
    --main-nav-hover: var(--darker-blue);
    --hr-color: var(--yellow);
    --settings-modal-text: var(--black);
    --quote-card: var(--aqua);
    --quote-card-text: var(--yellow);
    --quote-card-hover: var(--dark-aqua);
    --quote-card-hover-text: var(--white);
    --leaderboard-modal-text: var(--black);
    --leaderboard-modal-header: var(--darker-blue);
    --view-quotes-btn-primary: var(--black);
}

body.grayscale {
    --main-buttons: #6f6f6f;
    --button-border: #000000;
    --main-button-hover: #000000;
    --hover-button-text: #000000;
    --title-bar: #3f3f3f;
    --main-background: #7f7f7f;
    --main-text-color: #000000;
    --nav-button-text: #000000;
    --nav-text-hover: #000000;
    --main-nav-hover: #222222;
    --hr-color: #000000;
    --settings-modal-text: #000000;
    --quote-card: #bbbbbb;
    --quote-card-text: #000000;
    --quote-card-hover: #888888;
    --quote-card-hover-text: #000000;
    --leaderboard-modal-text: #000000;
    --leaderboard-modal-header: #bbbbbb;
    --view-quotes-btn-primary: #252525;
}

body.njTransit {
    --nj-purple: #bc228c;
    --darker-purple: #831560;
    --nj-blue: #04529c;
    --nj-white: #f4f2f4;
    --nj-orange: #f4823c;
    --nj-dark-orange: #ec764c;

    --main-buttons: var(--nj-orange);
    --button-border: var(--black);
    --main-button-hover: var(--nj-dark-orange);
    --hover-button-text: var(--nj-white);
    --title-bar: var(--nj-purple);
    --main-background: var(--nj-blue);
    --main-text-color: var(--black);
    --nav-button-text: var(--black);
    --nav-text-hover: var(--nj-white);
    --main-nav-hover: var(--darker-purple);
    --hr-color: var(--nj-white);
    --settings-modal-text: var(--black);
    --quote-card: var(--nj-orange);
    --quote-card-text: var(--black);
    --quote-card-hover: var(--nj-dark-orange);
    --quote-card-hover-text: var(--black);
    --leaderboard-modal-text: var(--black);
    --leaderboard-modal-header: var(--nj-dark-orange);
    --view-quotes-btn-primary: var(--black);
}

body.template {
    --main-buttons: #000000;
    --button-border: #000000;
    --main-button-hover: #000000;
    --hover-button-text: #000000;
    --title-bar: #000000;
    --main-background: #000000;
    --main-text-color: #000000;
    --nav-button-text: #000000;
    --nav-text-hover: #000000;
    --main-nav-hover: #000000;
    --hr-color: #000000;
    --settings-modal-text: #000000;
    --quote-card: #000000;
    --quote-card-text: #000000;
    --quote-card-hover: #000000;
    --quote-card-hover-text: #000000;
    --leaderboard-modal-text: #000000;
    --leaderboard-modal-header: #000000;
    --view-quotes-btn-primary: #000000;
}