/* v.1.2.0
 * style addon */



html {
height: auto;
min-height: 300px;
max-height: 2600px;
}
html, body { width: 500px; max-width: 100%;  }
form { margin-top: 30px; max-width: 450px; }


.grid {
display: grid;
grid-template-columns: 30% calc(70% - 5px);
grid-gap: 5px;
margin: 0 auto;
padding: 0;
justify-content: center;
align-items: center;
text-align: center;
}


/*input[type="text"] { min-height: 25px; }*/

/* fixed */
html, body { scroll-padding-top: 35px; }





/* color theme */

/* light */
:root{
--bg: #F0F0F0;
--l: #F5F5F5; 
--l2: #F7F7F7; 
--l3: #FCFCFC; 
--l4: #FFFFFF; 
--d: #E6E6E6; 
--d2: #E0E0E0; 
--d3: #CCCCCC; 
--d4: #ABABAB; 
--c: #595959;
--cOp: #59595980; 
--c2: #333333; 
--c3: #1A1A1A; 
--c4: #0D0D0D; 
--red: #943328;
--red2: #B33E30;
--orange: #D47900;
--orange2: #EB8600;
--yellow: #A88100;
--yellow2: #C29500;
--green: #29800C;
--green2: #31990F;
--blue: #1C88BA;
--blue2: #23A8E6;
--indigo: #5B67E2;
--indigo2: #6370F5;
--violet: #9E377C;
--violet2: #B03D8A;
}

html{ scrollbar-color: var(--d4) var(--l2); }
::-webkit-scrollbar { background-color: var(--l2); }
::-webkit-scrollbar-thumb { background-color: var(--d3); }


/* auto dark */
@media (prefers-color-scheme: dark) {


:root{
--bg: #2D2D2E;
--l: #2F2F30;
--l2: #353536;
--l3: #3D3E40;
--l4: #505359;
--d: #2A2A2B;
--d2: #252526;
--d3: #1B1C1C;
--d4: #121212;
--c: #B3B3B3; 
--cOp: #B3B3B380;
--c2: #D6D6D6; 
--c3: #E6E6E6; 
--c4: #F7F7F7; 
--red: #FF7066;
--red2: #FF938C;
--orange: #E6BA67;
--orange2: #FFD280;
--yellow: #D9CA82;
--yellow2: #E6D57F;
--green: #8ACC70;
--green2: #ABE695;
--blue: #8AC9E6;
--blue2: #99DDFF;
--indigo: #A9B0F2;
--indigo2: #CCD0FF;
--violet: #C999CC;
--violet2: #D8B8D9;
}

html::before, .dd, .logo, .logo2 { /*filter: invert(70%); */ filter: brightness(70%); }

input[type="submit"] { background: var(--l); color: var(--c2); }
input[type="submit"]:hover { background: var(--d); color: var(--c3); }

html{ scrollbar-color: var(--l4) var(--d2); }
::-webkit-scrollbar { background-color: var(--d2); }
::-webkit-scrollbar-thumb { background-color: var(--l3); }

}