:root {
    --primary: #714cc8;
    --secondary: #5d6092;
    --background: #1c1c26;
    --color: #fefefe;
    --accent-color: #2f3040;
    --hov-accent-color: #3e3f54;
    --hov-color: #4b4c66;
    --link-color: #bea2ff;
    --attachment-background-color: #30215490;
    --attachment-color: #bea2ff;
    --attachment-background-color-hover: #714cc8;
    --attachment-color-hover: #fefefe;
    --button-color: #babbe2;
    --hov-button-color: #fefefe;
    --modal-color: #2f3040;
    --modal-button-color: #4b4c66;
    --hov-modal-button-color: #626386;

    --blue: #00abd2;
    --green: #32E875;
    --red: #cc2936;
    --magenta: #F04290;
    --transition: all 0.05s ease;
    --border: none;
    --border-radius: 5px;
    --button-radius: 5px;
    --margin: 10px;
    --text-margin: 10px;
    --padding: 10px;
    --button-padding: 12px;
    --button-margin: 10px;
    --color-scheme: dark;
}

.dark-theme {
    --primary: #714cc8;
    --secondary: #5d6092;
    --background: #1c1c26;
    --color: #fefefe;
    --accent-color: #2f3040;
    --hov-accent-color: #3e3f54;
    --hov-color: #4b4c66;
    --link-color: #bea2ff;
    --attachment-background-color: #5b409b90;
    --attachment-color: #bea2ff;
    --attachment-background-color-hover: #714cc8;
    --attachment-color-hover: #fefefe;
    --button-color: #babbe2;
    --hov-button-color: #fefefe;
    --modal-color: #2f3040;
    --modal-button-color: #4b4c66;
    --hov-modal-button-color: #626386;

    --blue: #00abd2;
    --green: #32E875;
    --red: #cc2936;
    --magenta: #F04290;
    --color-scheme: dark;
}

.light-theme {
    --primary: #714cc8;
    --background: #f1f0fb;
    --color: #43485b;
    --accent-color: #dad9e9;
    --hov-accent-color: #dfdeed;
    --hov-color: #e6e3f0;
    --link-color: #714cc8;
    --attachment-background-color: #d4c1ff;
    --attachment-color: #513593;
    --attachment-background-color-hover: #b190fe;
    --attachment-color-hover: #fefefe;
    --button-color: #a49faf;
    --hov-button-color: #7b7783;
    --modal-color: #dad9e9;
    --modal-button-color: #c6c5d6;
    --hov-modal-button-color: #cdcbdb;

    --blue: #00abd2;
    --green: #32E875;
    --red: #cc2936;
    --magenta: #F04290;
    --color-scheme: light;
}

.softblue-theme {
    --primary: #15a4c1;
    --secondary: #0f788e;
    --background: #1c1f26;
    --color: #fefefe;
    --accent-color: #2f3540;
    --hov-accent-color: #414959;
    --hov-color: #414959;
    --link-color: #00abd2;
    --attachment-background-color: #094c5b;
    --attachment-color: #15a4c1;
    --attachment-background-color-hover: #15a4c1;
    --attachment-color-hover: #fefefe;
    --button-color: #a5abb3;
    --hov-button-color: #fefefe;
    --modal-color: #3a3d43;
    --modal-button-color: #4a4d56;
    --hov-modal-button-color: #636774;
    --color-scheme: dark;
}

.blurple-theme {
    --primary: #5765f2;
    --background: #121117;
    --color: #f5f8fb;
    --accent-color: #22202c;
    --hov-accent-color: #2e2b3a;
    --hov-color: #2e2b3a;
    --link-color: #00abd2;
    --attachment-background-color: #1a1e49;
    --attachment-color: #a0a4d1;
    --attachment-background-color-hover: #5865f2;
    --attachment-color-hover: #fefefe;
    --button-color: #9792a9;
    --hov-button-color: #f6f5fb;
    --modal-color: #15141a;
    --modal-button-color: #24222f;
    --hov-modal-button-color: #302e3f;
    
    --blue: #00abd2;
    --green: #32E875;
    --red: #cc2936;
    --magenta: #F04290;
    --color-scheme: dark;
}

.oled-theme {
    --background: #000;
    --color: #fefefe;
    --accent-color: #0d0e0f;
    --hov-accent-color: #111214;
    --hov-color: #17181a;
    --link-color: #00abd2;
    --attachment-background-color: #30215490;
    --attachment-color: #bea2ff;
    --attachment-background-color-hover: #714cc8;
    --attachment-color-hover: #fefefe;
    --button-color: #a5abb3;
    --hov-button-color: #fefefe;
    --modal-color: #000;
    --modal-button-color: #101011;
    --hov-modal-button-color: #1b1b1d;

    --blue: #00abd2;
    --green: #32E875;
    --red: #cc2936;
    --magenta: #F04290;
    --color-scheme: dark;
}

