:root {
    --color-jet: #312f2f;
    --color-eggplant: #713e5a;
    --color-mint: #63a375;
    --color-sunset: #edc79b;
    --color-burnt-sienna: #d57a66;
    --color-blush: #ca6680;
    --color-flame: #ec4e20;

    --main-bg-color: var(--color-jet);
    --main-fg-color: var(--color-sunset);
    --node-bg-color: var(--color-burnt-sienna);
    --node-unfireable-bg-color: var(--color-blush);
    --node-border-color: var(--color-jet);
    --edge-color: var(--color-jet);
}

html * {
    font-family: sans-serif;
}

h1 {
    width: 95vw;
    height: 5vh;
}

#root {
    border: 5px solid var(--color-sunset);
    width: 95vw;
    height: 85vh;
    display: flex;
    background-color: var(--color-eggplant);
}

body {
    background-color: var(--main-bg-color);
    color: var(--main-fg-color);
}

.node {
    border: 6px solid var(--node-border-color);
    border-radius: 6px;
    width: 10em;
    height: 10em;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none !important;
}

.fireable {
    background-color: var(--node-bg-color);
}

.unfireable {
    background-color: var(--node-unfireable-bg-color)
}

.label {
    font-size: 6em;
}

.edge {
    stroke-width: 1.5em;
}