/* background color theme */
html[data-theme="bg0"] {
  --color-bg-0: #325471;
  --color-bg-1: #2d4b65;
  --color-bg-2: #284259;
  --color-bg-3: #223a4e;
  --color-bg-4: #1d3142;
  --color-bg-5: #0d171f;
  --color-bg-6: #3690c4;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #0a112466;

  --color-bg-9: #3254a3;
  --color-bg-10: #162548;

  --color-bg-11: #22396f;
  --color-bg-12: #b8c7e9;
  --color-bg-13: #9cbad3;

  --color-bg-14: #111e3f;
  --color-bg-15: #436ac5;
  --color-bg-16: #b2c7e9;
  --color-bg-17: #dfe6f5;

  --color-font-1: #90b1ce;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #5ba6d2;
  --color-font-5: #76b5d9;
  --color-font-6: #55a6d2;
  --color-font-7: #cbdbe8;
  --color-font-8: #cadbe8;

  --color-border-1: #9cbad3;
  --color-border-2: #5ba6d2;
  --color-border-2-75: #5ba6d2bf;
}

html[data-theme="bg1"] {
  --color-bg-0: #7c5747;
  --color-bg-1: #714f41;
  --color-bg-2: #66483b;
  --color-bg-3: #5c4034;
  --color-bg-4: #51392e;
  --color-bg-5: #30221c;
  --color-bg-6: #a45765;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #160b0966;

  --color-bg-9: #a46b47;
  --color-bg-10: #513523;

  --color-bg-11: #754c32;
  --color-bg-12: #ead8cd;
  --color-bg-13: #d7c2b8;

  --color-bg-14: #2e1713;
  --color-bg-15: #bb8563;
  --color-bg-16: #e4d8cd;
  --color-bg-17: #f9f4f1;

  --color-font-1: #d0b8ae;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #b77783;
  --color-font-5: #c38d97;
  --color-font-6: #b17783;
  --color-font-7: #efe7e4;
  --color-font-8: #eee7e4;

  --color-border-1: #d7c2b8;
  --color-border-2: #b77783;
  --color-border-2-75: #b77783bf;
}

html[data-theme="bg2"] {
  --color-bg-0: #92394f;
  --color-bg-1: #863448;
  --color-bg-2: #7a2f42;
  --color-bg-3: #6d2b3b;
  --color-bg-4: #612635;
  --color-bg-5: #3c1821;
  --color-bg-6: #d55890;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #11050966;

  --color-bg-9: #963143;
  --color-bg-10: #3c141b;

  --color-bg-11: #63202c;
  --color-bg-12: #e5aeb8;
  --color-bg-13: #e2b5c0;

  --color-bg-14: #2b0d17;
  --color-bg-15: #bc3e54;
  --color-bg-16: #deaeb8;
  --color-bg-17: #f1d5da;

  --color-font-1: #dda9b6;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #df81ab;
  --color-font-5: #e69cbd;
  --color-font-6: #d981ab;
  --color-font-7: #f5e6ea;
  --color-font-8: #f4e6ea;

  --color-border-1: #e2b5c0;
  --color-border-2: #df81ab;
  --color-border-2-75: #df81abbf;
}

html[data-theme="bg3"] {
  --color-bg-0: #325471;
  --color-bg-1: #2d4b65;
  --color-bg-2: #284259;
  --color-bg-3: #223a4e;
  --color-bg-4: #1d3142;
  --color-bg-5: #0d171f;
  --color-bg-6: #3690c4;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #0a112466;

  --color-bg-9: #3254a3;
  --color-bg-10: #162548;

  --color-bg-11: #22396f;
  --color-bg-12: #b8c7e9;
  --color-bg-13: #9cbad3;

  --color-bg-14: #111e3f;
  --color-bg-15: #436ac5;
  --color-bg-16: #b2c7e9;
  --color-bg-17: #dfe6f5;

  --color-font-1: #90b1ce;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #5ba6d2;
  --color-font-5: #76b5d9;
  --color-font-6: #55a6d2;
  --color-font-7: #cbdbe8;
  --color-font-8: #cadbe8;

  --color-border-1: #9cbad3;
  --color-border-2: #5ba6d2;
  --color-border-2-75: #5ba6d2bf;
}

