* {
    --mobile-max: 767px;
    --tablet-min: 768px;
    --tablet-max: 1023px;
    --desktop-min: 1024px;
}
* {
    --hover-transition: background-color 200ms ease;
    --width-mid: width: 960px;
}
[data-theme="dark"]{
    color-scheme: dark;
    --text-link: #528bcc;/*#004DFF;*//*#2869FF*//*71aaeb*/
    --back-but-hover: #677bc4;
    --back-but: #7289da;

    --svg: rgb(144, 148, 153);
    --svg-active: rgb(0, 140, 255);
    --svg-color-gray: #909499;

    --text-alpha-1: #ffffff;
    --text-alpha-2: #dcddde;
    --text-alpha-3: #909499;
    --text-alpha-4: #262626;
    --text-input: #141414;

    --back-alpha-1: #141414;
    --back-alpha-2: #181818;
    --back-alpha-19: #191919;
    --back-alpha-20: #202020;
    --back-alpha-3: #222222;
    --back-alpha-4: #262626;
    --back-alpha-5: #303030;

    --back-op-30: rgba(0,0,0,0.3);
    --back-op-40: rgba(0,0,0,0.4);
    --back-op-50: rgba(0,0,0,0.5);
    --back-op-60: rgba(0,0,0,0.6);
    --back-op-70: rgba(0,0,0,0.7);
    --back-op-80: rgba(0,0,0,0.8);

    --back-a-10: rgba(255,255,255,0.1);
    --back-a-7: rgba(255,255,255,0.07);
    --back-a-5: rgba(255,255,255,0.05);
    --back-a-3: rgba(255,255,255,0.03);

    --button-on: rgba(255, 255, 255, 0.15);
    --button-hover: rgba(255, 255, 255, 0.1);

    --hover-10: rgba(255, 255, 255, 0.1);
    --hover-15: rgba(255, 255, 255, 0.15);

    --negative: #f04747;
    --negative-1: #da7272;
    --negative-2: #f04747;
    --negative-hover: #da7272;
    --negative-selected: #da7272;

    --primary: #0068c9;
    --primary-1: #7289da;
    --primary-2: #0068c9;
    --primary-hover: #0084ff;
    --primary-selected: #0084ff;

    --positive: #48FF48;
    --positive-1: #48FF48;
    --positive-2: #abffab;
    --positive-3: #27ae60;
    --positive-hover: #85ff85;
    --positive-selected: #abffab;

    --gold: gold;
    --gold-1: gold;
    --gold-2: gold;

    --box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
    --drop-boxshadow: 0 0 5px 1px rgba(255, 255, 255, 0.1);
    --element-boxshadow: 0 0 1px 2px rgba(255, 255, 255, 0.1);
    --element-boxshadow-hover: 0 0 1px 2px rgba(255, 255, 255, 0.15);
    --drop-hover: rgba(255, 255, 255, 0.05);
    --hover: rgba(255, 255, 255, 0.05);
    --hover-2: rgba(255, 255, 255, 0.1);
    --hover-3: rgba(255, 255, 255, 0.2);

    --border: 1px solid rgba(255, 255, 255, 0.15);
    --border-2: 1px solid rgba(255, 255, 255, 0.25);
    --border-w: 2px solid rgba(255,255,255, 0.2);
    --border-dashed: 2px dashed rgba(255,255,255, 0.4);
}
[data-theme="dark-amoled"]{
    color-scheme: dark;
    --text-link: #528bcc;/*#004DFF;*//*#2869FF*//*71aaeb*/
    --back-but-hover: #677bc4;
    --back-but: #7289da;

    --svg: rgb(144, 148, 153);
    --svg-active: rgb(0, 140, 255);
    --svg-color-gray: #909499;

    --text-alpha-1: #ffffff;
    --text-alpha-2: #dcddde;
    --text-alpha-3: #909499;
    --text-alpha-4: #262626;
    --text-input: #000;

    --back-alpha-1: #000;
    --back-alpha-2: #080808;
    --back-alpha-19: #090909;
    --back-alpha-20: #101010;
    --back-alpha-3: #121212;
    --back-alpha-4: #161616;
    --back-alpha-5: #202020;

    --back-op-30: rgba(0,0,0,0.3);
    --back-op-40: rgba(0,0,0,0.4);
    --back-op-50: rgba(0,0,0,0.5);
    --back-op-60: rgba(0,0,0,0.6);
    --back-op-70: rgba(0,0,0,0.7);
    --back-op-80: rgba(0,0,0,0.8);

    --back-a-10: rgba(255,255,255,0.1);
    --back-a-7: rgba(255,255,255,0.07);
    --back-a-5: rgba(255,255,255,0.05);
    --back-a-3: rgba(255,255,255,0.03);

    --button-on: rgba(255, 255, 255, 0.15);
    --button-hover: rgba(255, 255, 255, 0.1);

    --hover-10: rgba(255, 255, 255, 0.1);
    --hover-15: rgba(255, 255, 255, 0.15);

    --negative: #f04747;
    --negative-1: #da7272;
    --negative-2: #f04747;
    --negative-hover: #da7272;
    --negative-selected: #da7272;

    --primary: #0068c9;
    --primary-1: #7289da;
    --primary-2: #0068c9;
    --primary-hover: #0084ff;
    --primary-selected: #0084ff;

    --positive: #48FF48;
    --positive-1: #48FF48;
    --positive-2: #abffab;
    --positive-3: #27ae60;
    --positive-hover: #85ff85;
    --positive-selected: #abffab;

    --gold: gold;
    --gold-1: gold;
    --gold-2: gold;

    --box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
    --drop-boxshadow: 0 0 5px 1px rgba(255, 255, 255, 0.1);
    --drop-hover: rgba(255, 255, 255, 0.05);
    --hover: rgba(255, 255, 255, 0.05);
    --hover-2: rgba(255, 255, 255, 0.1);
    --hover-3: rgba(255, 255, 255, 0.2);

    --border: 1px solid rgba(255, 255, 255, 0.15);
    --border-2: 1px solid rgba(255, 255, 255, 0.25);
    --border-w: 2px solid rgba(255,255,255, 0.2);
    --border-dashed: 2px dashed rgba(255,255,255, 0.4);
}

