:root {
    --bg: #ffffff;
    --text: #222;
    --card-bg: #f6f6f6;
    --border: #ddd;
}

body.dark {
    --body-color: black;
    --header-bg-color: #1d3b51;
    --main-color: #22323d;
    --text-color: white;
    --border: 2px solid #86c7f7;

    --button-bg-color: #86c7f7;
    --button-text-color: black;

    --witch-button-image: url('witch.png')
    --skull-button-image: url('skull.png)')

    --hero-image: none;
}

body.light {
    --body-color: white;
    --header-bg-color: #86c7f7;
    --main-color: #d2ecff;
    --text-color: #1d3b51;
    --border: 2px solid #1d3b51;

    --button-bg-color: #1d3b51;
    --button-text-color: white;

    --witch-button-image: url('witch.png')
    --skull-button-image: url('skull.png)')

    --hero-image: null;
}

body.green {

    --hero-image: url('/images/darkplants.jpg');

    --body-color: black;
    --header-bg-color: black;
    --main-color: #042600;
    --text-color: white;
    --border: 2px solid #042600;

    --button-bg-color: #72946d;
    --button-text-color: white;

    --witch-button-image: url('witch.png')
    --skull-button-image: url('skull.png)')

}