/*` COLOR CONSTANTS */
:root {
    --unset: unset;

    --lllllgray: #f2f2f2;
    --llllgray: #e6e6e6;
    --lllgray: #cccccc;
    --llgray: #b3b3b3;
    --lgray: #999999;
    --gray: #808080;
    --dgray: #666666;
    --ddgray: #4d4d4d;
    --dddgray: #333333;
    --ddddgray: #1a1a1a;
    --dddddgray: #0d0d0d;

    --llllgreen: #ebf9eb;
    --lllgreen: #c3eec3;
    --llgreen: #9ce39c;
    --lgreen: #74d874;
    --green: #38c738;
    --dgreen: #2d9f2d;
    --ddgreen: #227722;
    --dddgreen: #165016;
    --ddddgreen: #0b280b;

    --llllblue: #ebf5fa;
    --lllblue: #d7ebf4;
    --llblue: #aed8ea;
    --lblue: #86c4df;
    --blue: #369dc9;
    --dblue: #256e8d;
    --ddblue: #1b4f65;
    --dddblue: #102f3c;
    --ddddblue: #0b1f28;

    --llllteal: #d7f4f1;
    --lllteal: #afe9e3;
    --llteal: #88ddd5;
    --lteal: #60d2c7;
    --teal: #38c7b9;
    --dteal: #2d9f94;
    --ddteal: #22776f;
    --dddteal: #16504a;
    --ddddteal: #0b2825;

    --llllgreenyellow: #ebf5d6;
    --lllgreenyellow: #d6ebad;
    --llgreenyellow: #c2e184;
    --lgreenyellow: #aed75b;
    --greenyellow: #9acd32;
    --dgreenyellow: #7ba428;
    --ddgreenyellow: #5c7b1e;
    --dddgreenyellow: #3d5214;
    --ddddgreenyellow: #1f290a;

    --lllllyellow: #ffffe6;
    --llllyellow: #ffffcc;
    --lllyellow: #ffff99;
    --llyellow: #ffff66;
    --lyellow: #ffff33;
    --yellow: #ffff00;
    --dyellow: #cccc00;
    --ddyellow: #999900;
    --dddyellow: #666600;
    --ddddyellow: #333300;
    --dddddyellow: #1a1a00;
}


/*` VARIABLES */
:root {
    --header_height: 35px;
    --footer_height: auto;
}

.pageOnly {
    --header_height: 0px;
    --footer_height: 0px;
}



/*` MEDIA QUERY BREAKPOINTS AS VARS */
:root {
    --largerthan-small: false;
    --largerthan-mobile: false;
    --largerthan-tablet: false;
    --largerthan-desktop: false;

    @media (min-width: 321px) { --largerthan-small: true; }
    @media (min-width: 480px) { --largerthan-mobile: true; }
    @media (min-width: 768px) { --largerthan-tablet: true; }
    @media (min-width: 1024px) { --largerthan-desktop: true; }
}

/* @container style(--largerthan-small: true) {}
@container style(--largerthan-mobile: true) {}
@container style(--largerthan-tablet: true) {}
@container style(--largerthan-desktop: true) {} */

/*` TEXT SIZE */
html { font-size: clamp(16px, 1.6vw + 12px, 20px); }
:root {--header_height: clamp(40px, 10vw, 50px);}


/*` TEXT STYLE */
:root {
    font-family: 
    /* "Quicksand",  */
    "Nunito", 
    /* "Carlito",  */
    Calibri, 
    Arial, 
    sans-serif;
}

:not(.selectableText) {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    transition: color 1s;
}

/* body {
    color: white;
    @media (prefers-color-scheme: dark) {color: white;}
    @media (prefers-color-scheme: light) {color: black;}
} */


body {
    color: var(--color-use);
    --color-use: var(--color-dark);

    --color-dark: var(--llllgray);
    --color-light: var(--ddddgray);
}
[data-theme="light"] body { --color-use: var(--color-light); }


