:root {
    --purple-bg-text: 18, 17, 23;
    --purple-bg2-text: 45, 43, 58;
    --purple-fg-text: 106,101,137;
    --purple-ml-text: 150, 141, 199;
    --purple-hl-text: 198,194,253;
    --purple-sh-text: 117,68,196;
    --blue-accent-text: 104,179,221;
    --purple-font-text: 255, 255, 255;

    --purple-background: rgb(18, 17, 23);
    --purple-background2: rgb(45, 43, 58);
    --purple-foreground: rgb(106,101,137);
    --purple-midlight: rgb(150, 141, 199);
    --purple-highlight: rgb(198,194,253);
    --purple-shadow: rgb(117,68,196);
    --blue-accent: rgb(104,179,221);
    --purple-font: rgb(255, 255, 255);

    --blue-bg-text: 9, 16, 21;
    --blue-bg2-text: 37, 64, 85;
    --blue-fg-text: 15, 78, 114;
    --blue-ml-text: 69, 121, 152;
    --blue-hl-text: 104,179,221;
    --blue-sh-text: 32, 87, 226;
    --purple-accent-text: 198,194,253;
    --blue-font-text: 230, 227, 225;
    
    --blue-background: rgb(9, 16, 21);
    --blue-background2: rgb(37, 64, 85);
    --blue-foreground: rgb(15, 78, 114);
    --blue-midlight: rgb(69, 121, 152);
    --blue-highlight: rgb(104,179,221);
    --blue-shadow: rgb(32, 87, 226);
    --purple-accent: rgb(198,194,253);
    --blue-font: rgb(230, 227, 225);

    --red-bg-text: 21, 9, 13;
    --red-bg2-text: 63, 26, 38;
    --red-fg-text: 114, 15, 60;
    --red-ml-text: 152, 69, 105;
    --red-hl-text: 221, 104, 151;
    --red-sh-text: 226, 32, 55;
    --yellow-accent-text: 253, 238, 194;
    --red-font-text: 243, 231, 217;

    --red-background: rgb(21, 9, 13);
    --red-background2: rgb(63, 26, 38);
    --red-foreground: rgb(114, 15, 60);
    --red-midlight: rgb(152, 69, 105);
    --red-highlight: rgb(221, 104, 151);
    --red-shadow: rgb(226, 32, 55);
    --yellow-accent: rgb(253, 238, 194);
    --red-font: rgb(243, 231, 217);

    --yellow-bg-text: 21, 21, 9;
    --yellow-bg2-text: 71, 71, 30;
    --yellow-fg-text: 111, 114, 15;
    --yellow-ml-text: 152, 152, 69;
    --yellow-hl-text: 253, 238, 194;
    --yellow-sh-text: 213, 226, 32;
    --red-accent-text: 221, 104, 151;
    --yellow-font-text: 255, 248, 248;

    --yellow-background: rgb(21, 21, 9);
    --yellow-background2: rgb(71, 71, 30);
    --yellow-foreground: rgb(111, 114, 15);
    --yellow-midlight: rgb(152, 152, 69);
    --yellow-highlight: rgba(253, 238, 194);
    --yellow-shadow: rgb(213, 226, 32);
    --red-accent: rgb(221, 104, 151);
    --yellow-font: rgb(255, 248, 248);
}
body {
    background-color: var(--purple-background);
}
[class*="flat-hover"] {
    border-style: solid;
    border-color: transparent;
}
[class*="flat-hover"]:hover {
    border-style: solid;
}
.flat-box-lvl1 {
    background-color: var(--purple-highlight);
    color: var(--purple-background);
    border-color: var(--purple-foreground);
}
.flat-hover-lvl1:hover {
    background-color: var(--blue-accent);
    border-color: var(--blue-foreground);
    color: var(--blue-background2);
}
.flat-box-lvl2 {
    background-color: var(--blue-highlight);
    color: var(--blue-background);
    border-color: var(--blue-foreground);
}
.flat-hover-lvl2:hover {
    background-color: var(--purple-accent);
    border-color: var(--purple-foreground);
    color: var(--purple-background2);
}
.flat-box-lvl3 {
    background-color: var(--red-highlight);
    color: var(--red-background);
    border-color: var(--red-foreground);
}
.flat-hover-lvl3:hover {
    background-color: var(--yellow-accent);
    border-color: var(--yellow-foreground);
    color: var(--yellow-background2);
}
.flat-box-lvl4 {
    background-color: var(--yellow-highlight);
    color: var(--yellow-background);
    border-color: var(--yellow-foreground);
}
.flat-hover-lvl4:hover {
    background-color: var(--red-accent);
    border-color: var(--red-foreground);
    color: var(--red-background2);
}
[class*="inset-hover"], [class*="inset-box"] {
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
}
[class*="inset-hover"]:hover {
    border-width: 1px;
    border-style: solid;
}
.inset-hover-lvl2:hover,
.inset-box-lvl1 {
    background-image: radial-gradient(
        rgba(var(--purple-ml-text), 0.5) 0%,
        rgba(var(--purple-hl-text), 0.3) 30%,
        rgba(var(--purple-bg-text), 0.5)
    );
    border-color: var(--purple-foreground);
    color: var(--purple-font);
    --font-color: var(--purple-font);
}
.outset-hover-lvl2:hover,
.outset-box-lvl1 {
    background-image: radial-gradient(
        var(--purple-midlight),
        var(--purple-highlight),
        var(--purple-foreground)
    );
    border-color: var(--purple-background);
    color: var(--purple-font);
    --font-color: var(--purple-font);
}
.inset-hover-lvl1:hover,
.inset-box-lvl2 {
    background-image: radial-gradient(
        rgba(var(--blue-ml-text), 0.5) 0%,
        rgba(var(--blue-hl-text), 0.3) 30%,
        rgba(var(--blue-bg-text), 0.5)
    );
    border-color: var(--blue-foreground);
    color: var(--blue-font);
    --font-color: var(--blue-font);
}
.outset-hover-lvl1:hover,
.outset-box-lvl2 {
    background-image: radial-gradient(
        var(--blue-midlight),
        var(--blue-highlight),
        var(--blue-background2)
    );
    border-color: var(--blue-background);
    color: var(--blue-background);
    --font-color: var(--blue-background);
}
.inset-hover-lvl4:hover,
.inset-box-lvl3 {
    background-image: radial-gradient(
        rgba(var(--red-ml-text), 0.5) 0%,
        rgba(var(--red-hl-text), 0.3) 30%,
        rgba(var(--red-bg-text), 0.5)
    );
    border-color: var(--red-foreground);
    color: var(--red-font);
    --font-color: var(--red-font);
}
.outset-hover-lvl4:hover,
.outset-box-lvl3 {
    background-image: radial-gradient(
        var(--red-midlight),
        var(--red-highlight),
        var(--red-foreground)
    );
    border-color: var(--red-background);
    color: var(--red-background);
    --font-color: var(--red-background);
}
.inset-hover-lvl3:hover,
.inset-box-lvl4 {
    background-image: radial-gradient(
        rgba(var(--yellow-ml-text), 0.5) 0%,
        rgba(var(--yellow-hl-text), 0.3) 30%,
        rgba(var(--yellow-bg-text), 0.5)
    );
    border-color: var(--yellow-foreground);
    color: var(--yellow-font);
    --font-color: var(--yellow-font);
}
.outset-hover-lvl3:hover,
.outset-box-lvl4 {
    background-image: radial-gradient(
        var(--yellow-midlight),
        var(--yellow-highlight),
        var(--yellow-foreground)
    );
    border-color: var(--yellow-background);
    color: var(--yellow-background);
    --font-color: var(--yellow-background);
}