html[data-theme="bg4"] {
  --color-bg-0: #433050;
  --color-bg-1: #3a2a45;
  --color-bg-2: #31233b;
  --color-bg-3: #281d30;
  --color-bg-4: #1f1626;
  --color-bg-5: #050306;
  --color-bg-6: #ff7bd7;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #18001f66;

  --color-bg-9: #9717ca;
  --color-bg-10: #470b5f;

  --color-bg-11: #69108d;
  --color-bg-12: #e4b6f7;
  --color-bg-13: #aa90bc;

  --color-bg-14: #320041;
  --color-bg-15: #b22de7;
  --color-bg-16: #dbb6f7;
  --color-bg-17: #f5e4fc;

  --color-font-1: #a285b6;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #ffaee6;
  --color-font-5: #ffd0f1;
  --color-font-6: #e9aee5;
  --color-font-7: #cabad6;
  --color-font-8: #c9bad6;

  --color-border-1: #aa90bc;
  --color-border-2: #ffaee6;
  --color-border-2-75: #ffaee6bf;
}

html[data-theme="bg5"] {
  --color-bg-0: #b05b18;
  --color-bg-1: #a15316;
  --color-bg-2: #924c14;
  --color-bg-3: #834412;
  --color-bg-4: #743c10;
  --color-bg-5: #47250a;
  --color-bg-6: #e9b641;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #08050166;

  --color-bg-9: #b05f14;
  --color-bg-10: #452508;

  --color-bg-11: #733e0d;
  --color-bg-12: #f4c69c;
  --color-bg-13: #f2c5a2;

  --color-bg-14: #261805;
  --color-bg-15: #de7819;
  --color-bg-16: #edc69c;
  --color-bg-17: #f9e1ca;

  --color-font-1: #f0bc93;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #eec86f;
  --color-font-5: #f2d38d;
  --color-font-6: #e8c86f;
  --color-font-7: #faeade;
  --color-font-8: #f9eade;

  --color-border-1: #f2c5a2;
  --color-border-2: #eec86f;
  --color-border-2-75: #eec86fbf;
}

html[data-theme="bg6"] {
  --color-bg-0: #7b713c;
  --color-bg-1: #706736;
  --color-bg-2: #645c31;
  --color-bg-3: #59522b;
  --color-bg-4: #4d4726;
  --color-bg-5: #2b2815;
  --color-bg-6: #d5ca3d;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #14130566;

  --color-bg-9: #91892f;
  --color-bg-10: #373412;

  --color-bg-11: #5e581e;
  --color-bg-12: #e3dea9;
  --color-bg-13: #d7d0ac;

  --color-bg-14: #2f2d0c;
  --color-bg-15: #b8ad3b;
  --color-bg-16: #dddea9;
  --color-bg-17: #f0edcf;

  --color-font-1: #d1c9a1;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #ded567;
  --color-font-5: #e4dd83;
  --color-font-6: #d8d567;
  --color-font-7: #edeada;
  --color-font-8: #eceada;

  --color-border-1: #d7d0ac;
  --color-border-2: #ded567;
  --color-border-2-75: #ded567bf;
}

html[data-theme="bg7"] {
  --color-bg-0: #526863;
  --color-bg-1: #4b5e5a;
  --color-bg-2: #435551;
  --color-bg-3: #3c4b48;
  --color-bg-4: #34423f;
  --color-bg-5: #1e2524;
  --color-bg-6: #9ae290;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #16373166;

  --color-bg-9: #4c827c;
  --color-bg-10: #203734;

  --color-bg-11: #335753;
  --color-bg-12: #c0dad7;
  --color-bg-13: #bccac7;

  --color-bg-14: #204f47;
  --color-bg-15: #7fb5ae;
  --color-bg-16: #dadad7;
  --color-bg-17: #e0edeb;

  --color-font-1: #b2c3bf;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #bfedb8;
  --color-font-5: #d7f4d3;
  --color-font-6: #b9edb8;
  --color-font-7: #e2e8e7;
  --color-font-8: #e1e8e7;

  --color-border-1: #bccac7;
  --color-border-2: #bfedb8;
  --color-border-2-75: #bfedb8bf;
}

