@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap);
.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.left {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

.up {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.down {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

:root {
  --K-BG-1: #B8B8B8;
  --K-BG-2: #C2C2C2;
  --K-BG-3: #CCCCCC;
  --K-BG-4: #D6D6D6;
  --K-BG-5: #E0E0E0;
  --K-dark-1: #000000;
  --K-dark-2: #080808;
  --K-dark-3: #101010;
  --K-dark-4: #181818;
  --K-bright-1: #202020;
  --K-bright-2: #282828;
  --K-bright-3: #303030;
  --K-bright-4: #383838;
  --K-brighter-1: #404040;
  --K-brighter-2: #484848;
  --K-brighter-3: #505050;
  --K-brighter-4: #585858;
  --K-brightest-1: #606060;
  --K-brightest-2: #686868;
  --K-brightest-3: #707070;
  --K-brightest-4: #787878;
  --W-BG-1: #B8B8B8;
  --W-BG-2: #C2C2C2;
  --W-BG-3: #CCCCCC;
  --W-BG-4: #D6D6D6;
  --W-BG-5: #E0E0E0;
  --W-brightest-1: #282828;
  --W-brightest-2: #686868;
  --W-brightest-3: #A8A8A8;
  --W-brightest-4: #E8E8E8;
  --W-brighter-1: #282828;
  --W-brighter-2: #686868;
  --W-brighter-3: #A8A8A8;
  --W-brighter-4: #E8E8E8;
  --W-bright-1: #282828;
  --W-bright-2: #686868;
  --W-bright-3: #A8A8A8;
  --W-bright-4: #E8E8E8;
  --W-dark-1: #282828;
  --W-dark-2: #686868;
  --W-dark-3: #A8A8A8;
  --W-dark-4: #E8E8E8;
  --R-BG-1: #CAB8B8;
  --R-BG-2: #D4C2C2;
  --R-BG-3: #DECCCC;
  --R-BG-4: #E8D6D6;
  --R-BG-5: #F2E0E0;
  --R-brightest-1: #FF2828;
  --R-brightest-2: #FF6868;
  --R-brightest-3: #FFA8A8;
  --R-brightest-4: #FFE8E8;
  --R-brighter-1: #DF2828;
  --R-brighter-2: #DF6868;
  --R-brighter-3: #DFA8A8;
  --R-brighter-4: #DFE8E8;
  --R-bright-1: #BF2828;
  --R-bright-2: #BF6868;
  --R-bright-3: #BFA8A8;
  --R-bright-4: #BFE8E8;
  --R-dark-1: #9F2828;
  --R-dark-2: #9F6868;
  --R-dark-3: #9FA8A8;
  --R-dark-4: #9FE8E8;
  --G-BG-1: #B8CAB8;
  --G-BG-2: #C2D4C2;
  --G-BG-3: #CCDECC;
  --G-BG-4: #D6E8D6;
  --G-BG-5: #E0F2E0;
  --G-brightest-1: #60FF60;
  --G-brightest-2: #68FF68;
  --G-brightest-3: #70FF70;
  --G-brightest-4: #78FF78;
  --G-brighter-1: #40DF40;
  --G-brighter-2: #48DF48;
  --G-brighter-3: #50DF50;
  --G-brighter-4: #58DF58;
  --G-bright-1: #20BF20;
  --G-bright-2: #28BF28;
  --G-bright-3: #30BF30;
  --G-bright-4: #38BF38;
  --G-dark-1: #009F00;
  --G-dark-2: #089F08;
  --G-dark-3: #109F10;
  --G-dark-4: #189F18;
  --B-BG-1: #B8B8CA;
  --B-BG-2: #C2C2D4;
  --B-BG-3: #CCCCDE;
  --B-BG-4: #D6D6E8;
  --B-BG-5: #E0E0F2;
  --B-brightest-1: #2828FF;
  --B-brightest-2: #6868FF;
  --B-brightest-3: #A8A8FF;
  --B-brightest-4: #E8E8FF;
  --B-brighter-1: #2828DF;
  --B-brighter-2: #6868DF;
  --B-brighter-3: #A8A8DF;
  --B-brighter-4: #E8E8DF;
  --B-bright-1: #2828BF;
  --B-bright-2: #6868BF;
  --B-bright-3: #A8A8BF;
  --B-bright-4: #E8E8BF;
  --B-dark-1: #28289F;
  --B-dark-2: #68689F;
  --B-dark-3: #A8A89F;
  --B-dark-4: #E8E89F;
  --M-BG-1: #CAB8B8;
  --M-BG-2: #D4C2C2;
  --M-BG-3: #DECCCC;
  --M-BG-4: #E8D6D6;
  --M-BG-5: #F2E0E0;
  --M-brightest-1: #FF28FF;
  --M-brightest-2: #FF68FF;
  --M-brightest-3: #FFA8FF;
  --M-brightest-4: #FFE8FF;
  --M-brighter-1: #DF28DF;
  --M-brighter-2: #DF68DF;
  --M-brighter-3: #DFA8DF;
  --M-brighter-4: #DFE8DF;
  --M-bright-1: #BF28BF;
  --M-bright-2: #BF68BF;
  --M-bright-3: #BFA8BF;
  --M-bright-4: #BFE8BF;
  --M-dark-1: #9F289F;
  --M-dark-2: #9F689F;
  --M-dark-3: #9FA89F;
  --M-dark-4: #9FE89F;
  --Y-BG-1: #B8CAB8;
  --Y-BG-2: #C2D4C2;
  --Y-BG-3: #CCDECC;
  --Y-BG-4: #D6E8D6;
  --Y-BG-5: #E0F2E0;
  --C-brightest-1: #60FFFF;
  --C-brightest-2: #68F7F7;
  --C-brightest-3: #70EFEF;
  --C-brightest-4: #78E7E7;
  --C-brighter-1: #40DFDF;
  --C-brighter-2: #48D7D7;
  --C-brighter-3: #50CFCF;
  --C-brighter-4: #58C7C7;
  --C-bright-1: #20BFBF;
  --C-bright-2: #28B7B7;
  --C-bright-3: #30AFAF;
  --C-bright-4: #38A7A7;
  --C-dark-1: #009F9F;
  --C-dark-2: #089797;
  --C-dark-3: #108F8F;
  --C-dark-4: #188787;
  --C-BG-1: #B8B8CA;
  --C-BG-2: #C2C2D4;
  --C-BG-3: #CCCCDE;
  --C-BG-4: #D6D6E8;
  --C-BG-5: #E0E0F2;
  --Y-brightest-1: #FFFF28;
  --Y-brightest-2: #FFFF68;
  --Y-brightest-3: #FFFFA8;
  --Y-brightest-4: #FFFFE8;
  --Y-brighter-1: #DFDF28;
  --Y-brighter-2: #DFDF68;
  --Y-brighter-3: #DFDFA8;
  --Y-brighter-4: #DFDFE8;
  --Y-bright-1: #BFBF28;
  --Y-bright-2: #BFBF68;
  --Y-bright-3: #BFBFA8;
  --Y-bright-4: #BFBFE8;
  --Y-dark-1: #9F9F28;
  --Y-dark-2: #9F9F68;
  --Y-dark-3: #9F9FA8;
  --Y-dark-4: #9F9FE8;
  --pure-black: #000000;
  --pure-white: #FFFFFF;
  --pure-red: #FF0000;
  --pure-green: #00FF00;
  --pure-blue: #0000FF;
  --pure-yellow: #FFFF00;
  --dark-black: #0f0f0f;
  --dark-white: #999999;
  --dark-red: #990f0f;
  --dark-green: #0f990f;
  --dark-blue: #0f0f99;
  --dark-yellow: #99990f;
  --darker-black: #101010;
  --darker-white: #5a5a5a;
  --darker-red: #5a1010;
  --darker-green: #105a10;
  --darker-blue: #10105a;
  --darker-yellow: #5a5a10;
  --light-black: #585555;
  --light-white: #e0e0e0;
  --light-red: #ce4b4b;
  --light-green: #4bc64b;
  --light-blue: #5050df;
  --light-yellow: #ffffbf;
  --lighter-black: #838383;
  --lighter-white: #eeeeee;
  --lighter-red: #ffe8e8;
  --lighter-green: #e0ffe0;
  --lighter-blue: #e0e0ff;
  --lighter-yellow: #ffffe0;
  --K-BG-1RGB: 184,184,184;
  --K-BG-2RGB: 194,194,194;
  --K-BG-3RGB: 204,204,204;
  --K-BG-4RGB: 214,214,214;
  --K-BG-5RGB: 224,224,224;
  --K-dark-1RGB: 0,0,0;
  --K-dark-2RGB: 8,8,8;
  --K-dark-3RGB: 16,16,16;
  --K-dark-4RGB: 24,24,24;
  --K-bright-1RGB: 32,32,32;
  --K-bright-2RGB: 40,40,40;
  --K-bright-3RGB: 48,48,48;
  --K-bright-4RGB: 56,56,56;
  --K-brighter-1RGB: 64,64,64;
  --K-brighter-2RGB: 72,72,72;
  --K-brighter-3RGB: 80,80,80;
  --K-brighter-4RGB: 88,88,88;
  --K-brightest-1RGB: 96,96,96;
  --K-brightest-2RGB: 104,104,104;
  --K-brightest-3RGB: 112,112,112;
  --K-brightest-4RGB: 120,120,120;
  --W-BG-1RGB: 184,184,184;
  --W-BG-2RGB: 194,194,194;
  --W-BG-3RGB: 204,204,204;
  --W-BG-4RGB: 214,214,214;
  --W-BG-5RGB: 224,224,224;
  --W-brightest-1RGB: 40,40,40;
  --W-brightest-2RGB: 104,104,104;
  --W-brightest-3RGB: 168,168,168;
  --W-brightest-4RGB: 232,232,232;
  --W-brighter-1RGB: 40,40,40;
  --W-brighter-2RGB: 104,104,104;
  --W-brighter-3RGB: 168,168,168;
  --W-brighter-4RGB: 232,232,232;
  --W-bright-1RGB: 40,40,40;
  --W-bright-2RGB: 104,104,104;
  --W-bright-3RGB: 168,168,168;
  --W-bright-4RGB: 232,232,232;
  --W-dark-1RGB: 40,40,40;
  --W-dark-2RGB: 104,104,104;
  --W-dark-3RGB: 168,168,168;
  --W-dark-4RGB: 232,232,232;
  --R-BG-1RGB: 202,184,184;
  --R-BG-2RGB: 212,194,194;
  --R-BG-3RGB: 222,204,204;
  --R-BG-4RGB: 232,214,214;
  --R-BG-5RGB: 242,224,224;
  --R-brightest-1RGB: 255,40,40;
  --R-brightest-2RGB: 255,104,104;
  --R-brightest-3RGB: 255,168,168;
  --R-brightest-4RGB: 255,232,232;
  --R-brighter-1RGB: 223,40,40;
  --R-brighter-2RGB: 223,104,104;
  --R-brighter-3RGB: 223,168,168;
  --R-brighter-4RGB: 223,232,232;
  --R-bright-1RGB: 191,40,40;
  --R-bright-2RGB: 191,104,104;
  --R-bright-3RGB: 191,168,168;
  --R-bright-4RGB: 191,232,232;
  --R-dark-1RGB: 159,40,40;
  --R-dark-2RGB: 159,104,104;
  --R-dark-3RGB: 159,168,168;
  --R-dark-4RGB: 159,232,232;
  --G-BG-1RGB: 184,202,184;
  --G-BG-2RGB: 194,212,194;
  --G-BG-3RGB: 204,222,204;
  --G-BG-4RGB: 214,232,214;
  --G-BG-5RGB: 224,242,224;
  --G-brightest-1RGB: 96,255,96;
  --G-brightest-2RGB: 104,255,104;
  --G-brightest-3RGB: 112,255,112;
  --G-brightest-4RGB: 120,255,120;
  --G-brighter-1RGB: 64,223,64;
  --G-brighter-2RGB: 72,223,72;
  --G-brighter-3RGB: 80,223,80;
  --G-brighter-4RGB: 88,223,88;
  --G-bright-1RGB: 32,191,32;
  --G-bright-2RGB: 40,191,40;
  --G-bright-3RGB: 48,191,48;
  --G-bright-4RGB: 56,191,56;
  --G-dark-1RGB: 0,159,0;
  --G-dark-2RGB: 8,159,8;
  --G-dark-3RGB: 16,159,16;
  --G-dark-4RGB: 24,159,24;
  --B-BG-1RGB: 184,184,202;
  --B-BG-2RGB: 194,194,212;
  --B-BG-3RGB: 204,204,222;
  --B-BG-4RGB: 214,214,232;
  --B-BG-5RGB: 224,224,242;
  --B-brightest-1RGB: 40,40,255;
  --B-brightest-2RGB: 104,104,255;
  --B-brightest-3RGB: 168,168,255;
  --B-brightest-4RGB: 232,232,255;
  --B-brighter-1RGB: 40,40,223;
  --B-brighter-2RGB: 104,104,223;
  --B-brighter-3RGB: 168,168,223;
  --B-brighter-4RGB: 232,232,223;
  --B-bright-1RGB: 40,40,191;
  --B-bright-2RGB: 104,104,191;
  --B-bright-3RGB: 168,168,191;
  --B-bright-4RGB: 232,232,191;
  --B-dark-1RGB: 40,40,159;
  --B-dark-2RGB: 104,104,159;
  --B-dark-3RGB: 168,168,159;
  --B-dark-4RGB: 232,232,159;
  --M-BG-1RGB: 202,184,184;
  --M-BG-2RGB: 212,194,194;
  --M-BG-3RGB: 222,204,204;
  --M-BG-4RGB: 232,214,214;
  --M-BG-5RGB: 242,224,224;
  --M-brightest-1RGB: 255,40,255;
  --M-brightest-2RGB: 255,104,255;
  --M-brightest-3RGB: 255,168,255;
  --M-brightest-4RGB: 255,232,255;
  --M-brighter-1RGB: 223,40,223;
  --M-brighter-2RGB: 223,104,223;
  --M-brighter-3RGB: 223,168,223;
  --M-brighter-4RGB: 223,232,223;
  --M-bright-1RGB: 191,40,191;
  --M-bright-2RGB: 191,104,191;
  --M-bright-3RGB: 191,168,191;
  --M-bright-4RGB: 191,232,191;
  --M-dark-1RGB: 159,40,159;
  --M-dark-2RGB: 159,104,159;
  --M-dark-3RGB: 159,168,159;
  --M-dark-4RGB: 159,232,159;
  --Y-BG-1RGB: 184,202,184;
  --Y-BG-2RGB: 194,212,194;
  --Y-BG-3RGB: 204,222,204;
  --Y-BG-4RGB: 214,232,214;
  --Y-BG-5RGB: 224,242,224;
  --C-brightest-1RGB: 96,255,255;
  --C-brightest-2RGB: 104,247,247;
  --C-brightest-3RGB: 112,239,239;
  --C-brightest-4RGB: 120,231,231;
  --C-brighter-1RGB: 64,223,223;
  --C-brighter-2RGB: 72,215,215;
  --C-brighter-3RGB: 80,207,207;
  --C-brighter-4RGB: 88,199,199;
  --C-bright-1RGB: 32,191,191;
  --C-bright-2RGB: 40,183,183;
  --C-bright-3RGB: 48,175,175;
  --C-bright-4RGB: 56,167,167;
  --C-dark-1RGB: 0,159,159;
  --C-dark-2RGB: 8,151,151;
  --C-dark-3RGB: 16,143,143;
  --C-dark-4RGB: 24,135,135;
  --C-BG-1RGB: 184,184,202;
  --C-BG-2RGB: 194,194,212;
  --C-BG-3RGB: 204,204,222;
  --C-BG-4RGB: 214,214,232;
  --C-BG-5RGB: 224,224,242;
  --Y-brightest-1RGB: 255,255,40;
  --Y-brightest-2RGB: 255,255,104;
  --Y-brightest-3RGB: 255,255,168;
  --Y-brightest-4RGB: 255,255,232;
  --Y-brighter-1RGB: 223,223,40;
  --Y-brighter-2RGB: 223,223,104;
  --Y-brighter-3RGB: 223,223,168;
  --Y-brighter-4RGB: 223,223,232;
  --Y-bright-1RGB: 191,191,40;
  --Y-bright-2RGB: 191,191,104;
  --Y-bright-3RGB: 191,191,168;
  --Y-bright-4RGB: 191,191,232;
  --Y-dark-1RGB: 159,159,40;
  --Y-dark-2RGB: 159,159,104;
  --Y-dark-3RGB: 159,159,168;
  --Y-dark-4RGB: 159,159,232;
  --pure-blackRGB: 0,0,0;
  --pure-whiteRGB: 255,255,255;
  --pure-redRGB: 255,0,0;
  --pure-greenRGB: 0,255,0;
  --pure-blueRGB: 0,0,255;
  --pure-yellowRGB: 255,255,0;
  --dark-blackRGB: 15,15,15;
  --dark-whiteRGB: 153,153,153;
  --dark-redRGB: 153,15,15;
  --dark-greenRGB: 15,153,15;
  --dark-blueRGB: 15,15,153;
  --dark-yellowRGB: 153,153,15;
  --darker-blackRGB: 16,16,16;
  --darker-whiteRGB: 90,90,90;
  --darker-redRGB: 90,16,16;
  --darker-greenRGB: 16,90,16;
  --darker-blueRGB: 16,16,90;
  --darker-yellowRGB: 90,90,16;
  --light-blackRGB: 88,85,85;
  --light-whiteRGB: 224,224,224;
  --light-redRGB: 206,75,75;
  --light-greenRGB: 75,198,75;
  --light-blueRGB: 80,80,223;
  --light-yellowRGB: 255,255,191;
  --lighter-blackRGB: 131,131,131;
  --lighter-whiteRGB: 238,238,238;
  --lighter-redRGB: 255,232,232;
  --lighter-greenRGB: 224,255,224;
  --lighter-blueRGB: 224,224,255;
  --lighter-yellowRGB: 255,255,224;
  /*
    Colors used in .blank-div-wrapper (file: __wrappers.scss)
    --Color-MainText       // h1..h6, p 
    --Color-SecText
    --Color-Important           // looks "pleasing", not strain the eyes. Used by <strong> <mark> <b>
    --Color-NotImportant    // Used by <u>
    --Color-ButtonUp            // Button back color
    --Color-ButtonHover     // Button back color hover
    --Color-ButtonDown      // Button back color clicked
    --Color-ButtonTextColor         // ButtonText is a reserved word, thus use ButtonTextColor
   --Color-MainBack             // Main Background
    --Color-SecBack             // Secondary Background
    --Color-MainShadow     // Primary Shadow
    --Color-SecShadow        // Secondary Shadow
    --Color-MarkColor       // for the background of <mark> aka highlighter


    Depreciated
    --Mark-Text-Color: var(--white-brightest-1);      // <mark>
    --Bold-Text-Color: var(--white-brighter-1);        // <b>
    --Strong-Text-Color: var(--cyan-brightest-1);        // <strong>
    --Normal-Text-Color: var(--white-bright-1);      // standard text color
    --Underline-Text-Color: var(--yellow-brightest-1);      // I don't like underline as in draw a line below text. But I'll use <u> as a highlight.
    --Primary-Back-Color: var(--black-dark-1);        // Standard background color 
    --Mark-Back-Color: var(--yellow-dark-1);          // Highlight <mark> background color
*/
}

.Theme-DarkMode-RBlend {
  --Color-MainText: var(--R-brighter-2);
  --Color-SecText: var(--R-brightest-2);
  --Color-Important: var(--R-brighter-1);
  --Color-NotImportant: var(--R-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--R-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--R-bright-2);
  --Color-SecShadow: var(--R-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-RBlend {
  --Color-MainText: var(--R-brighter-2);
  --Color-SecText: var(--R-brightest-2);
  --Color-Important: var(--R-brightest-1);
  --Color-NotImportant: var(--R-brightest-3);
  --Color-ButtonUp: var(--R-BG-1);
  --Color-ButtonHover: var(--R-BG-3);
  --Color-ButtonDown: var(--R-BG-2);
  --Color-ButtonTextColor: var(--R-brighter-1);
  --Color-MainBack: var(--B-BG-5);
  --Color-SecBack: var(--R-BG-4);
  --Color-MainShadow: var(--R-dark-2);
  --Color-SecShadow: var(--R-dark-3);
  --Color-MarkColor: var(--R-bright-4);
}

.Theme-DarkMode-GBlend {
  --Color-MainText: var(--G-brighter-2);
  --Color-SecText: var(--G-brightest-2);
  --Color-Important: var(--G-brighter-1);
  --Color-NotImportant: var(--G-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--G-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--G-bright-2);
  --Color-SecShadow: var(--G-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-GBlend {
  --Color-MainText: var(--G-brighter-2);
  --Color-SecText: var(--G-brightest-2);
  --Color-Important: var(--G-brightest-1);
  --Color-NotImportant: var(--G-brightest-3);
  --Color-ButtonUp: var(--G-BG-1);
  --Color-ButtonHover: var(--G-BG-3);
  --Color-ButtonDown: var(--G-BG-2);
  --Color-ButtonTextColor: var(--G-brighter-1);
  --Color-MainBack: var(--K-BG-5);
  --Color-SecBack: var(--G-BG-4);
  --Color-MainShadow: var(--G-dark-2);
  --Color-SecShadow: var(--G-dark-3);
  --Color-MarkColor: var(--G-bright-4);
}

.Theme-DarkMode-BBlend {
  --Color-MainText: var(--B-brighter-2);
  --Color-SecText: var(--B-brightest-2);
  --Color-Important: var(--B-brighter-1);
  --Color-NotImportant: var(--B-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--B-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--B-bright-2);
  --Color-SecShadow: var(--B-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-BBlend {
  --Color-MainText: var(--B-brighter-2);
  --Color-SecText: var(--B-brightest-2);
  --Color-Important: var(--B-brightest-1);
  --Color-NotImportant: var(--B-brightest-3);
  --Color-ButtonUp: var(--B-BG-1);
  --Color-ButtonHover: var(--B-BG-3);
  --Color-ButtonDown: var(--B-BG-2);
  --Color-ButtonTextColor: var(--B-brighter-1);
  --Color-MainBack: var(--M-BG-5);
  --Color-SecBack: var(--B-BG-4);
  --Color-MainShadow: var(--B-dark-2);
  --Color-SecShadow: var(--B-dark-3);
  --Color-MarkColor: var(--B-bright-4);
}

.Theme-DarkMode-MBlend {
  --Color-MainText: var(--M-brighter-2);
  --Color-SecText: var(--M-brightest-2);
  --Color-Important: var(--M-brighter-1);
  --Color-NotImportant: var(--M-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--M-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--M-bright-2);
  --Color-SecShadow: var(--M-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-MBlend {
  --Color-MainText: var(--M-brighter-2);
  --Color-SecText: var(--M-brightest-2);
  --Color-Important: var(--M-brightest-1);
  --Color-NotImportant: var(--M-brightest-3);
  --Color-ButtonUp: var(--M-BG-1);
  --Color-ButtonHover: var(--M-BG-3);
  --Color-ButtonDown: var(--M-BG-2);
  --Color-ButtonTextColor: var(--M-brighter-1);
  --Color-MainBack: var(--K-BG-5);
  --Color-SecBack: var(--M-BG-4);
  --Color-MainShadow: var(--M-dark-2);
  --Color-SecShadow: var(--M-dark-3);
  --Color-MarkColor: var(--M-bright-4);
}

.Theme-DarkMode-YBlend {
  --Color-MainText: var(--Y-brighter-2);
  --Color-SecText: var(--Y-brightest-2);
  --Color-Important: var(--Y-brighter-1);
  --Color-NotImportant: var(--Y-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--Y-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--Y-bright-2);
  --Color-SecShadow: var(--Y-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-YBlend {
  --Color-MainText: var(--Y-brighter-2);
  --Color-SecText: var(--Y-brightest-2);
  --Color-Important: var(--Y-brightest-1);
  --Color-NotImportant: var(--Y-brightest-3);
  --Color-ButtonUp: var(--Y-BG-1);
  --Color-ButtonHover: var(--Y-BG-3);
  --Color-ButtonDown: var(--Y-BG-2);
  --Color-ButtonTextColor: var(--Y-brighter-1);
  --Color-MainBack: var(--K-BG-5);
  --Color-SecBack: var(--Y-BG-4);
  --Color-MainShadow: var(--Y-dark-2);
  --Color-SecShadow: var(--Y-dark-3);
  --Color-MarkColor: var(--Y-bright-4);
}

.Theme-DarkMode-CBlend {
  --Color-MainText: var(--C-brighter-2);
  --Color-SecText: var(--C-brightest-2);
  --Color-Important: var(--C-brighter-1);
  --Color-NotImportant: var(--C-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--C-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--C-bright-2);
  --Color-SecShadow: var(--C-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-CBlend {
  --Color-MainText: var(--C-brighter-2);
  --Color-SecText: var(--C-brightest-2);
  --Color-Important: var(--C-brightest-1);
  --Color-NotImportant: var(--C-brightest-3);
  --Color-ButtonUp: var(--C-BG-1);
  --Color-ButtonHover: var(--C-BG-3);
  --Color-ButtonDown: var(--C-BG-2);
  --Color-ButtonTextColor: var(--C-brighter-1);
  --Color-MainBack: var(--R-BG-5);
  --Color-SecBack: var(--C-BG-4);
  --Color-MainShadow: var(--C-dark-2);
  --Color-SecShadow: var(--C-dark-3);
  --Color-MarkColor: var(--C-bright-4);
}

.Theme-DarkMode-WBlend {
  --Color-MainText: var(--W-brighter-2);
  --Color-SecText: var(--W-brightest-2);
  --Color-Important: var(--W-brighter-1);
  --Color-NotImportant: var(--W-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--W-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--W-bright-2);
  --Color-SecShadow: var(--W-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-WBlend {
  --Color-MainText: var(--W-brighter-2);
  --Color-SecText: var(--W-brightest-2);
  --Color-Important: var(--W-brightest-1);
  --Color-NotImportant: var(--W-brightest-3);
  --Color-ButtonUp: var(--W-BG-1);
  --Color-ButtonHover: var(--W-BG-3);
  --Color-ButtonDown: var(--W-BG-2);
  --Color-ButtonTextColor: var(--W-brighter-1);
  --Color-MainBack: var(--R-BG-5);
  --Color-SecBack: var(--W-BG-4);
  --Color-MainShadow: var(--W-dark-2);
  --Color-SecShadow: var(--W-dark-3);
  --Color-MarkColor: var(--W-bright-4);
}

.Theme-DarkMode-KBlend {
  --Color-MainText: var(--K-brighter-2);
  --Color-SecText: var(--K-brightest-2);
  --Color-Important: var(--K-brighter-1);
  --Color-NotImportant: var(--K-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--K-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--K-bright-2);
  --Color-SecShadow: var(--K-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-KBlend {
  --Color-MainText: var(--K-brighter-2);
  --Color-SecText: var(--K-brightest-2);
  --Color-Important: var(--K-brightest-1);
  --Color-NotImportant: var(--K-brightest-3);
  --Color-ButtonUp: var(--K-BG-1);
  --Color-ButtonHover: var(--K-BG-3);
  --Color-ButtonDown: var(--K-BG-2);
  --Color-ButtonTextColor: var(--K-brighter-1);
  --Color-MainBack: var(--B-BG-5);
  --Color-SecBack: var(--K-BG-4);
  --Color-MainShadow: var(--K-dark-2);
  --Color-SecShadow: var(--K-dark-3);
  --Color-MarkColor: var(--K-bright-4);
}

.Theme-DarkMode-RSharp {
  --Color-MainText: var(--W-brighter-3);
  --Color-SecText: var(--W-brightest-3);
  --Color-Important: var(--R-brightest-3);
  --Color-NotImportant: var(--R-bright-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--W-brighter-3);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--R-bright-2);
  --Color-SecShadow: var(--R-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-RSharp {
  --Color-MainText: var(--K-brighter-1);
  --Color-SecText: var(--K-brightest-1);
  --Color-Important: var(--R-dark-1);
  --Color-NotImportant: var(--R-dark-3);
  --Color-ButtonUp: var(--R-BG-1);
  --Color-ButtonHover: var(--R-BG-2);
  --Color-ButtonDown: var(--R-BG-3);
  --Color-ButtonTextColor: var(--K-dark-1);
  --Color-MainBack: var(--R-BG-5);
  --Color-SecBack: var(--R-BG-4);
  --Color-MainShadow: var(--R-dark-2);
  --Color-SecShadow: var(--R-dark-3);
  --Color-MarkColor: var(--B-bright-4);
}

.Theme-DarkMode-GSharp {
  --Color-MainText: var(--W-brighter-3);
  --Color-SecText: var(--W-brightest-3);
  --Color-Important: var(--G-brightest-3);
  --Color-NotImportant: var(--G-bright-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--W-brighter-3);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--G-bright-2);
  --Color-SecShadow: var(--G-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-GSharp {
  --Color-MainText: var(--K-brighter-1);
  --Color-SecText: var(--K-brightest-1);
  --Color-Important: var(--G-dark-1);
  --Color-NotImportant: var(--G-dark-3);
  --Color-ButtonUp: var(--G-BG-1);
  --Color-ButtonHover: var(--G-BG-2);
  --Color-ButtonDown: var(--G-BG-3);
  --Color-ButtonTextColor: var(--K-dark-1);
  --Color-MainBack: var(--G-BG-5);
  --Color-SecBack: var(--G-BG-4);
  --Color-MainShadow: var(--G-dark-2);
  --Color-SecShadow: var(--G-dark-3);
  --Color-MarkColor: var(--K-bright-4);
}

.Theme-DarkMode-BSharp {
  --Color-MainText: var(--W-brighter-3);
  --Color-SecText: var(--W-brightest-3);
  --Color-Important: var(--B-brightest-3);
  --Color-NotImportant: var(--B-bright-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--W-brighter-3);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--B-bright-2);
  --Color-SecShadow: var(--B-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-BSharp {
  --Color-MainText: var(--K-brighter-1);
  --Color-SecText: var(--K-brightest-1);
  --Color-Important: var(--B-dark-1);
  --Color-NotImportant: var(--B-dark-3);
  --Color-ButtonUp: var(--B-BG-1);
  --Color-ButtonHover: var(--B-BG-2);
  --Color-ButtonDown: var(--B-BG-3);
  --Color-ButtonTextColor: var(--K-dark-1);
  --Color-MainBack: var(--B-BG-5);
  --Color-SecBack: var(--B-BG-4);
  --Color-MainShadow: var(--B-dark-2);
  --Color-SecShadow: var(--B-dark-3);
  --Color-MarkColor: var(--M-bright-4);
}

.Theme-DarkMode-MSharp {
  --Color-MainText: var(--W-brighter-3);
  --Color-SecText: var(--W-brightest-3);
  --Color-Important: var(--M-brightest-3);
  --Color-NotImportant: var(--M-bright-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--W-brighter-3);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--M-bright-2);
  --Color-SecShadow: var(--M-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-MSharp {
  --Color-MainText: var(--K-brighter-1);
  --Color-SecText: var(--K-brightest-1);
  --Color-Important: var(--M-dark-1);
  --Color-NotImportant: var(--M-dark-3);
  --Color-ButtonUp: var(--M-BG-1);
  --Color-ButtonHover: var(--M-BG-2);
  --Color-ButtonDown: var(--M-BG-3);
  --Color-ButtonTextColor: var(--K-dark-1);
  --Color-MainBack: var(--M-BG-5);
  --Color-SecBack: var(--M-BG-4);
  --Color-MainShadow: var(--M-dark-2);
  --Color-SecShadow: var(--M-dark-3);
  --Color-MarkColor: var(--K-bright-4);
}

.Theme-DarkMode-YSharp {
  --Color-MainText: var(--W-brighter-3);
  --Color-SecText: var(--W-brightest-3);
  --Color-Important: var(--Y-brightest-3);
  --Color-NotImportant: var(--Y-bright-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--W-brighter-3);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--Y-bright-2);
  --Color-SecShadow: var(--Y-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-YSharp {
  --Color-MainText: var(--K-brighter-1);
  --Color-SecText: var(--K-brightest-1);
  --Color-Important: var(--Y-dark-1);
  --Color-NotImportant: var(--Y-dark-3);
  --Color-ButtonUp: var(--Y-BG-1);
  --Color-ButtonHover: var(--Y-BG-2);
  --Color-ButtonDown: var(--Y-BG-3);
  --Color-ButtonTextColor: var(--K-dark-1);
  --Color-MainBack: var(--Y-BG-5);
  --Color-SecBack: var(--Y-BG-4);
  --Color-MainShadow: var(--Y-dark-2);
  --Color-SecShadow: var(--Y-dark-3);
  --Color-MarkColor: var(--K-bright-4);
}

.Theme-DarkMode-CSharp {
  --Color-MainText: var(--W-brighter-3);
  --Color-SecText: var(--W-brightest-3);
  --Color-Important: var(--C-brightest-3);
  --Color-NotImportant: var(--C-bright-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--W-brighter-3);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--C-bright-2);
  --Color-SecShadow: var(--C-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-CSharp {
  --Color-MainText: var(--K-brighter-1);
  --Color-SecText: var(--K-brightest-1);
  --Color-Important: var(--C-dark-1);
  --Color-NotImportant: var(--C-dark-3);
  --Color-ButtonUp: var(--C-BG-1);
  --Color-ButtonHover: var(--C-BG-2);
  --Color-ButtonDown: var(--C-BG-3);
  --Color-ButtonTextColor: var(--K-dark-1);
  --Color-MainBack: var(--C-BG-5);
  --Color-SecBack: var(--C-BG-4);
  --Color-MainShadow: var(--C-dark-2);
  --Color-SecShadow: var(--C-dark-3);
  --Color-MarkColor: var(--R-bright-4);
}

.Theme-DarkMode-WSharp {
  --Color-MainText: var(--W-brighter-3);
  --Color-SecText: var(--W-brightest-3);
  --Color-Important: var(--W-brightest-3);
  --Color-NotImportant: var(--W-bright-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--W-brighter-3);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--W-bright-2);
  --Color-SecShadow: var(--W-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-WSharp {
  --Color-MainText: var(--K-brighter-1);
  --Color-SecText: var(--K-brightest-1);
  --Color-Important: var(--W-dark-1);
  --Color-NotImportant: var(--W-dark-3);
  --Color-ButtonUp: var(--W-BG-1);
  --Color-ButtonHover: var(--W-BG-2);
  --Color-ButtonDown: var(--W-BG-3);
  --Color-ButtonTextColor: var(--K-dark-1);
  --Color-MainBack: var(--W-BG-5);
  --Color-SecBack: var(--W-BG-4);
  --Color-MainShadow: var(--W-dark-2);
  --Color-SecShadow: var(--W-dark-3);
  --Color-MarkColor: var(--R-bright-4);
}

.Theme-DarkMode-KSharp {
  --Color-MainText: var(--W-brighter-3);
  --Color-SecText: var(--W-brightest-3);
  --Color-Important: var(--K-brightest-3);
  --Color-NotImportant: var(--K-bright-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--W-brighter-3);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--K-bright-2);
  --Color-SecShadow: var(--K-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-KSharp {
  --Color-MainText: var(--K-brighter-1);
  --Color-SecText: var(--K-brightest-1);
  --Color-Important: var(--K-dark-1);
  --Color-NotImportant: var(--K-dark-3);
  --Color-ButtonUp: var(--K-BG-1);
  --Color-ButtonHover: var(--K-BG-2);
  --Color-ButtonDown: var(--K-BG-3);
  --Color-ButtonTextColor: var(--K-dark-1);
  --Color-MainBack: var(--K-BG-5);
  --Color-SecBack: var(--K-BG-4);
  --Color-MainShadow: var(--K-dark-2);
  --Color-SecShadow: var(--K-dark-3);
  --Color-MarkColor: var(--B-bright-4);
}

.Theme-DarkMode-RFancy {
  --Color-MainText: var(--W-brightest-3);
  --Color-SecText: var(--R-brightest-2);
  --Color-Important: var(--W-brighter-3);
  --Color-NotImportant: var(--R-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--R-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--R-bright-2);
  --Color-SecShadow: var(--B-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-RFancy {
  --Color-MainText: var(--K-bright-1);
  --Color-SecText: var(--R-brighter-1);
  --Color-Important: var(--B-brighter-1);
  --Color-NotImportant: var(--R-brightest-3);
  --Color-ButtonUp: var(--R-BG-1);
  --Color-ButtonHover: var(--R-BG-3);
  --Color-ButtonDown: var(--B-BG-2);
  --Color-ButtonTextColor: var(--R-brighter-1);
  --Color-MainBack: var(--R-BG-5);
  --Color-SecBack: var(--B-BG-4);
  --Color-MainShadow: var(--R-dark-2);
  --Color-SecShadow: var(--B-dark-3);
  --Color-MarkColor: var(--R-bright-4);
}

.Theme-DarkMode-GFancy {
  --Color-MainText: var(--W-brightest-3);
  --Color-SecText: var(--G-brightest-2);
  --Color-Important: var(--W-brighter-3);
  --Color-NotImportant: var(--G-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--G-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--G-bright-2);
  --Color-SecShadow: var(--K-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-GFancy {
  --Color-MainText: var(--K-bright-1);
  --Color-SecText: var(--G-brighter-1);
  --Color-Important: var(--K-brighter-1);
  --Color-NotImportant: var(--G-brightest-3);
  --Color-ButtonUp: var(--G-BG-1);
  --Color-ButtonHover: var(--G-BG-3);
  --Color-ButtonDown: var(--K-BG-2);
  --Color-ButtonTextColor: var(--G-brighter-1);
  --Color-MainBack: var(--G-BG-5);
  --Color-SecBack: var(--K-BG-4);
  --Color-MainShadow: var(--G-dark-2);
  --Color-SecShadow: var(--K-dark-3);
  --Color-MarkColor: var(--G-bright-4);
}

.Theme-DarkMode-BFancy {
  --Color-MainText: var(--W-brightest-3);
  --Color-SecText: var(--B-brightest-2);
  --Color-Important: var(--W-brighter-3);
  --Color-NotImportant: var(--B-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--B-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--B-bright-2);
  --Color-SecShadow: var(--M-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-BFancy {
  --Color-MainText: var(--K-bright-1);
  --Color-SecText: var(--B-brighter-1);
  --Color-Important: var(--M-brighter-1);
  --Color-NotImportant: var(--B-brightest-3);
  --Color-ButtonUp: var(--B-BG-1);
  --Color-ButtonHover: var(--B-BG-3);
  --Color-ButtonDown: var(--M-BG-2);
  --Color-ButtonTextColor: var(--B-brighter-1);
  --Color-MainBack: var(--B-BG-5);
  --Color-SecBack: var(--M-BG-4);
  --Color-MainShadow: var(--B-dark-2);
  --Color-SecShadow: var(--M-dark-3);
  --Color-MarkColor: var(--B-bright-4);
}

.Theme-DarkMode-MFancy {
  --Color-MainText: var(--W-brightest-3);
  --Color-SecText: var(--M-brightest-2);
  --Color-Important: var(--W-brighter-3);
  --Color-NotImportant: var(--M-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--M-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--M-bright-2);
  --Color-SecShadow: var(--K-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-MFancy {
  --Color-MainText: var(--K-bright-1);
  --Color-SecText: var(--M-brighter-1);
  --Color-Important: var(--K-brighter-1);
  --Color-NotImportant: var(--M-brightest-3);
  --Color-ButtonUp: var(--M-BG-1);
  --Color-ButtonHover: var(--M-BG-3);
  --Color-ButtonDown: var(--K-BG-2);
  --Color-ButtonTextColor: var(--M-brighter-1);
  --Color-MainBack: var(--M-BG-5);
  --Color-SecBack: var(--K-BG-4);
  --Color-MainShadow: var(--M-dark-2);
  --Color-SecShadow: var(--K-dark-3);
  --Color-MarkColor: var(--M-bright-4);
}

.Theme-DarkMode-YFancy {
  --Color-MainText: var(--W-brightest-3);
  --Color-SecText: var(--Y-brightest-2);
  --Color-Important: var(--W-brighter-3);
  --Color-NotImportant: var(--Y-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--Y-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--Y-bright-2);
  --Color-SecShadow: var(--K-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-YFancy {
  --Color-MainText: var(--K-bright-1);
  --Color-SecText: var(--Y-brighter-1);
  --Color-Important: var(--K-brighter-1);
  --Color-NotImportant: var(--Y-brightest-3);
  --Color-ButtonUp: var(--Y-BG-1);
  --Color-ButtonHover: var(--Y-BG-3);
  --Color-ButtonDown: var(--K-BG-2);
  --Color-ButtonTextColor: var(--Y-brighter-1);
  --Color-MainBack: var(--Y-BG-5);
  --Color-SecBack: var(--K-BG-4);
  --Color-MainShadow: var(--Y-dark-2);
  --Color-SecShadow: var(--K-dark-3);
  --Color-MarkColor: var(--Y-bright-4);
}

.Theme-DarkMode-CFancy {
  --Color-MainText: var(--W-brightest-3);
  --Color-SecText: var(--C-brightest-2);
  --Color-Important: var(--W-brighter-3);
  --Color-NotImportant: var(--C-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--C-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--C-bright-2);
  --Color-SecShadow: var(--R-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-CFancy {
  --Color-MainText: var(--K-bright-1);
  --Color-SecText: var(--C-brighter-1);
  --Color-Important: var(--R-brighter-1);
  --Color-NotImportant: var(--C-brightest-3);
  --Color-ButtonUp: var(--C-BG-1);
  --Color-ButtonHover: var(--C-BG-3);
  --Color-ButtonDown: var(--R-BG-2);
  --Color-ButtonTextColor: var(--C-brighter-1);
  --Color-MainBack: var(--C-BG-5);
  --Color-SecBack: var(--R-BG-4);
  --Color-MainShadow: var(--C-dark-2);
  --Color-SecShadow: var(--R-dark-3);
  --Color-MarkColor: var(--C-bright-4);
}

.Theme-DarkMode-WFancy {
  --Color-MainText: var(--W-brightest-3);
  --Color-SecText: var(--W-brightest-2);
  --Color-Important: var(--W-brighter-3);
  --Color-NotImportant: var(--W-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--W-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--W-bright-2);
  --Color-SecShadow: var(--R-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-WFancy {
  --Color-MainText: var(--K-bright-1);
  --Color-SecText: var(--W-brighter-1);
  --Color-Important: var(--R-brighter-1);
  --Color-NotImportant: var(--W-brightest-3);
  --Color-ButtonUp: var(--W-BG-1);
  --Color-ButtonHover: var(--W-BG-3);
  --Color-ButtonDown: var(--R-BG-2);
  --Color-ButtonTextColor: var(--W-brighter-1);
  --Color-MainBack: var(--W-BG-5);
  --Color-SecBack: var(--R-BG-4);
  --Color-MainShadow: var(--W-dark-2);
  --Color-SecShadow: var(--R-dark-3);
  --Color-MarkColor: var(--W-bright-4);
}

.Theme-DarkMode-KFancy {
  --Color-MainText: var(--W-brightest-3);
  --Color-SecText: var(--K-brightest-2);
  --Color-Important: var(--W-brighter-3);
  --Color-NotImportant: var(--K-brightest-3);
  --Color-ButtonUp: var(--K-dark-3);
  --Color-ButtonHover: var(--K-dark-3);
  --Color-ButtonDown: var(--K-dark-3);
  --Color-ButtonTextColor: var(--K-brighter-2);
  --Color-MainBack: var(--K-dark-3);
  --Color-SecBack: var(--K-dark-3);
  --Color-MainShadow: var(--K-bright-2);
  --Color-SecShadow: var(--B-dark-3);
  --Color-MarkColor: var(--K-dark-4);
}

.Theme-LightMode-KFancy {
  --Color-MainText: var(--K-bright-1);
  --Color-SecText: var(--K-brighter-1);
  --Color-Important: var(--B-brighter-1);
  --Color-NotImportant: var(--K-brightest-3);
  --Color-ButtonUp: var(--K-BG-1);
  --Color-ButtonHover: var(--K-BG-3);
  --Color-ButtonDown: var(--B-BG-2);
  --Color-ButtonTextColor: var(--K-brighter-1);
  --Color-MainBack: var(--K-BG-5);
  --Color-SecBack: var(--B-BG-4);
  --Color-MainShadow: var(--K-dark-2);
  --Color-SecShadow: var(--B-dark-3);
  --Color-MarkColor: var(--K-bright-4);
}

* {
  font-family: "franklin gothic medium", "Roboto", "arial narrow", sans-serf;
  font-weight: normal;
  font-size: 1rem;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 150%;
  word-break: break-word;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

footer {
  position: relative;
  display: block;
  left: 0;
  margin: 2em 0 0 0;
  width: 100%;
  padding: 2em 0 2em 0;
  background-color: var(--Color-SecBack);
  color: var(--Color-MainText);
  text-align: center;
}

footer copyright, footer copyright span {
  display: block;
  position: relative;
  width: 100%;
  bottom: 0;
  padding: 1rem;
  background-color: var(--Color-ButtonUp);
  color: var(--Color-ButtonTextColor);
}

footer copyright span {
  display: inline;
}

.underlined-header {
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: 100;
  text-align: center;
  color: #eeeeee;
  border-bottom: 2px solid #eeeeee;
}

@media screen and (max-width: 420) {
  .underlined-header {
    margin: 0;
    padding: 0;
    width: 100%;
  }
}

.Test10percentMargin {
  padding: 10%;
}

.wrap-Section-AsBackdrop {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: -1;
}

.wrap-Section-SingleCard {
  text-align: center;
  padding: 0;
  margin: 0;
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: clamp(350px, 96vw, 960px);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.wrap-Section-ThreeCards {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
  width: 100%;
}

.wrap-Section-SingleCard h1, .wrap-Section-SingleCard h2, .wrap-Section-SingleCard h1 span, .wrap-Section-SingleCard h2 span,
.wrap-Section-SingleCard h3, .wrap-Section-SingleCard h4, .wrap-Section-SingleCard h5, .wrap-Section-SingleCard h6, .wrap-Section-SingleCard p,
.wrap-Section-ThreeCards h1, .wrap-Section-ThreeCards h2, .wrap-Section-ThreeCards h1 span, .wrap-Section-ThreeCards h2 span,
.wrap-Section-ThreeCards h3, .wrap-Section-ThreeCards h4, .wrap-Section-ThreeCards h5, .wrap-Section-ThreeCards h6, .wrap-Section-ThreeCards p {
  overflow: hidden;
  background-color: transparent;
  position: relative;
  display: inline;
  padding: 0;
  margin: 1vh 0 0 0;
  font-weight: 100;
  color: var(--Color-MainText);
}

.wrap-Section-SingleCard h1, .wrap-Section-SingleCard h2, .wrap-Section-ThreeCards h1, .wrap-Section-ThreeCards h2 {
  line-height: 1.5;
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.wrap-Section-SingleCard h2, .wrap-Section-ThreeCards h2 {
  display: inline-block;
  cursor: pointer;
  padding-bottom: 1vh;
}

.wrap-Section-SingleCard h2::after, .wrap-Section-ThreeCards h2::after {
  content: "";
  height: 0.2vh;
  border-radius: 2rem;
  display: block;
  background-color: var(--Color-MainText);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.wrap-Section-SingleCard h2:hover::after, .wrap-Section-ThreeCards h2:hover::after {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.wrap-Section-SingleCard h1 span, .wrap-Section-SingleCard h2 span, .wrap-Section-ThreeCards h1 span, .wrap-Section-ThreeCards h2 span {
  font-size: clamp(1.3rem, 3.8vw, 1.8rem);
  line-height: 1.2;
  display: inline;
}

.wrap-Section-SingleCard h3, .wrap-Section-ThreeCards h3 {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
}

.wrap-Section-SingleCard h4, .wrap-Section-ThreeCards h4 {
  font-size: clamp(1.1rem, 2.3vw, 1.4rem);
}

.wrap-Section-SingleCard h5, .wrap-Section-ThreeCards h5 {
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.wrap-Section-SingleCard h6, .wrap-Section-ThreeCards h6 {
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
}

.wrap-Section-SingleCard p, .wrap-Section-ThreeCards p {
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
}

.wrap-Section-SingleCard b, .wrap-Section-SingleCard strong, .wrap-Section-SingleCard mark, .wrap-Section-SingleCard u,
.wrap-Section-ThreeCards b, .wrap-Section-ThreeCards strong, .wrap-Section-ThreeCards mark, .wrap-Section-ThreeCards u {
  font-size: inherit;
}

.wrap-Section-SingleCard b, .wrap-Section-ThreeCards b {
  font-weight: bold;
}

.wrap-Section-SingleCard strong, .wrap-Section-ThreeCards strong {
  color: var(--Color-Important);
  font-weight: bold;
}

.wrap-Section-SingleCard u, .wrap-Section-ThreeCards u {
  text-decoration: none;
  color: var(--Color-NotImportant);
}

.wrap-Section-SingleCard mark, .wrap-Section-ThreeCards mark {
  background-color: var(--Color-MarkColor);
  color: var(--Color-Important);
}

.wrap-Section-SingleCard button, .wrap-Section-ThreeCards button {
  margin: 5px;
  padding: 5px;
  border-color: var(--Color-SecBack);
  background-color: var(--Color-ButtonUp);
  color: var(--Color-ButtonTextColor);
}

.wrap-Section-SingleCard button:hover, .wrap-Section-ThreeCards button:hover {
  background-color: var(--Color-ButtonHover);
}

.wrap-Section-SingleCard button:active, .wrap-Section-ThreeCards button:active {
  background-color: var(--Color-ButtonDown);
}

.blank-div-wrapper {
  position: relative;
  margin: clamp(15px, 5vw, 20px) 0 clamp(15px, 5vw, 20px) 0;
  padding: 1%;
  border-radius: clamp(15px, 5vw, 20px);
  display: block;
  width: clamp(350px, 70vw, 960px);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: var(--Color-MainBack);
}

.blank-for-3Cards-wrapper {
  margin: 1rem;
  position: relative;
  display: block;
  width: clamp(400px, 40%, 450px);
}

.blank-for-1Card-wrapper {
  position: relative;
  display: block;
  width: clamp(400px, 70%, 500px);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.navigation {
  margin: 1rem;
}

nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  width: 90%;
  background-color: #101010AA;
  color: #eeeeee;
  top: 0;
  left: 0;
  padding: 0.5rem 2rem 0.5rem 2rem;
  z-index: 10;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-shadow: 0 0.4rem 0.5rem #10101010;
          box-shadow: 0 0.4rem 0.5rem #10101010;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media screen and (max-width: 768px) {
  nav {
    padding: 1rem 2rem 1rem 2rem;
  }
}

nav h1 {
  white-space: nowrap;
  font-size: 1.8rem;
  color: var(--white-brightest-1);
}

@media screen and (max-width: 420px) {
  nav h1 {
    font-size: 1.5rem;
    padding: 1rem;
  }
}

nav a {
  font-size: 0.8rem;
  color: #e0e0ff;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

nav a:hover {
  color: #ffffe0;
  border-bottom: 0.2rem solid #ffe8e8;
}

nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2.5rem;
}

@media screen and (max-width: 768px) {
  nav ul {
    position: fixed;
    background-color: var(--bg-color);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    top: 86px;
    left: 10%;
    width: 80%;
    text-align: center;
    -webkit-transform: translateX(120%);
            transform: translateX(120%);
    -webkit-transition: -webkit-transform 0.5s ease-in;
    transition: -webkit-transform 0.5s ease-in;
    transition: transform 0.5s ease-in;
    transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
  }
}

@media screen and (max-width: 768px) {
  nav ul.show {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

nav ul li {
  font-weight: 100;
}

@media screen and (max-width: 768px) {
  nav ul li {
    margin: 0.5rem;
  }
}

.burger-menu {
  color: #5050df;
  font-size: 2rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: none;
}

@media screen and (max-width: 768px) {
  .burger-menu {
    display: block;
  }
}

.InputRadio3DSphere-wrapper {
  --WidthHeight: clamp(90px, 22vw, 200px);
  width: var(--WidthHeight);
  height: var(--WidthHeight);
  position: relative;
  display: inline-block;
}

.InputRadio3DSphere-wrapper input[type=radio] {
  position: absolute;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-perspective: 1px;
          perspective: 1px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(-80deg);
          transform: rotateX(-80deg);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  left: 0;
  top: 25%;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--Color-MainBack)), color-stop(var(--Color-SecBack)), to(var(--Color-MainText)));
  background: linear-gradient(var(--Color-MainBack), var(--Color-SecBack), var(--Color-MainText));
}

.InputRadio3DSphere-wrapper input[type=radio]:checked ~ span {
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.InputRadio3DSphere-wrapper input[type=radio]:hover ~ label {
  text-shadow: 1px 1px 1px var(--Color-MainShadow);
}

.InputRadio3DSphere-wrapper input[type=radio]:hover:not(:checked) ~ span {
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-animation: InputButton3D-Flashing 1s ease-in-out 0s infinite;
          animation: InputButton3D-Flashing 1s ease-in-out 0s infinite;
}

@-webkit-keyframes InputButton3D-Flashing {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  50% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes InputButton3D-Flashing {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  50% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

.InputRadio3DSphere-wrapper label {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 0;
  color: var(--Color-MainText);
}

.InputRadio3DSphere-wrapper span {
  --Sphere-TextColor: var(--Color-MainText);
  --Sphere-MainColor: var(--Color-MainBack);
  --Sphere-SubColor: var(--Color-MainShadow);
  --Sphere-LeftSpotLight: 70%;
  --Sphere-RightSpotLight: 70%;
  --TotalSpheres: 1;
  position: relative;
  display: inline-block;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  border-radius: 50%;
  background: radial-gradient(circle farthest-corner at var(--Sphere-LeftSpotLight) var(--Sphere-RightSpotLight), var(--Sphere-MainColor) 10%, var(--Sphere-SubColor) 80%);
  width: calc(var(--WidthHeight)/2);
  height: calc(var(--WidthHeight)/2);
  color: var(--Sphere-TextColor);
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  text-overflow: ellipsis;
  padding: 0;
  line-height: calc(var(--WidthHeight)/2);
  left: -9999px;
  color: var(--Color-SecShadow);
  font-size: clamp(1.5rem, 4vw, 2rem);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.InputRadio3DColor-wrapper {
  --WidthHeight: clamp(75px, 10vw, 100px);
  position: relative;
  display: inline-block;
  width: var(--WidthHeight);
  height: var(--WidthHeight);
}

.InputRadio3DColor-wrapper input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 50%;
  background: radial-gradient(90% 90% ellipse at 50% 50%, var(--Color-MainBack), var(--Color-MainBack), var(--Color-MainText), var(--Color-MainText));
}

.InputRadio3DColor-wrapper input[type=radio]:hover {
  background: radial-gradient(90% 90% ellipse at 50% 50%, var(--Color-MainBack), var(--Color-SecBack), var(--Color-MainText), var(--Color-MainText));
}

.InputRadio3DColor-wrapper input[type=radio]:checked {
  background: radial-gradient(90% 90% ellipse at 50% 50%, var(--Color-MainBack), var(--Color-MainShadow), var(--Color-MainText), var(--Color-MainText));
}

.InputRadio3DColor-wrapper label {
  position: absolute;
  border-radius: 50%;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: clamp(1.3rem, 3.8vw, 1.8rem);
  line-height: calc(var(--WidthHeight)/2);
}

.MoreOrLess * {
  position: relative;
  display: inline;
}

.MoreOrLess label {
  cursor: pointer;
  color: var(--Color-Important);
}

.MoreOrLess input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.MoreOrLess input[type=checkbox]:hover ~ label {
  color: var(--Color-NotImportant);
}

.MoreOrLess input[type=checkbox]:checked ~ label::before {
  content: "...more";
}

.MoreOrLess input[type=checkbox]:not(:checked) ~ label::before {
  content: "...less";
}

.MoreOrLess input[type=checkbox]:checked ~ article, .MoreOrLess input[type=checkbox]:checked ~ .article {
  display: none;
}

.MoreOrLess input[type=checkbox]:not(:checked) ~ .article {
  margin-bottom: 1em;
}

.ScrollDown * {
  position: relative;
  display: block;
  width: 100%;
}

.ScrollDown input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.ScrollDown input[type=checkbox]:hover ~ label, .ScrollDown input[type=checkbox]:not(:checked) ~ label {
  background-color: var(--Color-ButtonDown);
  border: solid var(--Color-BorderDown);
}

.ScrollDown input[type=checkbox]:checked ~ label > article {
  display: none;
}

.ScrollDown input[type=checkbox]:checked ~ label {
  border: solid var(--Color-BorderUp);
}

.ScrollDown input[type=checkbox]:checked ~ label i:before {
  content: "▼";
}

.ScrollDown label:last-child {
  margin-bottom: 1em;
}

.ScrollDown label {
  cursor: pointer;
  color: var(--Color-MainText);
  margin-top: 0.5em;
  background-color: var(--Color-SecBack);
  border-radius: 1vw;
  -webkit-animation: ScrollDown-bounceInUp 1s ease both;
          animation: ScrollDown-bounceInUp 1s ease both;
}

.ScrollDown label:nth-of-type(1) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.ScrollDown label:nth-of-type(2) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}

@-webkit-keyframes ScrollDown-bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
            transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes ScrollDown-bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
            transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.ScrollDown label i {
  position: absolute;
  display: inline;
  padding: 3px;
  margin: 0;
  left: 0;
  text-align: right;
}

.ScrollDown label i:before {
  content: "▲";
}

.ScrollDown label article {
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 1vw;
  border: solid var(--Color-MainShadow);
  background-color: var(--Color-SecBack);
  border-width: 0 1px 5px 1px;
  padding: 1em;
}

.InputCheckboxWithSphere-wrapper {
  --Width:clamp(200px,30vw,400px);
  --Height:clamp(60px,12vw,150px);
  --SpanWidth:calc(var(--Width)*0.85);
  width: var(--Width);
  height: var(--Height);
  position: relative;
  display: inline-block;
  border-radius: calc( var(--Width) + 5vw);
  border: var(--Color-SecBack) solid 1vw;
}

.InputCheckboxWithSphere-wrapper input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: calc( var(--Width) + 5vw);
  opacity: 0.5;
  border: var(--Color-NotImportant) solid 1vw;
  background-color: var(--Color-ButtonUp);
  -webkit-transition: background-color 1s;
  transition: background-color 1s;
}

.InputCheckboxWithSphere-wrapper input[type=checkbox]:checked {
  background-color: var(--Color-ButtonDown);
  -webkit-transition: background-color 1s;
  transition: background-color 1s;
}

.InputCheckboxWithSphere-wrapper input[type=checkbox]:checked ~ label {
  left: calc(100% - var(--Diameter));
  -webkit-transition: left 1s;
  transition: left 1s;
}

.InputCheckboxWithSphere-wrapper input[type=checkbox]:checked ~ label::before {
  content: "Yes";
}

.InputCheckboxWithSphere-wrapper label {
  --Diameter: calc( var(--Height) * 0.8 );
  color: var(--Color-MainText);
  --Sphere-TextColor: var(--Color-MainText);
  --Sphere-MainColor: var(--Color-MainBack);
  --Sphere-SubColor: var(--Color-MainShadow);
  --Sphere-LeftSpotLight: 70%;
  --Sphere-RightSpotLight: 70%;
  --TotalSpheres: 1;
  position: relative;
  display: inline-block;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  border-radius: 50%;
  background: radial-gradient(circle farthest-corner at var(--Sphere-LeftSpotLight) var(--Sphere-RightSpotLight), var(--Sphere-MainColor) 10%, var(--Sphere-SubColor) 80%);
  width: var(--Diameter);
  height: var(--Diameter);
  color: var(--Sphere-TextColor);
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  text-overflow: ellipsis;
  padding: 0;
  line-height: var(--Diameter);
  position: absolute;
  display: block;
  width: var(--Diameter);
  height: var(--Diameter);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  -webkit-transition: left 1s;
  transition: left 1s;
}

.InputCheckboxWithSphere-wrapper label:before {
  content: "No";
}

.InputCheckboxWithSphere-wrapper span {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  color: var(--Color-ButtonTextColor);
  background-color: transparent;
  line-height: calc( var(--Height) * 0.75);
}

.siSwitch input[type=checkbox] {
  --Width: 3em;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0 0.3em 0 0.3em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: var(--Width);
  left: 0;
  border-radius: calc( var(--Width) + 5vw);
  border: var(--Color-MainShadow) solid 1vw;
  border-width: 0.1em;
  --PL:60%;
  color: var(--Color-ButtonTextColor);
  -webkit-transition: background-color 0.25s ease-in 0.25s;
  transition: background-color 0.25s ease-in 0.25s;
}

.siSwitch input[type=checkbox]:not(:checked) {
  -webkit-box-shadow: 0 0.1em 0.1em var(--Color-MainShadow), inset 0px -0.1em 0.1em -0.1em var(--Color-MainShadow);
          box-shadow: 0 0.1em 0.1em var(--Color-MainShadow), inset 0px -0.1em 0.1em -0.1em var(--Color-MainShadow);
  background-color: var(--Color-MainBack);
}

.siSwitch input[type=checkbox]:not(:checked)::before {
  content: "⬤";
  padding-left: 0;
  -webkit-animation: siSwitch-SwitchOff 0.5s ease-in-out 0s 1;
          animation: siSwitch-SwitchOff 0.5s ease-in-out 0s 1;
}

@-webkit-keyframes siSwitch-SwitchOn {
  from {
    padding-left: 0;
  }
  to {
    padding-left: var(--PL);
  }
}

@keyframes siSwitch-SwitchOn {
  from {
    padding-left: 0;
  }
  to {
    padding-left: var(--PL);
  }
}

.siSwitch input[type=checkbox]:checked {
  -webkit-box-shadow: 0 0.1em 0.1em var(--Color-MainShadow), inset 0px -0.1em 0.1em -0.1em var(--Color-MainShadow);
          box-shadow: 0 0.1em 0.1em var(--Color-MainShadow), inset 0px -0.1em 0.1em -0.1em var(--Color-MainShadow);
  background-color: var(--Color-Important);
}

.siSwitch input[type=checkbox]:checked::before {
  content: "⬤";
  padding-left: var(--PL);
  -webkit-animation: siSwitch-SwitchOn 0.5s ease-in-out 0s 1;
          animation: siSwitch-SwitchOn 0.5s ease-in-out 0s 1;
}

@-webkit-keyframes siSwitch-SwitchOff {
  from {
    padding-left: var(--PL);
  }
  to {
    padding-left: 0;
  }
}

@keyframes siSwitch-SwitchOff {
  from {
    padding-left: var(--PL);
  }
  to {
    padding-left: 0;
  }
}

.siSwitch label {
  background-color: var(--Color-MainBack);
  color: var(--Color-MainText);
}

.MagnetoSubmittion {
  --Sphere-TextColor: var(--Color-MainText);
  --Sphere-MainColor: var(--Color-MainBack);
  --Sphere-SubColor: var(--Color-MainShadow);
  --Sphere-LeftSpotLight: 70%;
  --Sphere-RightSpotLight: 70%;
  --TotalSpheres: 1;
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.MagnetoSubmittion pre > article:nth-child(1) {
  -webkit-transform: translateX(-500vw);
          transform: translateX(-500vw);
}

.MagnetoSubmittion pre > article:nth-child(2) {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-animation: MagnetoSubmit-pre 1s ease 0s infinite;
          animation: MagnetoSubmit-pre 1s ease 0s infinite;
}

.MagnetoSubmittion em > article:nth-child(2) {
  -webkit-transform: translateX(-500vw);
          transform: translateX(-500vw);
}

.MagnetoSubmittion em > article:nth-child(1) {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-animation: MagnetoSubmit-em 1s ease 0s infinite;
          animation: MagnetoSubmit-em 1s ease 0s infinite;
}

@-webkit-keyframes MagnetoSubmit-pre {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  16.5% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  33% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  50% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  66% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes MagnetoSubmit-pre {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  16.5% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  33% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  50% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  66% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes MagnetoSubmit-em {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  66% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  75% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes MagnetoSubmit-em {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  66% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  75% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

.MagnetoSubmittion article {
  position: relative;
  display: inline-block;
}

.MagnetoSubmittion input[type=submit] {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background-color: transparent;
}

.MagnetoSubmittion label {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: transparent;
}

.MagnetoSubmittion input[type=submit]:hover ~ article pre > article:nth-child(2), .MagnetoSubmittion span:hover ~ article pre > article:nth-child(2) {
  -webkit-animation: none;
          animation: none;
}

.MagnetoSubmittion input[type=submit]:hover ~ article em > article:nth-child(1), .MagnetoSubmittion span:hover ~ article em > article:nth-child(1) {
  -webkit-animation: none;
          animation: none;
}

.MagnetoSubmittion input[type=submit]:active ~ article > pre > article > span, .MagnetoSubmittion input[type=submit]:active ~ article > em > article > span, .MagnetoSubmittion input[type=submit]:active ~ article > span {
  --Sphere-TextColor: var(--Color-Important);
  --Sphere-MainColor: var(--Color-MainShadow);
  --Sphere-SubColor: var(--Color-MainBack);
}

.MagnetoSubmittion span {
  position: relative;
  display: inline-block;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  border-radius: 50%;
  background: radial-gradient(circle farthest-corner at var(--Sphere-LeftSpotLight) var(--Sphere-RightSpotLight), var(--Sphere-MainColor) 10%, var(--Sphere-SubColor) 80%);
  --ts: calc(var(--TotalSpheres) + 3);
  --t: clamp(calc(350px/var(--ts)), calc(45vw / var(--TotalSpheres)), calc(960px/var(--ts)));
  width: var(--t);
  height: var(--t);
  position: relative;
  display: block;
  margin: 0;
  padding: 25% 0;
  border-color: var(--Color-MainShadow);
  color: var(--Sphere-TextColor);
  font-size: clamp(1rem, 2.5vw, 1.8rem);
}

.animInput-wrapper, .anim-button {
  max-width: 50em;
  margin: 0 auto;
  padding: 0.938rem;
  border-radius: 1em;
}

@media screen and (max-width: 720) {
  .animInput-wrapper, .anim-button {
    max-width: 98%;
  }
}

.animInput001-wrapper {
  --InputBox-background-color: blue;
  --InputBox-Text-color:black;
  --Input-label-text-color: rgb(13, 151, 185);
  --Input-is-mandatory-Text-color: #ad5353;
  --Input-is-mandatory-Text: "This Field is Mandatory";
}

.animInput002-wrapper {
  --InputBox-background-color: blue;
  --InputBox-Text-color:black;
  --Input-label-text-color: rgb(13, 151, 185);
  --Input-is-mandatory-Text-color: #ad5353;
  --Input-is-mandatory-Text: "This Field is Mandatory";
}

.animInput-wrapper h2 {
  text-align: center;
  margin-bottom: 2em;
  color: var(--secondary-color);
}

.animInput-wrapper h2 small {
  font-size: 1em;
  font-weight: normal;
  color: #585555;
  display: block;
}

.animInput-wrapper .group {
  position: relative;
}

.animInput-wrapper input[type='submit'] {
  display: inline-block;
  padding: 0.1em 1em 0.1em 0.5em;
  width: 100%;
  margin-top: 0.5em;
  font-size: 1.5em;
  background-color: var(--InputBox-background-color);
  color: var(--InputBox-Text-color);
  border-radius: 0.5em;
}

.animInput-wrapper input[type='submit']:hover {
  background-color: var(--Input-is-mandatory-Text-color);
}

.animInput-wrapper input[type='text'] {
  display: inline-block;
  padding: 0.1em 1em 0.1em 0.5em;
  width: 100%;
  margin-top: 0.5em;
  font-size: 1.5em;
  background-color: var(--InputBox-background-color);
  color: var(--InputBox-Text-color);
  outline: none;
}

.animInput001-wrapper input[type='text'] {
  border: hidden;
  border-bottom: 0.01em solid var(--Input-label-text-color);
  border-radius: 0.5em;
  margin-bottom: 0.2em;
}

.animInput001-wrapper input[type='text']:focus {
  border-bottom: 0.2em solid var(--Input-label-text-color);
  margin-bottom: 0em;
  -webkit-animation: animInput001-AnimateBottomLine 1s ease 0s 1;
          animation: animInput001-AnimateBottomLine 1s ease 0s 1;
}

@-webkit-keyframes animInput001-AnimateBottomLine {
  0% {
    border-bottom: 0.2em double var(--Input-label-text-color);
  }
  30% {
    border-bottom: 0.2em solid var(--Input-is-mandatory-Text-color);
  }
  60% {
    border-bottom: 0.2em solid var(--Input-is-mandatory-Text-color);
  }
  100% {
    border-bottom: 0.2em solid var(--Input-label-text-color);
  }
}

@keyframes animInput001-AnimateBottomLine {
  0% {
    border-bottom: 0.2em double var(--Input-label-text-color);
  }
  30% {
    border-bottom: 0.2em solid var(--Input-is-mandatory-Text-color);
  }
  60% {
    border-bottom: 0.2em solid var(--Input-is-mandatory-Text-color);
  }
  100% {
    border-bottom: 0.2em solid var(--Input-label-text-color);
  }
}

.animInput002-wrapper input[type='text'] {
  border: 1px solid var(--Input-label-text-color);
  border-bottom: 1.2em solid var(--Input-label-text-color);
  border-radius: 0.5em;
}

.animInput002-wrapper input[type='text']:focus {
  border: 1px solid var(--Input-label-text-color);
  border-bottom: 1.2em solid var(--Input-label-text-color);
}

.animInput-wrapper label, .animInput-wrapper h3, .animInput-wrapper span {
  position: relative;
  display: inline-block;
  font-size: 1.5em;
  color: var(--Input-label-text-color);
  font-weight: normal;
  pointer-events: none;
  left: 0.5em;
  padding: 0 0.1em 0 0.1em;
  -webkit-transition: 0.2s ease all;
  transition: 0.2s ease all;
}

.animInput001-wrapper label {
  -webkit-transform: translateY(-1.8em);
          transform: translateY(-1.8em);
}

.animInput002-wrapper label {
  -webkit-transform: translateY(-2.6em);
          transform: translateY(-2.6em);
}

.animInput-wrapper span {
  display: block;
  background-color: transparent;
  font-size: 2em;
  font-weight: bolder;
}

.animInput-wrapper h3 {
  display: block;
}

.animInput-wrapper .highlight {
  color: var(--Input-is-mandatory-Text-color);
}

.animInput-wrapper input[type='text']:focus ~ label, .animInput-wrapper input[type='text']:valid:not(:placeholder-shown) ~ label {
  margin-bottom: 0.75em;
  font-size: 1em;
  color: var(--Input-label-text-color);
}

.animInput001-wrapper input[type='text']:focus ~ label, .animInput001-wrapper input[type='text']:valid:not(:placeholder-shown) ~ label {
  -webkit-transform: translateY(-4em);
          transform: translateY(-4em);
}

.animInput002-wrapper input[type='text']:focus ~ label, .animInput002-wrapper input[type='text']:valid:not(:placeholder-shown) ~ label {
  -webkit-transform: translate(0, -6em);
          transform: translate(0, -6em);
}

.animInput-wrapper input[required] ~ label::after {
  content: "*";
  color: var(--Input-is-mandatory-Text-color);
}

.animInput001-wrapper .mandatory {
  display: hidden;
  font-size: 1em;
  top: -2em;
  margin: 0;
  padding: 0;
  background-color: transparent;
  color: transparent;
}

.animInput001-wrapper input:focus:invalid:not(:placeholder-shown) ~ .mandatory {
  display: inline-block;
  top: -2em;
  left: 0.5em;
  height: 0;
  color: var(--Input-is-mandatory-Text-color);
  -webkit-animation: animInput001-mandatory-amin 1s ease 0s 1;
          animation: animInput001-mandatory-amin 1s ease 0s 1;
}

@-webkit-keyframes animInput001-mandatory-amin {
  0% {
    top: -4.5em;
    left: 0;
  }
  50% {
    left: 3em;
  }
  100% {
    top: -2em;
    left: 0.5em;
  }
}

@keyframes animInput001-mandatory-amin {
  0% {
    top: -4.5em;
    left: 0;
  }
  50% {
    left: 3em;
  }
  100% {
    top: -2em;
    left: 0.5em;
  }
}

.animInput002-wrapper .mandatory {
  display: inline-block;
  font-size: 1em;
  -webkit-transform: translate(0.5em, -4em);
          transform: translate(0.5em, -4em);
  margin: 0;
  padding: 0;
  background-color: transparent;
  color: var(--Input-is-mandatory-Text-color);
}

.animInput002-wrapper input:focus:invalid:not(:placeholder-shown) ~ .mandatory {
  display: inline-block;
  height: 0;
  color: var(--Input-is-mandatory-Text-color);
  -webkit-transform: translate(0.5em, -4em);
          transform: translate(0.5em, -4em);
  -webkit-animation: animInput002-mandatory-amin 1s ease 0s 1;
          animation: animInput002-mandatory-amin 1s ease 0s 1;
}

@-webkit-keyframes animInput002-mandatory-amin {
  0% {
    -webkit-transform: translate(0.5em, -4em);
            transform: translate(0.5em, -4em);
  }
  30% {
    -webkit-transform: translate(2.5em, -4em);
            transform: translate(2.5em, -4em);
  }
  100% {
    -webkit-transform: translate(0.5em, -4em);
            transform: translate(0.5em, -4em);
  }
}

@keyframes animInput002-mandatory-amin {
  0% {
    -webkit-transform: translate(0.5em, -4em);
            transform: translate(0.5em, -4em);
  }
  30% {
    -webkit-transform: translate(2.5em, -4em);
            transform: translate(2.5em, -4em);
  }
  100% {
    -webkit-transform: translate(0.5em, -4em);
            transform: translate(0.5em, -4em);
  }
}

/*
.anim-input-wrapper .bar  { top:-3.2em;width:100%; height:0; padding:0; }       // Bottom bar of each Input Box
.anim-input-wrapper .bar:before, .bar:after   {
    content:'';    display:inline-block;
    width:0; height:0.2em;
    background: var(--Input-label-text-color);
    transition:0.2s ease all; 
}
.anim-input-wrapper .bar:before { left:50%; }
.anim-input-wrapper .bar:after { right:50%;  }
.anim-input-wrapper input:focus ~ .bar:before, input:focus ~ .bar:after { width:50%; }         // Style bar when input is in focus or valid (aka active state)
*/
.InputText3D-Wrapper {
  --Paper-Color: var(--Color-MainBack);
  --InputBox-background-color: var(--Color-MainBack);
  --InputBox-Text-color: var(--Color-MainText);
  --Input-label-text-color: var(--Color-SecText);
  --Input-is-mandatory-Text-color: var(--Color-Important);
  --Input-is-mandatory-Text: "This Field is Mandatory";
  --FontSize: clamp(1rem, 2vw, 1.2rem);
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: var(--Paper-Color);
  padding: clamp(3px, 0.4vw, 4px) 0 clamp(20px, 3vw, 32px) 0;
}

.InputText3D-Wrapper input[type=text], .InputText3D-Wrapper label, .InputText3D-Wrapper span {
  display: block;
  line-height: 1.8;
  width: 100%;
  padding: clamp(5px, 0.4vw, 4px) 10px 0 clamp(10px, 1.5vw, 16px);
}

.InputText3D-Wrapper input[type=text] {
  --dr:clamp(3px, 0.3vw, 5px);
  --ndr:clamp(-3px, -0.3vw, -5px);
  -webkit-box-shadow: inset var(--dr) var(--dr) var(--dr) 0px rgba(0, 0, 0, 0.8), inset var(--ndr) var(--ndr) var(--dr) 0px rgba(255, 255, 255, 0.8);
          box-shadow: inset var(--dr) var(--dr) var(--dr) 0px rgba(0, 0, 0, 0.8), inset var(--ndr) var(--ndr) var(--dr) 0px rgba(255, 255, 255, 0.8);
  position: relative;
  font-size: var(--FontSize);
  height: 100%;
  margin-top: clamp(1.5rem, 4vw, 2rem);
  outline: none;
  background-color: var(--InputBox-background-color);
  color: var(--InputBox-Text-color);
  border-radius: clamp(5px, 1.5vw, 10px);
}

.InputText3D-Wrapper label, .InputText3D-Wrapper span {
  position: absolute;
  margin: 0;
  background-color: transparent;
  text-align: left;
}

.InputText3D-Wrapper label {
  font-size: var(--FontSize);
  color: var(--Input-label-text-color);
  -webkit-transition: 0.2s ease all;
  transition: 0.2s ease all;
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
}

.InputText3D-Wrapper input[required] ~ label::after {
  content: " *";
  color: var(--Input-is-mandatory-Text-color);
}

.InputText3D-Wrapper input[type=text]:focus ~ label, .InputText3D-Wrapper input[type=text]:valid:not(:placeholder-shown) ~ label {
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  -webkit-transform: translateY(calc(clamp(60px, 9.5vw, 90px) * -1));
          transform: translateY(calc(clamp(60px, 9.5vw, 90px) * -1));
}

.InputText3D-Wrapper span {
  display: none;
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  font-weight: bolder;
  color: var(--Input-is-mandatory-Text-color);
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
}

.InputText3D-Wrapper input[type=text]:focus:invalid:not(:placeholder-shown) ~ span {
  display: inline;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  -webkit-animation: InputText3D-amin 1s ease 0s 1;
          animation: InputText3D-amin 1s ease 0s 1;
}

@-webkit-keyframes InputText3D-amin {
  0% {
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
  }
  50% {
    -webkit-transform: translate(-25%, -100%);
            transform: translate(-25%, -100%);
  }
  100% {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}

@keyframes InputText3D-amin {
  0% {
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
  }
  50% {
    -webkit-transform: translate(-25%, -100%);
            transform: translate(-25%, -100%);
  }
  100% {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}

.siSelect {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  font-size: 1rem;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .siSelect {
    width: 90%;
  }
}

@media screen and (max-width: 420px) {
  .siSelect {
    width: 80%;
  }
}

@media screen and (max-width: 768px) {
  .siSelect h1 {
    width: 90%;
  }
}

@media screen and (max-width: 420px) {
  .siSelect h1 {
    width: 60%;
  }
}

.siSelect::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: var(--modern-color-black);
  -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);
          clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  -ms-grid-column-align: end;
      justify-self: end;
  margin-top: -1.5em;
  margin-right: 0.5em;
}

.siSelect select {
  width: auto;
  font-size: 1.4em;
  margin: -1em 0 2em 0;
  padding: 0 2em 0 0.5em;
  border-radius: 0.5em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

.siSelect select:hover {
  background-color: #e6f5f8;
}

.siSelect option {
  background-color: #e6f5f8;
}

.siSelect label {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 0 0;
}

.spinner001-wrapper {
  --radius: 20em;
  --background-color: white;
  --ImageAnimation: spinner001-animateImage0;
  position: relative;
  display: inline-block;
  margin: auto;
}

.spinner001-wrapper .main {
  position: relative;
  width: var(--radius);
  height: var(--radius);
  border-radius: var(--radius);
  border: 0.1em solid var(--pure-white);
  background: -webkit-gradient(linear, left top, left bottom, from(#eb31b0), color-stop(#e4c352), to(#7df8d6));
  background: linear-gradient(#eb31b0, #e4c352, #7df8d6);
  -webkit-box-shadow: 0px 0px 10em -5em var(--pure-black);
          box-shadow: 0px 0px 10em -5em var(--pure-black);
  -webkit-animation: spinner001-animate 5s linear infinite;
          animation: spinner001-animate 5s linear infinite;
}

@-webkit-keyframes spinner001-animate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spinner001-animate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.spinner001-wrapper .main::before {
  position: absolute;
  content: "";
  background-color: var(--background-color);
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  border-radius: var(--radius);
  border: 0.1rem solid var(--pure-white);
  -webkit-box-shadow: inset 0px 0px 10em -7em var(--pure-black);
          box-shadow: inset 0px 0px 10em -7em var(--pure-black);
}

.spinner001-wrapper img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  -webkit-animation: var(--ImageAnimation) 5s linear infinite;
          animation: var(--ImageAnimation) 5s linear infinite;
}

@-webkit-keyframes spinner001-animateImage0 {}

@keyframes spinner001-animateImage0 {}@-webkit-keyframes spinner001-animateImage1 {
  0% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(0deg) translate(0, 0);
            transform: translate(0, 0) rotate(0deg) translate(0, 0);
  }
  20% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(359deg) translate(0, 0);
            transform: translate(0, 0) rotate(359deg) translate(0, 0);
  }
  30% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(359deg) translate(0, 0);
            transform: translate(0, 0) rotate(359deg) translate(0, 0);
  }
  40% {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}@keyframes spinner001-animateImage1 {
  0% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(0deg) translate(0, 0);
            transform: translate(0, 0) rotate(0deg) translate(0, 0);
  }
  20% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(359deg) translate(0, 0);
            transform: translate(0, 0) rotate(359deg) translate(0, 0);
  }
  30% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(359deg) translate(0, 0);
            transform: translate(0, 0) rotate(359deg) translate(0, 0);
  }
  40% {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

@-webkit-keyframes spinner001-animateImage2 {
  /*
    0% { left: 5em; top: 5em; transform: translate(0, 0) rotate(0deg) translate(0, 0); }
    5% {  left: 5em; top: 5em; transform: translate(0, 0) rotate(359deg) translate(0, 0); }
    10% { left: 5em; top: 5em; transform: translate(0, 0) rotate(0deg) translate(0, 0); }
    15% {  left: 5em; top: 5em; transform: translate(0, 0) rotate(359deg) translate(0, 0); }
    20% { left: 5em; top: 5em; transform: translate(0, 0) rotate(0deg) translate(0, 0); }
    25% {  left: 5em; top: 5em; transform: translate(0, 0) rotate(359deg) translate(0, 0); }
    30% { left: 5em; top: 5em; transform: translate(0, 0) rotate(0deg) translate(0, 0); }
    35% {  left: 5em; top: 5em; transform: translate(0, 0) rotate(359deg) translate(0, 0); }
*/
  0% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(0deg) translate(0, 0);
            transform: translate(0, 0) rotate(0deg) translate(0, 0);
  }
  5% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(359deg) translate(0, 0);
            transform: translate(0, 0) rotate(359deg) translate(0, 0);
  }
  10% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(0deg) translate(0, 0);
            transform: translate(0, 0) rotate(0deg) translate(0, 0);
  }
  15% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(359deg) translate(0, 0);
            transform: translate(0, 0) rotate(359deg) translate(0, 0);
  }
  20% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(0deg) translate(0, 0);
            transform: translate(0, 0) rotate(0deg) translate(0, 0);
  }
  25% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(359deg) translate(0, 0);
            transform: translate(0, 0) rotate(359deg) translate(0, 0);
  }
  30% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(0deg) translate(0, 0);
            transform: translate(0, 0) rotate(0deg) translate(0, 0);
  }
  35% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(359deg) translate(0, 0);
            transform: translate(0, 0) rotate(359deg) translate(0, 0);
  }
  40% {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

@keyframes spinner001-animateImage2 {
  /*
    0% { left: 5em; top: 5em; transform: translate(0, 0) rotate(0deg) translate(0, 0); }
    5% {  left: 5em; top: 5em; transform: translate(0, 0) rotate(359deg) translate(0, 0); }
    10% { left: 5em; top: 5em; transform: translate(0, 0) rotate(0deg) translate(0, 0); }
    15% {  left: 5em; top: 5em; transform: translate(0, 0) rotate(359deg) translate(0, 0); }
    20% { left: 5em; top: 5em; transform: translate(0, 0) rotate(0deg) translate(0, 0); }
    25% {  left: 5em; top: 5em; transform: translate(0, 0) rotate(359deg) translate(0, 0); }
    30% { left: 5em; top: 5em; transform: translate(0, 0) rotate(0deg) translate(0, 0); }
    35% {  left: 5em; top: 5em; transform: translate(0, 0) rotate(359deg) translate(0, 0); }
*/
  0% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(0deg) translate(0, 0);
            transform: translate(0, 0) rotate(0deg) translate(0, 0);
  }
  5% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(359deg) translate(0, 0);
            transform: translate(0, 0) rotate(359deg) translate(0, 0);
  }
  10% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(0deg) translate(0, 0);
            transform: translate(0, 0) rotate(0deg) translate(0, 0);
  }
  15% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(359deg) translate(0, 0);
            transform: translate(0, 0) rotate(359deg) translate(0, 0);
  }
  20% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(0deg) translate(0, 0);
            transform: translate(0, 0) rotate(0deg) translate(0, 0);
  }
  25% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(359deg) translate(0, 0);
            transform: translate(0, 0) rotate(359deg) translate(0, 0);
  }
  30% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(0deg) translate(0, 0);
            transform: translate(0, 0) rotate(0deg) translate(0, 0);
  }
  35% {
    left: 25%;
    top: 25%;
    -webkit-transform: translate(0, 0) rotate(359deg) translate(0, 0);
            transform: translate(0, 0) rotate(359deg) translate(0, 0);
  }
  40% {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

.accordion001-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.accordion001-wrapper ul li input[type=checkbox] {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  cursor: pointer;
  opacity: 0;
}

.accordion001-wrapper ul li input[type=checkbox]:hover ~ label {
  color: var(--Color-MainText);
  background-color: var(--Color-ButtonDown);
}

.accordion001-wrapper ul li input[type=checkbox]:not(:checked) ~ i {
  top: 0.5rem;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.accordion001-wrapper ul li input[type=checkbox]:not(:checked) ~ div {
  display: block;
  height: 100%;
  visibility: visible;
  -webkit-animation: accordion001-ScrollDetails 1s ease-in 0s 1;
          animation: accordion001-ScrollDetails 1s ease-in 0s 1;
}

.accordion001-wrapper ul li input[type=checkbox]:not(:checked) ~ label {
  height: 100%;
}

.accordion001-wrapper ul li input[type=checkbox]:checked ~ div {
  -webkit-animation: accordion001-ScrollDetails2 1s ease-in 0s 1;
          animation: accordion001-ScrollDetails2 1s ease-in 0s 1;
}

.accordion001-wrapper ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
}

.accordion001-wrapper ul li {
  position: relative;
  margin-top: 0.5rem;
  -webkit-animation: accordion001-wrapper-bounceInUp 1s ease both;
          animation: accordion001-wrapper-bounceInUp 1s ease both;
}

@-webkit-keyframes accordion001-wrapper-bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
            transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes accordion001-wrapper-bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
            transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.accordion001-wrapper ul li:last-of-type {
  padding-bottom: 0;
}

.accordion001-wrapper ul li:nth-of-type(1) {
  border-top: none;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.accordion001-wrapper ul li:nth-of-type(2) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}

.accordion001-wrapper ul li:nth-of-type(3) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.accordion001-wrapper ul li i {
  position: absolute;
  display: block;
  top: 30%;
  right: 2%;
  padding: 3px;
  margin: 0;
  border: solid var(--Color-MainText);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.accordion001-wrapper ul li i:before, ul li i:after {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.accordion001-wrapper ul li label {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border-width: 3px;
  border: solid var(--Color-SecBack);
  border-radius: 1vw;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--Color-ButtonTextColor);
}

.accordion001-wrapper ul li div {
  position: relative;
  display: none;
  height: 0;
  margin: 0;
  padding: 0 1rem 0 1rem;
  width: 90%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 1vw;
  border: solid var(--Color-MainShadow);
  background-color: var(--Color-MainBack);
  border-width: 0 1px 5px 1px;
}

.NameCard001_Container, .NameCard002_Container {
  --TextColor:var(--Color-MainText);
  --BackColor:var(--Color-MainBack);
  --ShadowColor:var(--Color-MainShadow);
  --ButtonUpColor: var(--Color-ButtonUp);
  --ButtonDownColor: var(--Color-ButtonDown);
  --ButtonHoverColor: var(--Color-ButtonHover);
  --ButtonTextColor: var(--Color-ButtonTextColor);
  position: relative;
  display: block;
  text-align: center;
  width: 80%;
  font-size: 1.5rem;
  line-height: 1;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: 1em;
  -webkit-box-shadow: 0 0 1em 0 var(--ShadowColor);
          box-shadow: 0 0 1em 0 var(--ShadowColor);
  padding-bottom: 1.5em;
  color: var(--TextColor);
  background-color: var(--BackColor);
}

.NameCard001_CircleImg {
  position: relative;
  display: inline-block;
  font-size: clamp(1.5rem, 4vw, 2rem);
  width: 7em;
  height: 7em;
  margin-top: -3.5em;
  border-radius: 50%;
  border: solid 0.03em var(--ShadowColor);
  -webkit-box-shadow: 0 0 0 0.03em 0 var(--ShadowColor);
          box-shadow: 0 0 0 0.03em 0 var(--ShadowColor);
}

.NameCard001_CircleImg .CircleImg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.NameCard001_Container img, .NameCard002_Container img {
  display: inline-block;
  font-size: 1.5rem;
  width: 100%;
  height: 8em;
  background-color: transparent;
  background: cover center no-repeat;
  border-radius: 1em 1em 0 0;
}

.NameCard_More {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  text-align: center;
}

.NameCard_More button {
  position: relative;
  display: inline-block;
  margin-top: 2em;
  padding: 0.5em;
  font-size: clamp(1.1rem, 2.3vw, 1.4rem);
  font-weight: normal;
  border-radius: 1em;
  color: var(--Color-ButtonTextColor);
  background-color: var(--Color-ButtonUp);
  -webkit-box-shadow: 1px 1px 1px var(--ShadowColor);
          box-shadow: 1px 1px 1px var(--ShadowColor);
  border: 5px;
  border-color: val(--ShadowColor);
}

.NameCard_More button:hover {
  background-color: var(--Color-ButtonHover);
}

.NameCard_More button:active {
  background-color: var(--Color-ButtonDown);
}

.NameCard001_Container .Header, .NameCard002_Container .Header, .NameCard001_Container .Details, .NameCard002_Container .Details {
  position: relative;
  display: block;
  margin: 0.5em;
}

.matrix-button-container {
  position: relative;
  display: inline-block;
  margin: 2vh 0 2vh 0;
  width: clamp(150px, 60vw, 300px);
  height: clamp(90px, 37vw, 180px);
}

.matrix-button-container button {
  color: var(--Color-ButtonTextColor);
  text-align: center;
  background-color: transparent;
  font-size: clamp(1.5rem, 4vw, 2rem);
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-radius: clamp(10px, 3vw, 20px);
  -webkit-box-shadow: 0 0 0.3vw 0.3vw var(--Color-MainShadow);
          box-shadow: 0 0 0.3vw 0.3vw var(--Color-MainShadow);
}

.matrix-button-container button:hover {
  background-image: url(../images/stopmatrix.jpg);
  background-size: 100% 100%;
  -webkit-animation: matrix-button-container-Animatebutton 2s linear 0s 1;
          animation: matrix-button-container-Animatebutton 2s linear 0s 1;
}

@-webkit-keyframes matrix-button-container-Animatebutton {
  from {
    background-size: 0% 0%;
  }
  to {
    background-size: 100% 100%;
  }
}

@keyframes matrix-button-container-Animatebutton {
  from {
    background-size: 0% 0%;
  }
  to {
    background-size: 100% 100%;
  }
}

:root {
  --primary-color:#5264AE;
  --secondary-color: #ff7235;
}

.OverallBackground {
  background-color: white;
}

.FormBackground {
  background-color: #fff5da;
  -webkit-box-shadow: 2px 2px #838383;
          box-shadow: 2px 2px #838383;
}

:root {
  --TwinCommonColor: black;
}

.Rubberband {
  position: relative;
  display: block;
  animation: Rubberband-Move 1s ease-in 0s infinite alternate-reverse;
}

.Rubberband h1, .Rubberband p {
  font-family: 'Times New Roman', Times, serif;
}

.Rubberband h1 {
  color: var(--TwinCommonColor);
}

.Rubberband h1:hover {
  color: blue;
}

.Rubberband p {
  color: green;
}

@-webkit-keyframes Rubberband-Movex {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes Rubberband-Movex {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.Drive {
  position: relative;
  display: block;
}

.Drive h1, .Drive p {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.Drive h1 {
  background-color: var(--TwinCommonColor);
  color: yellow;
}

.Drive p {
  color: purple;
}

.Drive p:hover {
  background-color: blue;
}
/*# sourceMappingURL=styles.css.map */