/*  koad was here  */


/* TODO:  learn from this > https://codepen.io/nntrn/details/NWqaVXX */

:root {
 
   /* github dark == hsl(215, 15%, 16%)*/

   /* Hue determines the colour, in degrees; 0 to 360 */
   --application-hue: 257;         
   --accent-hue: 293;         
   --text-hue: 210;         

   /* Determines the saturation; 0 to 100 percent */
   /* A higher number will give you intense colour */
   /* A lower number will give you a less intense colour */
   --application-saturation: 69;  
   --accent-saturation: 59;  
   --text-saturation: 32;  

   /* Determines the brightness; 0 to 100 percent */
   --application-brightness: 16;  
   --accent-brightness: 27;  
   --text-brightness: 95; 

   /* Determines the transparency; 0 to 100 percent */
   --application-transparency: 20;  
   --application-transparency-percent: calc(100% / calc(100 / var(--application-transparency)));

   --accent-text-brightness-percent: 100%;  

    --font-size: 19px; /* Set your desired base font size */



    /* linter-disable */

    /*TODO:  SOME OF THIS SHIT DOESNT WORK WHEN MINIMIZED;*/
    --application-hue-percent: var(--application-hue);
    --application-saturation-percent: calc(100% / calc(100 / var(--application-saturation)));
    --application-brightness-percent: calc(100% / calc(100 / var(--application-brightness)));

    --text-brightness-percent: calc(100% / calc(100 / var(--text-brightness)));
    --text-saturation-percent: calc(100% / calc(100 / var(--text-saturation)));

    /* linter-enable */



   /*--text-color: hsl(var(--text-hue), var(--text-saturation-percent), var(--text-brightness-percent));*/
   --text-color: white;
   /*--text-inverted: hsl(var(--text-hue), var(--text-saturation-percent), calc(100% - var(--text-brightness-percent)));*/
   --text-inverted: black;
   
   --highlight-text-color: var(--text-color);
   --contrastThreshold: 80%;
   
   --lightnessTransform: 10%;
   --darknessTransform: 15%;

   --light-l: calc(var(--application-brightness) + var(--lightnessTransform));
   --dark-l: calc(var(--application-brightness) - var(--darknessTransform));

   --base: hsl(var(--application-hue), var(--application-saturation-percent), var(--application-brightness));
   --dark: hsl(var(--application-hue), var(--application-saturation-percent), var(--dark-l));
   --light: hsl(var(--application-hue), var(--application-saturation-percent), var(--light-l));

   --highlight-color: hsl(var(--application-hue-percent), var(--application-saturation-percent), var(--application-brightness-percent));
   --highlight-color-transparent: hsla(var(--application-hue-percent), var(--application-saturation-percent), var(--application-brightness-percent), --application-transparency-percent);

   --accent-brightness-percent: calc(100% / calc(100 / var(--accent-brightness)));
   --accent-saturation-percent: calc(100% / calc(100 / var(--accent-saturation)));



   
   /*--accent-color: hsla(var(--accent-hue), var(--accent-saturation-percent), var(--accent-brightness-percent), 1);*/
   --accent-color: hsla(var(--accent-hue), var(--accent-saturation-percent), var(--accent-brightness-percent), 1);
   --accent-text-color: hsla(var(--accent-hue), var(--accent-saturation-percent), 66%, 1);



    --logo-hue-rotation: 0deg;  /* example value */
    --logo-contrast: 100%;  /* Default to 100% for no change */
    --logo-saturation: 100%;  /* Default to 100% for no change (normal saturation) */



   /* Shadow colour */
   /* under side of topbar menu */
   /* background of accordion menu */
   
   --shadow-hue: var(--application-hue);         

   --shadow-brightness: var(--application-brightness);  
   --shadow-brightness-percent: calc(100% / calc(100 / var(--shadow-brightness)));

   --shadow-saturation: var(--application-saturation);  
   --shadow-saturation-percent: calc(100% / calc(100 / var(--shadow-saturation)));

   --shadow-color: hsla(var(--application-hue), var(--shadow-saturation-percent), var(--shadow-brightness-percent), var(--application-transparency-percent));
/*   --shadow-color:  #00000011;*/
   --text-muted-color:  #ffffff88;

   --background-color: hsla(var(--application-hue-percent), var(--application-saturation-percent), 10%, 1);
   --fill-color: hsla(var(--application-hue-percent), var(--application-saturation-percent), 88%, 0.88);
   --button-color: hsla(var(--application-hue-percent), var(--application-saturation-percent), 10%, 0.33);

   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
   --viewport: 390px;

   --side-edges: 0px;
   --left-edge: 0px;

   --success: #28a745;
   --info: #17a2b8;
   --info: #02aed6;
   --warning: #ffc107;
   --danger: #dc3545;

   --blue: #007bff;
   --indigo: #6610f2;
   --purple: #6f42c1;
   --pink: #f36;
   --red: #dc3545;
   --orange: #fd7e14;
   --yellow: #ffc107;
   --green: #28a745;
   --teal: #20c997;
   --cyan: #02aed6;
   --white: #fff;
   --gray: #6c757d;
   --gray-dark: #343a40;


   --font-family: Exo, Ubuntu, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

   --body-font: Segoe UI, Roboto, Helvetica Neue, Arial;
   --heading-font: Roboto, sans-serif;
    
    --navigation-top:    70px;
    --navigation-left:   240px;
    --navigation-right:  0px;
    --navigation-bottom: 70px;
    --footer-height:688px;
/*

font-family: 'Anek Latin', sans-serif;
font-family: 'Inter', sans-serif;
font-family: 'Libre Baskerville', serif;
font-family: 'Ubuntu', sans-serif;
  font-family: 'Raleway';

*/




   --table-font: monospace;
   --card-font: Helvetica Neue, Arial, sans-serif;

}