html[data-theme="bg8"] {
  --color-bg-0: #3b617a;
  --color-bg-1: #35536f;
  --color-bg-2: #303e63;
  --color-bg-3: #272892;
  --color-bg-4: #25264c;
  --color-bg-5: #2a2014;
  --color-bg-6: #b6a353;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #120e0666;

  --color-bg-9: #443a7d;
  --color-bg-10: #272892;

  --color-bg-11: #4f4224;
  --color-bg-12: #d8cbab;
  --color-bg-13: #d6c3ab;

  --color-bg-14: #2c220f;
  --color-bg-15: #a0864a;
  --color-bg-16: #d2cbab;
  --color-bg-17: #e8e0ce;

  --color-font-1: #d1bb9f;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #c5b677;
  --color-font-5: #cfc38f;
  --color-font-6: #bfb677;
  --color-font-7: #ece4d9;
  --color-font-8: #ebe4d9;

  --color-border-1: #d6c3ab;
  --color-border-2: #c5b677;
  --color-border-2-75: #c5b677bf;
}

html[data-theme="bg9"] {
  --color-bg-0: #4f753b;
  --color-bg-1: #476a35;
  --color-bg-2: #405e30;
  --color-bg-3: #38532a;
  --color-bg-4: #304824;
  --color-bg-5: #1a2613;
  --color-bg-6: #7cc974;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #0b150866;

  --color-bg-9: #4f933b;
  --color-bg-10: #213e19;

  --color-bg-11: #356228;
  --color-bg-12: #c1e2b8;
  --color-bg-13: #b7d3a9;

  --color-bg-14: #182e11;
  --color-bg-15: #63b74a;
  --color-bg-16: #bbe2b8;
  --color-bg-17: #e1f1dc;

  --color-font-1: #aece9d;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #9fd799;
  --color-font-5: #b6e1b1;
  --color-font-6: #99d799;
  --color-font-7: #ddead6;
  --color-font-8: #dcead6;

  --color-border-1: #b7d3a9;
  --color-border-2: #9fd799;
  --color-border-2-75: #9fd799bf;
}

html[data-theme="bg10"] {
  --color-bg-0: #684c70;
  --color-bg-1: #634566;
  --color-bg-2: #5c3e56;
  --color-bg-3: #52374f;
  --color-bg-4: #473145;
  --color-bg-5: #21291c;
  --color-bg-6: #c064c0;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #09100866;

  --color-bg-9: #6b4481;
  --color-bg-10: #311b33;

  --color-bg-11: #542d54;
  --color-bg-12: #b9d9b8;
  --color-bg-13: #c1cfb9;

  --color-bg-14: #211327;
  --color-bg-15: #9056a2;
  --color-bg-16: #b3d9b8;
  --color-bg-17: #daebd9;

  --color-font-1: #b8c8af;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #c188cf;
  --color-font-5: #d7a0d9;
  --color-font-6: #cf88bd;
  --color-font-7: #e5ebe1;
  --color-font-8: #e4ebe1;

  --color-border-1: #cfb9cf;
  --color-border-2: #cf88c9;
  --color-border-2-75: #cf88cfbf;
}

html[data-theme="bg11"] {
  --color-bg-0: #840943;
  --color-bg-1: #74083b;
  --color-bg-2: #640733;
  --color-bg-3: #54062b;
  --color-bg-4: #440523;
  --color-bg-5: #15010a;
  --color-bg-6: #de09a7;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #14010766;

  --color-bg-9: #ac0943;
  --color-bg-10: #3b0317;

  --color-bg-11: #6b062a;
  --color-bg-12: #f988b0;
  --color-bg-13: #f465a8;

  --color-bg-14: #340313;
  --color-bg-15: #dc0c56;
  --color-bg-16: #f388b0;
  --color-bg-17: #fbb9d0;

  --color-font-1: #f3559f;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #f624c0;
  --color-font-5: #f745c9;
  --color-font-6: #f024c0;
  --color-font-7: #f9a4cc;
  --color-font-8: #f8a4cc;

  --color-border-1: #f465a8;
  --color-border-2: #f624c0;
  --color-border-2-75: #f624c0bf;
}

html[data-theme="bg12"] {
  --color-bg-0: #6d2324;
  --color-bg-1: #601f20;
  --color-bg-2: #531b1c;
  --color-bg-3: #461717;
  --color-bg-4: #3a1213;
  --color-bg-5: #130606;
  --color-bg-6: #920c2a;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #14030366;

  --color-bg-9: #af2021;
  --color-bg-10: #4a0e0e;

  --color-bg-11: #761516;
  --color-bg-12: #f0abac;
  --color-bg-13: #d88486;

  --color-bg-14: #320707;
  --color-bg-15: #d82a2b;
  --color-bg-16: #eaabac;
  --color-bg-17: #f8d6d7;

  --color-font-1: #d37879;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #c11038;
  --color-font-5: #f47692;
  --color-font-6: #bc1038;
  --color-font-7: #e8b8b9;
  --color-font-8: #e7b8b9;

  --color-border-1: #d88486;
  --color-border-2: #c11038;
  --color-border-2-75: #c11038bf;
}