.contrast-theme {
    --primary: #00f;
    
    --background: #0c0c0c;
    --color: #f0f0f0;
    --accent-color: #0c0c0c;
    --hov-accent-color: #0c0c0c;
    --hov-color: #00f;
    --link-color: #0ff;
    --attachment-background-color: #00f;
    --attachment-color: #fff;
    --attachment-background-color-hover: #00f;
    --attachment-color-hover: #fff;
    --button-color: #f0f0f0;
    --hov-button-color: #f0f0f0;
    --modal-color: #0c0c0c;
    --modal-button-color: #0c0c0c;
    --hov-modal-button-color: #00f;

    --blue: #0ff;
    --green: #0f0;
    --red: #f00;
    --magenta: #f0f;
    --color-scheme: dark;
}

.grain-theme {
    --primary: #776d67;
    
    --background: #0b0b0b;
    --color: #f0f0f0;
    --accent-color: #111;
    --hov-accent-color: #1c1c1c;
    --hov-color: #252525;
    --link-color: #00abd2;
    --attachment-background-color: #413d3a;
    --attachment-color: #afa7a1;
    --attachment-background-color-hover: #776d67;
    --attachment-color-hover: #fff;
    --button-color: #afa7a1;
    --hov-button-color: #f0f0f0;
    --modal-color: #111;
    --modal-button-color: #1c1c1c;
    --hov-modal-button-color: #252525;

    --blue: #00abd2;
    --green: #32E875;
    --red: #cc2936;
    --magenta: #F04290;
    --color-scheme: dark;
}

.grip-theme {
    --primary: #f46f16;
    
    --background: #111114;
    --color: #f0f0f0;   
    --accent-color: #1f1e24;
    --hov-accent-color: #32313a;
    --hov-color: #4a4854;
    --link-color: #00abd2;
    --attachment-background-color: #5b409b90;
    --attachment-color: #bea2ff;
    --attachment-background-color-hover: #714cc8;
    --attachment-color-hover: #fefefe;
    --button-color: #a6a2ba;
    --hov-button-color: #f0f0f0;
    --modal-color: #1f1e24;
    --modal-button-color: #32313a;
    --hov-modal-button-color: #4a4854;

    --blue: #00abd2;
    --green: #32E875;
    --red: #cc2936;
    --magenta: #F04290;
    --color-scheme: dark;
}

.scratch-theme {
    --primary: #714cc8;
    --background: #f1f0fb;
    --color: #43485b;
    --accent-color: #dad9e9;
    --hov-accent-color: #dfdeed;
    --hov-color: #e6e3f0;
    --link-color: #714cc8;
    --attachment-background-color: #d4c1ff;
    --attachment-color: #513593;
    --attachment-background-color-hover: #b190fe;
    --attachment-color-hover: #fefefe;
    --button-color: #a49faf;
    --hov-button-color: #7b7783;
    --modal-color: #dad9e9;
    --modal-button-color: #c6c5d6;
    --hov-modal-button-color: #cdcbdb;

    --blue: #00abd2;
    --green: #32E875;
    --red: #cc2936;
    --magenta: #F04290;
    --color-scheme: light;
}

.cosmic-theme {
    --primary: #8f8b7c;
    --background: #fff8e7;
    --color: #413f38;
    --accent-color: #f1ead9;
    --hov-accent-color: #d8d0bd;
    --hov-color: #e6ddc9;
    --link-color: #ad8335;
    --attachment-background-color: #e7d092;
    --attachment-color: #9d7222;
    --attachment-background-color-hover: #ad8335;
    --attachment-color-hover: #fefefe;
    --button-color: #8f8b7c;
    --hov-button-color: #413f38;
    --modal-color: #fff8e7;
    --modal-button-color: #f1ead9;
    --hov-modal-button-color: #e1daca;

    --blue: #00abd2;
    --green: #32E875;
    --red: #cc2936;
    --magenta: #F04290;
    --color-scheme: light;
}

.roarer-theme {
    --primary: #25a7de;
    --background: #020617;
    --color: #e2e8f0;
    --accent-color: #1e293b;
    --hov-accent-color: #1e293b;
    --hov-color: #1e293b;
    --link-color: #38bdf8;
    --attachment-background-color: #1e293b;
    --attachment-color: #38bdf8;
    --attachment-background-color-hover: #1e293b;
    --attachment-color-hover: #e2e8f0;
    --button-color: #e2e8f0;
    --hov-button-color: #e2e8f0;
    --modal-color: #020617;
    --modal-button-color: #1e293b;
    --hov-modal-button-color: #1e293b;
    --border: none;
    --border-radius: 12px;
    --button-radius: 12px;
    --margin: 8px;
    --text-margin: 0px;
    --padding: 8px;
    --button-padding: 8px;
    --button-margin: 8px;
    --color-scheme: dark;
}

