.light {
    --background-color: #E5F3FF;
}

.dark {
    --background-color: #001166;
}

.light.blue {
    --color-1: #43A9ff;
    --color-2: #43A9ff;
    --display-color-2: none;
    --color-3: #C7E8FF;
    --color-4: #E5F3FF;
}

.light.red {
    --color-1: #43A9FF;
    --color-2: #6AC7FF;
    --color-3: #E5F3FF;
    --color-4: #FF7349;
}

.light.green {
    --color-1: #0092F6;
    --color-2: #6AC7FF;
    --color-3: #E5F3FF;
    --color-4: #29A545;
}

.light.yellow {
    --color-1: #0092F6;
    --color-2: #6AC7FF;
    --color-3: #E5F3FF;
    --color-4: #FFBD0A;
}

.light.purple {
    --color-1: #43A9FF;
    --color-2: #6AC7FF;
    --color-3: #E5F3FF;
    --color-4: #8650F8;
}

.dark.blue {
    --color-1: #0092F6;
    --color-2: #0092F6;
    --display-color-2: none;
    --color-3: #001166;
    --color-4: #0051B9;
}

.dark.red {
    --color-1: #0092F6;
    --color-2: #0051B9;
    --color-3: #001166;
    --color-4: #E1390B;
}

.dark.green {
    --color-1: #0092F6;
    --color-2: #0051B9;
    --color-3: #001166;
    --color-4: #14862D;
}

.dark.yellow {
    --color-1: #0092F6;
    --color-2: #0051B9;
    --color-3: #001166;
    --color-4: #D67B00;
}

.dark.purple {
    --color-1: #0092F6;
    --color-2: #0051B9;
    --color-3: #001166;
    --color-4: #8650F8;
}

svg {
    background-color: var(--background-color);
    width: 100lvw;
    height: 100lvh;
}

#fill stop:nth-child(1) {
    stop-color: var(--color-1);
}

#fill stop:nth-child(2) {
    stop-color: var(--color-2);
    display: var(--display-color-2, inline);
}

#fill stop:nth-child(3) {
    stop-color: var(--color-3);
}

#fill stop:nth-child(4) {
    stop-color: var(--color-4);
}