html[data-theme="bg13"] {
  --color-bg-0: #414c6a;
  --color-bg-1: #3b445f;
  --color-bg-2: #343d55;
  --color-bg-3: #2e354a;
  --color-bg-4: #272e40;
  --color-bg-5: #141720;
  --color-bg-6: #4754c5;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #0a0c1866;

  --color-bg-9: #3c4786;
  --color-bg-10: #171b34;

  --color-bg-11: #272e57;
  --color-bg-12: #b2b8dc;
  --color-bg-13: #abb4cc;

  --color-bg-14: #141830;
  --color-bg-15: #4c5aa9;
  --color-bg-16: #acb8dc;
  --color-bg-17: #d5d8ec;

  --color-font-1: #a1abc5;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #6e78d1;
  --color-font-5: #8890d9;
  --color-font-6: #6878d1;
  --color-font-7: #d5dae6;
  --color-font-8: #d4dae6;

  --color-border-1: #abb4cc;
  --color-border-2: #6e78d1;
  --color-border-2-75: #6e78d1bf;
}

html[data-theme="bg14"] {
  --color-bg-0: #683d47;
  --color-bg-1: #5d3740;
  --color-bg-2: #533038;
  --color-bg-3: #482a31;
  --color-bg-4: #3d242a;
  --color-bg-5: #1d1114;
  --color-bg-6: #c55294;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #0f060b66;

  --color-bg-9: #903d6f;
  --color-bg-10: #3c1a2f;

  --color-bg-11: #60294a;
  --color-bg-12: #e1b8d1;
  --color-bg-13: #cba6af;

  --color-bg-14: #27101d;
  --color-bg-15: #b34d8b;
  --color-bg-16: #dbb8d1;
  --color-bg-17: #f0dce8;

  --color-font-1: #c59ba5;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #d278ac;
  --color-font-5: #da92bb;
  --color-font-6: #cc78ac;
  --color-font-7: #e4d1d5;
  --color-font-8: #e3d1d5;

  --color-border-1: #cba6af;
  --color-border-2: #d278ac;
  --color-border-2-75: #d278acbf;
}

html[data-theme="bg15"] {
  --color-bg-0: #3f6864;
  --color-bg-1: #395d5a;
  --color-bg-2: #325350;
  --color-bg-3: #2c4845;
  --color-bg-4: #253e3b;
  --color-bg-5: #121e1d;
  --color-bg-6: #66cea3;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #02040366;

  --color-bg-9: #3f9a82;
  --color-bg-10: #1c463b;

  --color-bg-11: #2b6a59;
  --color-bg-12: #c0e5db;
  --color-bg-13: #a8cbc7;

  --color-bg-14: #0d1b14;
  --color-bg-15: #53b99e;
  --color-bg-16: #bae5db;
  --color-bg-17: #e4f4f0;

  --color-font-1: #9ec4c0;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #8ddaba;
  --color-font-5: #a6e3ca;
  --color-font-6: #87daba;
  --color-font-7: #d3e4e3;
  --color-font-8: #d2e4e3;

  --color-border-1: #a8cbc7;
  --color-border-2: #8ddaba;
  --color-border-2-75: #8ddababf;
}

html[data-theme="bg16"] {
  --color-bg-0: #673030;
  --color-bg-1: #5b2b2b;
  --color-bg-2: #502525;
  --color-bg-3: #442020;
  --color-bg-4: #391a1a;
  --color-bg-5: #160a0a;
  --color-bg-6: #d8664e;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #17070766;

  --color-bg-9: #973a3a;
  --color-bg-10: #411919;

  --color-bg-11: #662727;
  --color-bg-12: #e4b9b9;
  --color-bg-13: #ce9595;

  --color-bg-14: #310f0f;
  --color-bg-15: #ba4a4a;
  --color-bg-16: #dfb9b9;
  --color-bg-17: #f2dede;

  --color-font-1: #c88a8a;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #e18a78;
  --color-font-5: #e7a294;
  --color-font-6: #db8a78;
  --color-font-7: #e3c4c4;
  --color-font-8: #e2c4c4;

  --color-border-1: #ce9595;
  --color-border-2: #e18a78;
  --color-border-2-75: #e18a78bf;
}