.bsky-theme {
    --primary: #5677bd;
    --background: #050812;
    --color: #fefefe;
    --accent-color: #0c121e;
    --hov-accent-color: #111829;
    --hov-color: #162035;
    --link-color: #7b9adc;
    --attachment-background-color: #273656;
    --attachment-color: #7b9adc;
    --attachment-background-color-hover: #5677bd;
    --attachment-color-hover: #fefefe;
    --button-color: #5677bd;
    --hov-button-color: #fefefe;
    --modal-color: #0c121e;
    --modal-button-color: #162035;
    --hov-modal-button-color: #273656;

    --blue: #00abd2;
    --green: #32E875;
    --red: #cc2936;
    --magenta: #F04290;
    --color-scheme: dark;
}

.quake-pro-theme {
    --border: none;
    --border-radius: 5px;
    --button-radius: 5px;
    --margin: 8px;
    --text-margin: 4px;
    --padding: 4px;
    --button-padding: 8px;
    --button-margin: 8px;
}

.flamingo-theme {
    --primary: #cc2936;
    --background: #0c0303;
    --color: #f5f8fb;
    --accent-color: #200a0f;
    --hov-accent-color: #250c12;
    --hov-color: #3a121c;
    --link-color: #00abd2;
    --attachment-background-color: #1b1e49;
    --attachment-color: #a0a4d1;
    --attachment-background-color-hover: #7236f9;
    --attachment-color-hover: #fefefe;
    --button-color: #7a2c3f;
    --hov-button-color: #f6f5fb;
    --modal-color: #0c0303;
    --modal-button-color: #200a0f;
    --hov-modal-button-color: #341019;
    
    --blue: #00abd2;
    --green: #32E875;
    --red: #cc2936;
    --magenta: #F04290;
    --color-scheme: dark;
}

.glight-theme {
    --accent-color: #dddddd50;
    --hov-accent-color: #dddddd80;
    --hov-color: #dddddd80;
    --background: #ffffff80;
    --button-color: #efefefb6;
    --modal-color: #efefef47;
    --modal-button-color: #dddddd80;
    --hov-modal-button-color: #dddddd80;
    --border-radius: 5px;
    --button-radius: 5px;
    --glass-border: 1px solid #ffffff80;
}

.gdark-theme {
    --accent-color: #3c3c3c50;
    --hov-accent-color: #4f4f4f50;
    --hov-color: #3c3c3c80;
    --background: #00000020;
    --button-color: #ffffff73;
    --modal-color: #4f4f4f50;
    --modal-button-color: #4f4f4f50;
    --hov-modal-button-color: #4f4f4f50;
    --border-radius: 5px;
    --button-radius: 5px;
    --glass-border: 1px solid #ffffff20;
}

.oldlight-theme {
    --background: #fefefe;
    --color: #383a41;
    --accent-color: #dbe0e8;
    --hov-accent-color: #d2d6dd;
    --hov-color: #e7eaee;
    --link-color: #5023b6;
    --attachment-background-color: #d4c1ff;
    --attachment-color: #513593;
    --attachment-background-color-hover: #b190fe;
    --attachment-color-hover: #fefefe;
    --button-color: #676d7a;
    --hov-button-color: #383a41;
    --modal-color: #fefefe;
    --modal-button-color: #dbe0e8;
    --hov-modal-button-color: #c9cdd4;

    --blue: #00abd2;
    --green: #32E875;
    --red: #cc2936;
    --magenta: #F04290;
    --color-scheme: light;
}

.old-theme {
    --primary: #714cc8;
    --secondary: #b190fe;
    --background: #1a1b1e;
    --color: #fefefe;
    --accent-color: #3a3d43;
    --hov-accent-color: #323439;
    --hov-color: #4a4d56;
    --link-color: #00abd2;
    --attachment-background-color: #3c286b;
    --attachment-color: #b190fe;
    --attachment-background-color-hover: #b190fe;
    --attachment-color-hover: #fefefe;
    --button-color: #a5abb3;
    --hov-button-color: #fefefe;
    --modal-color: #3a3d43;
    --modal-button-color: #4a4d56;
    --hov-modal-button-color: #636774;

    --blue: #00abd2;
    --green: #32E875;
    --red: #cc2936;
    --magenta: #F04290;
    --transition: all 0.05s ease;
    --border: none;
    --border-radius: 5px;
    --button-radius: 5px;
    --margin: 10px;
    --text-margin: 10px;
    --padding: 10px;
    --button-padding: 12px;
    --button-margin: 10px;
    --color-scheme: dark;
}

.theme-buttons-inner {
    display: flex;
    align-items: center;
    flex-flow: wrap;
}

.theme-button {
    width: 6em;
    height: 6em;
    border-radius: 100%;
    margin: 5px;
    color: var(--color);
    border: 1px solid var(--background);
    background: var(--background);
    box-shadow: 0px 5px 10px #00000050;
}

.selected {
    border: 3px solid var(--accent-color);
    box-shadow: none;
}