*.selectableText,
*.selectableText * {
    -webkit-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
}




/*` HYPERLINKS */
a { --color-dark: var(--lllgray); --color-light: var(--dgray); }
a:hover { --color-dark: var(--llgray); --color-light: var(--dgray); }
a:visited { --color-dark: var(--lllteal); --color-light: var(--dteal); }

a { 
    transition: color 0.5s;
    color: var(--color-use); --color-use: var(--color-dark); 
}
[data-theme="light"] a {--color-use: var(--color-light);}





/*` STANDARD ELEMENT SIZING */
* { box-sizing: border-box }





/*` BUTTON ELEMENTS */
button {
    cursor: pointer;
    border-radius: 4px;

    --bg-dark: var(--ddddgray);
    --bd-dark: var(--llgray);
    --color-dark: var(--llllgray);
    
    --bg-light: var(--lllllgray);
    --bd-light: var(--ddgray);
    --color-light: var(--dddgray);

    transition-property: color, background-color, border-color;
    transition-duration: 1s;
    
    background-color: var(--bg-use);
    border-color: var(--bd-use);
    color: var(--color-use);
    
    --bg-use: var(--bg-dark);
    --bd-use: var(--bd-dark);
    --color-use: var(--color-dark);
}
[data-theme="light"] button {
    --bg-use: var(--bg-light);
    --bd-use: var(--bd-light);
    --color-use: var(--color-light);
}

button:has(>svg) {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
}




/*` INPUT / SELECT ELEMENTS */
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"] {
    /* Common styles for all text-based inputs */
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
}


input, select, textarea {
    --bg-dark: var(--dddddgray);
    --bd-dark: var(--ddgray);
    --color-dark: var(--llllblue);
    
    --bg-light: var(--lllllgray);
    --bd-light: var(--llgray);
    --color-light: var(--dddgreen);
}
input:focus, select:focus {
    --outline-dark: var(--llyellow);
    --bg-dark: var(--llllteal);
    --color-dark: var(--dddddgray);
    
    --outline-light: var(--dblue);
    --bg-light: var(--lllllyellow);
    --color-light: var(--dddteal);
}

input, select, textarea {
    transition: color 0.3s, background-color 0.3s, border-color 0.3s, outline-color 0.3s;
    outline-color: transparent;

    background-color: var(--bg-use);
    border-color: var(--bd-use);
    color: var(--color-use);
    outline-color: var(--outline-use);
    
    --bg-use: var(--bg-dark);
    --bd-use: var(--bd-dark);
    --color-use: var(--color-dark);
    --outline-use: var(--outline-dark);

}
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
    --bg-use: var(--bg-light);
    --bd-use: var(--bd-light);
    --color-use: var(--color-light);
    --outline-use: var(--outline-light);

}
/* INPUT/SELECT FOCUS */


/* INPUT PLACEHOLDER */
input::placeholder {
    transition: color 1s;
    font-style: italic;
    --color-use: var(--color-dark);
}
[data-theme="light"] input::placeholder {--color-use: var(--color-light);}
input::placeholder {
    --color-dark: var(--llblue);
    --color-light: var(--dblue);
}
input:focus::placeholder {
    --color-dark: var(--ddblue);
    --color-light: var(--ddteal);
}


option {
    transition: background-color 1s, border-color 1s, color 1s;

    background-color: var(--bg-use);
    border-color: var(--bd-use);
    color: var(--color-use);
    
    --bg-use: var(--bg-dark);
    --bd-use: var(--bd-dark);
    --color-use: var(--color-dark);
}
[data-theme="light"] option {
    --bg-use: var(--bg-light);
    --bd-use: var(--bd-light);
    --color-use: var(--color-light);
}
option {
    --bg-dark: var(--dddddgray);
    --bd-dark: var(--ddgray);
    --color-dark: var(--llllblue);
    
    --bg-light: var(--lllllgray);
    --bd-light: var(--llgray);
    --color-light: var(--dddgreen);
}
option:hover {
    --bg-dark: var(--ddteal);

    --bg-light: var(--llblue);
}