[data-theme="light"]{
    color-scheme: light;
    --text-link: #528bcc;/*#004DFF;*//*#2869FF*/
    --back-but-hover: #677bc4;
    --back-but: #7289da;

    --svg: rgb(144, 148, 153);
    --svg-active: rgb(0, 140, 255);
    --svg-color-gray: #909499;

    --text-alpha-1: #000;
    --text-alpha-2: #404040;
    --text-alpha-3: #808080;
    --text-alpha-4: #262626;
    --text-input: #141414;

    --back-alpha-1: #fefefe;
    --back-alpha-2: #f5f5f5;
    --back-alpha-19: #191919;
    --back-alpha-20: #202020;
    --back-alpha-3: #222222;
    --back-alpha-4: #262626;
    --back-alpha-5: #303030;

    --back-op-30: rgba(255,255,255,0.3);
    --back-op-40: rgba(255,255,255,0.4);
    --back-op-50: rgba(255,255,255,0.5);
    --back-op-60: rgba(255,255,255,0.6);
    --back-op-70: rgba(255,255,255,0.7);
    --back-op-80: rgba(255,255,255,0.8);

    --back-a-10: rgba(0,0,0,0.1);
    --back-a-7: rgba(0,0,0,0.07);
    --back-a-5: rgba(0,0,0,0.05);
    --back-a-3: rgba(0,0,0,0.03);

    --button-on: rgba(0,0,0, 0.15);
    --button-hover: rgba(0,0,0, 0.1);

    --hover-10: rgba(0,0,0, 0.1);
    --hover-15: rgba(0,0,0, 0.15);

    --negative: #f04747;
    --negative-1: #da7272;
    --negative-2: #f04747;
    --negative-hover: #da7272;
    --negative-selected: #da7272;

    --primary: #0068c9;
    --primary-1: #7289da;
    --primary-2: #0068c9;
    --primary-hover: #0084ff;
    --primary-selected: #0084ff;

    --positive: #48FF48;
    --positive-1: #48FF48;
    --positive-2: #abffab;
    --positive-3: #27ae60;
    --positive-hover: #85ff85;
    --positive-selected: #abffab;

    --gold: gold;
    --gold-1: gold;
    --gold-2: gold;

    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --drop-boxshadow: 0 0 5px 1px rgba(0,0,0, 0.1);
    --drop-hover: rgba(0,0,0, 0.05);
    --hover: rgba(0,0,0, 0.05);
    --hover-2: rgba(0,0,0, 0.1);
    --hover-3: rgba(0,0,0, 0.2);

    --border: 1px solid rgba(0,0,0, 0.15);
    --border-2: 1px solid rgba(0,0,0, 0.25);
    --border-w: 2px solid rgba(0,0,0, 0.2);
    --border-dashed: 2px dashed rgba(0,0,0, 0.4);
}