html[data-theme="bg17"] {
  --color-bg-0: #675b2f;
  --color-bg-1: #5b512a;
  --color-bg-2: #504624;
  --color-bg-3: #443c1f;
  --color-bg-4: #38321a;
  --color-bg-5: #15130a;
  --color-bg-6: #9bb647;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #11110a66;

  --color-bg-9: #838356;
  --color-bg-10: #3b3b27;

  --color-bg-11: #5a5a3b;
  --color-bg-12: #dcdcc9;
  --color-bg-13: #cec294;

  --color-bg-14: #262617;
  --color-bg-15: #9f9f6d;
  --color-bg-16: #c7dcc9;
  --color-bg-17: #f0f0e8;

  --color-font-1: #c9bb88;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #afc56b;
  --color-font-5: #bccf83;
  --color-font-6: #aac56b;
  --color-font-7: #e3dcc3;
  --color-font-8: #e2dcc3;

  --color-border-1: #cec294;
  --color-border-2: #afc56b;
  --color-border-2-75: #afc56bbf;
}

html[data-theme="bg18"] {
  --color-bg-0: #151a6f;
  --color-bg-1: #12153c;
  --color-bg-2: #003f94;
  --color-bg-3: #0060e2;
  --color-bg-4: #06071c;
  --color-bg-5: #15130a;
  --color-bg-6: #9bb647;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #11110a66;

  --color-bg-9: #00a0c2;
  --color-bg-10: #39368e;

  --color-bg-11: #5a5a3b;
  --color-bg-12: #dcdcc9;
  --color-bg-13: #cec294;

  --color-bg-14: #262617;
  --color-bg-15: #9f9f6d;
  --color-bg-16: #c7dcc9;
  --color-bg-17: #f0f0e8;

  --color-font-1: ##6368a4;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #afc56b;
  --color-font-5: #bccf83;
  --color-font-6: #3ad4ff;
  --color-font-7: #e3dcc3;
  --color-font-8: #e2dcc3;

  --color-border-1: #cec294;
  --color-border-2: #afc56b;
  --color-border-2-75: #afc56bbf;
}

html[data-theme="bg19"] {
  --color-bg-0: #7c5747;
  --color-bg-1: #714f41;
  --color-bg-2: #66483b;
  --color-bg-3: #5c4034;
  --color-bg-4: #51392e;
  --color-bg-5: #30221c;
  --color-bg-6: #a45765;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #160b0966;

  --color-bg-9: #a46b47;
  --color-bg-10: #513523;

  --color-bg-11: #754c32;
  --color-bg-12: #ead8cd;
  --color-bg-13: #d7c2b8;

  --color-bg-14: #2e1713;
  --color-bg-15: #bb8563;
  --color-bg-16: #e4d8cd;
  --color-bg-17: #f9f4f1;

  --color-font-1: #d0b8ae;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #b77783;
  --color-font-5: #c38d97;
  --color-font-6: #b17783;
  --color-font-7: #efe7e4;
  --color-font-8: #eee7e4;

  --color-border-1: #d7c2b8;
  --color-border-2: #b77783;
  --color-border-2-75: #b77783bf;
}

html[data-theme="bg20"] {
  --color-bg-0: #7c5747;
  --color-bg-1: #714f41;
  --color-bg-2: #66483b;
  --color-bg-3: #5c4034;
  --color-bg-4: #51392e;
  --color-bg-5: #30221c;
  --color-bg-6: #a45765;
  --color-bg-7: #ff7e00;
  --color-bg-8-40: #160b0966;

  --color-bg-9: #a46b47;
  --color-bg-10: #513523;

  --color-bg-11: #754c32;
  --color-bg-12: #ead8cd;
  --color-bg-13: #d7c2b8;

  --color-bg-14: #2e1713;
  --color-bg-15: #bb8563;
  --color-bg-16: #e4d8cd;
  --color-bg-17: #f9f4f1;

  --color-font-1: #d0b8ae;
  --color-font-2: #ffc600;
  --color-font-3: #ff7e00;
  --color-font-4: #b77783;
  --color-font-5: #c38d97;
  --color-font-6: #b17783;
  --color-font-7: #efe7e4;
  --color-font-8: #eee7e4;

  --color-border-1: #d7c2b8;
  --color-border-2: #b77783;
  --color-border-2-75: #b77783bf;
}