body {
   font-size: var(--font-size); /* Apply the font size variable to the body */
   font-weight: 300;
   line-height: 1.75;
}

h1 {
  font-size: calc(var(--font-size) * 2); /* Use the variable and perform calculations */
  line-height: calc(var(--font-size) * 6); /* Use the variable and perform calculations */
  font-weight: 700;

}
h2 {
  font-size: calc(var(--font-size) * 1.8); /* Use the variable and perform calculations */
  line-height: calc(var(--font-size) * 1.5); /* Use the variable and perform calculations */
  font-weight: 600;

}
h3 {
  font-size: calc(var(--font-size) * 1.6); /* Use the variable and perform calculations */
  line-height: calc(var(--font-size) * 1.4); /* Use the variable and perform calculations */
  font-weight: 500;

}
h4 {
  font-size: calc(var(--font-size) * 1.4); /* Use the variable and perform calculations */
  line-height: calc(var(--font-size) * 1.3); /* Use the variable and perform calculations */
  font-weight: 400;

}
h5 {
  font-size: calc(var(--font-size) * 1.2); /* Use the variable and perform calculations */
  line-height: calc(var(--font-size) * 1.3); /* Use the variable and perform calculations */
  font-weight: 300;

}

p {
  font-size: calc(var(--font-size) ); /* Use the variable and perform calculations */
  line-height: calc(var(--font-size) * 1.2); /* Use the variable and perform calculations */
}


.text-assistant{
   font-size: calc(var(--font-size) * 0.8); /* Use the variable and perform calculations */
   color: var(--text-muted-color);
}

.text-shadow{
   color: var(--shadow-color);
}

.text-accent{
   color: var(--accent-text-color);
}

.text-info {
   color: var(--accent-text-color);
}

.text-inverted{
   color: var(--text-inverted);
}

.text-muted{
    opacity: 0.4;
}

.text-warning {
  color: #CCAA00; 
}

.text-danger {
  color: #CC2222;  
}

.form-control {
    color: #212529;
    background-color: var(--shadow-color);
    color: var(--text-color);
    border: 1px solid #ced4da;
}

.site-wide-glare{
/*    background: linear-gradient(195deg, hsl(257, 69%, 16%), hsl(257, 69%, 16%), hsla(293, 59%, 27%, 0.7));*/
/*    background: linear-gradient(195deg, var(--highlight-color), var(--highlight-color), var(--accent-color));*/
    background: linear-gradient(195deg, var(--highlight-color), var(--highlight-color), var(--accent-color));
    position: fixed;
    inset: 0;
    z-index: -10;
    transition: background 3.3s ease;
}

.site-wide-watermark{
    position: fixed;
    bottom: 0;
    right: 0;
    height: 7vw;
    margin: 1vw;
}

.developer-watermark{
    font-family: 'Exo', sans-serif;
}

.site-wide-watermark img{
    height:  100%;
}