/* `BODY THEME */
@property --main_background {
    syntax: '<color>';
    initial-value: black;
    inherits: true;
}

@property --trim-bot {
    syntax: '<color>';
    initial-value: black;
    inherits: true;
}

@property --trim-top {
    syntax: '<color>';
    initial-value: black;
    inherits: true;
}

@property --svg_stroke {
    syntax: '<color>';
    initial-value: transparent;
    inherits: true;
}

@property --svg_fill {
    syntax: '<color>';
    initial-value: transparent;
    inherits: true;
}

@property --menu_background_top {
    syntax: '<color>';
    initial-value: black;
    inherits: true;
}

@property --menu_background_bot {
    syntax: '<color>';
    initial-value: black;
    inherits: true;
}

@property --menu_trim {
    syntax: '<color>';
    initial-value: black;
    inherits: true;
}

:root {
    --main_background: black;
    --trim-top: var(--ddblue);
    --trim-bot: var(--ddddteal);
    --svg_stroke: white;
    --svg_fill: white;
    --menu_background_top: var(--ddblue);
    --menu_background_bot: var(--ddblue);
    --menu_trim: var(--llgreen);
}
:root[data-theme="light"]  {
    --main_background: var(--llllgray);
    --trim-top: var(--llblue);
    --trim-bot: var(--lllgreenyellow);
    --svg_stroke: black;
    --svg_fill: black;
    --menu_background_top: var(--llllgray);
    --menu_background_bot: var(--lllblue);
    --menu_trim: var(--ddblue);   
}

.inIframe {
    --main_background: transparent;
}
body {
    transition:
        --main_background 1s,
        --trim-bot 1s,
        --trim-top 1s,
        --svg_stroke 1s,
        --svg_fill 1s,
        --menu_background_top 1s,
        --menu_background_bot 1s,
        --menu_trim 1s,
        color 1s;
    background: linear-gradient(
        180deg, 
        var(--trim-top), 
        var(--main_background) var(--header_height) 90%, 
        var(--trim-bot) 110%
    );
}





/*` MAIN ELEMENT */
main {
    min-block-size: 0;
    min-height: 0;
    min-width: 0;
    max-height: 100svh;
}







/*` CANVAS */
.fullSizeCanvasParent {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-block-size: 0;
}
.fullSizeCanvasElement {
    min-block-size: 0;
    width: 100%;
    height: 100%;
}








/*` SVG ICONS */
.svgIcon {
    stroke: var(--svg_stroke) !important;
    fill: transparent;
}

.svgIconFilled {
    stroke: transparent;
    fill: var(--svg_fill) !important;
}









/*` CUSTOM CHECKBOXES */

.cb.row {

}










/*` SCROLLBARS */
body {
    --sb-track: rgba(30, 30, 30, 0.3);
    --sb-thumb: var(--ddblue);
}
[data-theme="light"] body {
    --sb-track: rgba(243, 243, 243, 0.276);
    --sb-thumb: var(--lblue);
}
body {
    --sb-border-radius: 5px;
    --sb-width: 10px;
    scrollbar-color: var(--sb-thumb) var(--sb-track); 
    scrollbar-width: auto;
}

::-webkit-scrollbar {
    scrollbar-width: auto;
    background-color: var(--sb-track);
}

::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
  border-radius: var(--sb-border-radius);
}

::-webkit-scrollbar-track {
  background-color: var(--sb-track);
}



.hiddenScrollbars {
    /* -ms-overflow-style: none;   */
    scrollbar-width: none;
}
.hiddenScrollbars::-webkit-scrollbar { 
    display: none;  
}





/*` HR ELEMENTS */ 
hr {
    width: 90%;
}