[data-theme="pastel-blue"]{
    color-scheme: light;
    --text-link: #528bcc;
    --back-but-hover: #677bc4;
    --back-but: #7289da;

    --svg: rgb(144, 148, 153);
    --svg-active: rgb(0, 140, 255);
    --svg-color-gray: #909499;

    --text-alpha-1: #082626;
    --text-alpha-2: #205050;
    --text-alpha-3: #556766;
    --text-alpha-4: #262626;
    --text-input: #DFFFFF;

    --back-alpha-1: #DFFFFF;
    --back-alpha-2: #C9ECEC;
    --back-alpha-19: #191919;
    --back-alpha-20: #202020;
    --back-alpha-3: #568080;
    --back-alpha-4: #262626;
    --back-alpha-5: #303030;

    --back-op-30: rgba(255,255,255,0.3);
    --back-op-40: rgba(255,255,255,0.4);
    --back-op-50: rgba(255,255,255,0.5);
    --back-op-60: rgba(255,255,255,0.6);
    --back-op-70: rgba(255,255,255,0.7);
    --back-op-80: rgba(255,255,255,0.8);

    --back-a-10: rgba(0,0,0,0.1);
    --back-a-7: rgba(0,0,0,0.07);
    --back-a-5: rgba(0,0,0,0.05);
    --back-a-3: rgba(0,0,0,0.03);

    --button-on: rgba(0,0,0, 0.15);
    --button-hover: rgba(0,0,0, 0.1);

    --hover-10: rgba(0,0,0, 0.1);
    --hover-15: rgba(0,0,0, 0.15);

    --negative: #f04747;
    --negative-1: #da7272;
    --negative-2: #f04747;
    --negative-hover: #da7272;
    --negative-selected: #da7272;

    --primary: #0068c9;
    --primary-1: #7289da;
    --primary-2: #0068c9;
    --primary-hover: #0084ff;
    --primary-selected: #0084ff;

    --positive: #48FF48;
    --positive-1: #48FF48;
    --positive-2: #abffab;
    --positive-3: #27ae60;
    --positive-hover: #85ff85;
    --positive-selected: #abffab;

    --gold: gold;
    --gold-1: gold;
    --gold-2: gold;

    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --drop-boxshadow: 0 0 5px 1px rgba(0,0,0, 0.1);
    --drop-hover: rgba(0,0,0, 0.05);
    --hover: rgba(0,0,0, 0.05);
    --hover-2: rgba(0,0,0, 0.1);
    --hover-3: rgba(0,0,0, 0.2);
    
    --border: 1px solid rgba(0,0,0, 0.15);
    --border-2: 1px solid rgba(0,0,0, 0.25);
    --border-w: 2px solid rgba(0,0,0, 0.2);
    --border-dashed: 2px dashed rgba(0,0,0, 0.4);
}