/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
:root {
        --ColorDm01: #FFFFFF;
        --ColorDm02: #F8F8F8; 
        --ColorDm03: #F0F0F0; 
        --ColorDm04: #E0E0E0; 
        --ColorSc01: #000000;
        --ColorSc02: #080808;
        --ColorSc03: #101010;
        --ColorSc04: #202020;
        --ColorAc01: #20D080;
        --ColorAc02: #303030;
} :root[data-theme="d"] {
} :root {
        accent-color: var(--ColorAc01);
}
@font-face {
        font-family:'Roboto'; src: url('/Roboto.ttf') format('truetype'); font-style: normal;
        font-weight: 100 900; font-display: swap;
}
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
html {
        scroll-behavior: smooth;
} @media all and (min-width: 0.0px) { html { font-size: 16.0px; }
                                      body { display: none ; }
/*|| M0.1 - M0.G ||*/
} @media all and (min-width: 204px) { html { font-size:  8.50px; }
                                      body { display: block; }
} @media all and (min-width: 216px) { html { font-size:  9.00px; }
} @media all and (min-width: 228px) { html { font-size:  9.50px; }
} @media all and (min-width: 240px) { html { font-size: 10.00px; }
} @media all and (min-width: 252px) { html { font-size: 10.50px; }
} @media all and (min-width: 264px) { html { font-size: 11.00px; }
} @media all and (min-width: 276px) { html { font-size: 11.50px; }
} @media all and (min-width: 288px) { html { font-size: 12.00px; }
} @media all and (min-width: 300px) { html { font-size: 12.50px; }
} @media all and (min-width: 312px) { html { font-size: 13.00px; }
} @media all and (min-width: 324px) { html { font-size: 13.50px; }
} @media all and (min-width: 336px) { html { font-size: 14.00px; }
} @media all and (min-width: 348px) { html { font-size: 14.50px; }
} @media all and (min-width: 360px) { html { font-size: 15.00px; }
} @media all and (min-width: 372px) { html { font-size: 15.50px; }
} @media all and (min-width: 384px) { html { font-size: 16.00px; }
/*|| M1.1 - M1.G ||*/
} @media all and (min-width: 396px) { html { font-size: 16.50px; }
} @media all and (min-width: 408px) { html { font-size: 17.00px; }
} @media all and (min-width: 420px) { html { font-size: 17.50px; }
} @media all and (min-width: 432px) { html { font-size: 18.00px; }
} @media all and (min-width: 444px) { html { font-size: 18.50px; }
} @media all and (min-width: 456px) { html { font-size: 19.00px; }
} @media all and (min-width: 468px) { html { font-size: 19.50px; }
} @media all and (min-width: 480px) { html { font-size: 20.00px; }
} @media all and (min-width: 492px) { html { font-size: 20.50px; }
} @media all and (min-width: 504px) { html { font-size: 21.00px; }
} @media all and (min-width: 516px) { html { font-size: 21.50px; }
} @media all and (min-width: 528px) { html { font-size: 22.00px; }
} @media all and (min-width: 540px) { html { font-size: 22.50px; }
} @media all and (min-width: 552px) { html { font-size: 23.00px; }
} @media all and (min-width: 564px) { html { font-size: 23.50px; }
} @media all and (min-width: 576px) { html { font-size: 24.00px; }
/*|| T0.1 - T0.G ||*/
} @media all and (min-width: 588px) { html { font-size:  8.50px; }
} @media all and (min-width: 600px) { html { font-size:  9.00px; }
} @media all and (min-width: 612px) { html { font-size:  9.50px; }
} @media all and (min-width: 624px) { html { font-size: 10.00px; }
} @media all and (min-width: 636px) { html { font-size: 10.50px; }
} @media all and (min-width: 648px) { html { font-size: 11.00px; }
} @media all and (min-width: 660px) { html { font-size: 11.50px; }
} @media all and (min-width: 672px) { html { font-size: 12.00px; }
} @media all and (min-width: 684px) { html { font-size: 12.50px; }
} @media all and (min-width: 696px) { html { font-size: 13.00px; }
} @media all and (min-width: 708px) { html { font-size: 13.50px; }
} @media all and (min-width: 720px) { html { font-size: 14.00px; }
} @media all and (min-width: 732px) { html { font-size: 14.50px; }
} @media all and (min-width: 744px) { html { font-size: 15.00px; }
} @media all and (min-width: 756px) { html { font-size: 15.50px; }
} @media all and (min-width: 768px) { html { font-size: 16.00px; }
/*|| T1.1 - T1.G ||*/
} @media all and (min-width: 792px) { html { font-size: 16.50px; }
} @media all and (min-width: 816px) { html { font-size: 17.00px; }
} @media all and (min-width: 840px) { html { font-size: 17.50px; }
} @media all and (min-width: 864px) { html { font-size: 18.00px; }
} @media all and (min-width: 888px) { html { font-size: 18.50px; }
} @media all and (min-width: 912px) { html { font-size: 19.00px; }
} @media all and (min-width: 936px) { html { font-size: 19.50px; }
} @media all and (min-width: 960px) { html { font-size: 20.00px; }
} @media all and (min-width: 984px) { html { font-size: 20.50px; }
} @media all and (min-width:1008px) { html { font-size: 21.00px; }
} @media all and (min-width:1032px) { html { font-size: 21.50px; }
} @media all and (min-width:1056px) { html { font-size: 22.00px; }
} @media all and (min-width:1080px) { html { font-size: 22.50px; }
} @media all and (min-width:1104px) { html { font-size: 23.00px; }
} @media all and (min-width:1128px) { html { font-size: 23.50px; }
} @media all and (min-width:1152px) { html { font-size: 24.00px; }
/*|| D0.1 - D0.G ||*/
} @media all and (min-width:1158px) { html { font-size: 14.85px; }
} @media all and (min-width:1164px) { html { font-size: 14.92px; }
} @media all and (min-width:1170px) { html { font-size: 15.00px; }
} @media all and (min-width:1176px) { html { font-size: 15.08px; }
} @media all and (min-width:1182px) { html { font-size: 15.15px; }
} @media all and (min-width:1188px) { html { font-size: 15.23px; }
} @media all and (min-width:1194px) { html { font-size: 15.31px; }
} @media all and (min-width:1200px) { html { font-size: 15.38px; }
} @media all and (min-width:1206px) { html { font-size: 15.46px; }
} @media all and (min-width:1212px) { html { font-size: 15.54px; }
} @media all and (min-width:1218px) { html { font-size: 15.62px; }
} @media all and (min-width:1224px) { html { font-size: 15.69px; }
} @media all and (min-width:1230px) { html { font-size: 15.77px; }
} @media all and (min-width:1236px) { html { font-size: 15.85px; }
} @media all and (min-width:1242px) { html { font-size: 15.92px; }
} @media all and (min-width:1248px) { html { font-size: 16.00px; }
}
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
* {
        font-family: 'Roboto'; padding: 0px; margin: 0px; color: var(--ColorSc01);
        -webkit-text-size-adjust: 100%; scrollbar-width: none;
        text-box-trim: trim-both; text-box-edge: cap alphabetic;
} *::-webkit-scrollbar {
        display: none;
} body  {
        background-color: var(--ColorDm01);
} h1  , h2  , h3  ,  h4   , h5  , h6   { font-size: 0.7500rem; font-weight: normal;
} h1 *, h2 *, h3 *,  h4 * , h5 *, h6 * { font-size: 0.7500rem; font-weight: normal;
} p   , span  , ul  , li   { font-size : 0.7500rem;
} p  *, span *, ul *, li * { font-size : 0.7500rem;
} a     {
        text-decoration: none; cursor: pointer;
}
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
img     { display: block; }
input   { border: 0rem solid #FFFFFF; box-sizing: border-box; outline: none;
} input::-webkit-box-placeholder { color: var(--ColorOt01); opacity: 1;
} input::-moz-box-placeholder    { color: var(--ColorOt01); opacity: 1;
} input::-ms-box-placeholder     { color: var(--ColorOt01); opacity: 1;
} input::placeholder             { color: var(--ColorOt01); opacity: 1;
} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, 
  input:-webkit-autofill:active {
        transition: background-color 999999s ease-in-out 0s;
        -webkit-text-fill-color: var(--ColorSc01);
}