:root {
      
    /* Grays */
    --transparent: rgba(0,0,0,0);
    --gray-50: rgba(20, 20, 20, 1);
    --gray-40: rgba(40, 40, 40, 1);
    --gray-30: rgba(50, 50, 50, 1);
    --gray-20: rgba(80, 80, 80, 1);
    --gray-10: rgba(100, 100, 100, 1);
  
    /* CSS HEX */
    --gray-50-hex: #333333ff;
    --gray-40-hex: #8e8e8eff;
    --gray-30-hex: #e3e3e3ff;
    --gray-20-hex: #f2f2f2ff;
    --gray-10-hex: #fafafaff;
  
  
      --gloabl-padding: .5%;
      --header-padding: 0;
      --list-padding: .5%;
      --list-decorator: "> ";
      --margins: 0%;
  
      --letter-spacing-f1: .1px;
      --letter-spacing-f2: .1px;
  
      --font-size: 18px;
      --line-height: 20px;
  
      --title-line-height:  1;
      --elipsis-multiplier: 1;
      --header1-multiplier: 1;
      --header2-multiplier: 1;
      --header3-multiplier: 1;
      --header4-multiplier: 1;
      --link-multiplier: 1;
      --emp-multiplier:  1;
      --blockquote-multiplier: 1;
      --list-multiplier: 1;
  
      --font-weight-h1:   300;
      --font-weight-h2:   300;
      --font-weight-h3:   300;
      --font-weight-h4:   300;
      --font-weight-link: 300;
      --font-weight-text: 300;
      --font-weight-emp:  300;
      --font-weight-list: 300;
  
      --shadow-x-max:       .3;
      --shadow-y-max:       1;
      --shadow-radius:      1px;
      --brightness:         90%;
  
      --text-y:             -2px;
      --text-x:             -5px;
      --text-z:             -0px;
  }
  [data-md-color-scheme="lite"]  {
      --bg-alpha: 1;
      --bg-r: 237;
      --bg-g: 237;
      --bg-b: 237;
      --bg: rgba(var(--bg-r), var(--bg-g), var(--bg-b), var(--bg-alpha));
  
      --gradient-color1:   rgba(16, 10, 30, 1);
      --gradient-c1-amt:   80%;
      --gradient-color2:   rgba(15, 15, 20, 1);
      --gradient-c2-amt:   90%;
      --gradient-x:        -10.8%;
      --gradient-y:        -50.3%;
  
      --graydient: radial-gradient(var(--gray-10-hex), var(--gray-50-hex) 200% );
      --bg-gradient: var(--gray-50);
      --bg-size: 100% 200%;
      --bg-repeat: yes;
  
      --header-alpha: 1;
      --header-r: 43;
      --header-g: 44;
      --header-b: 53;
      --header: rgba(var(--header-r), var(--header-g), var(--header-b), var(--header-alpha));
      --header-brightness: 1;
  
      --header-contrast-alpha: 1;
      --header-contrast-r:  242;
      --header-contrast-g:  243;
      --header-contrast-b:  243;
      --header-contrast: rgba(var(--header-contrast-r), var(--header-contrast-g), var(--header-contrast-b), var(--header-contrast-alpha));
      --header-contrast-brightness: 1;
  
      --card-bg-alpha: .5;
      --card-bg-r:  0;
      --card-bg-g:  0;
      --card-bg-b:  0;
      --card-bg: rgba(var(--card-bg-r), var(--card-bg-g), var(--card-bg-b), var(--card-bg-alpha));
      --card-text: var(--header-contrast);
  
      --code-bg-alpha: 1;
      --code-bg-r: 43;
      --code-bg-g: 44;
      --code-bg-b: 53;
      --code-bg: rgba(var(--code-bg-r), var(--code-bg-g), var(--code-bg-b), var(--code-bg-alpha));
  
      --primary-alpha: .7;
      --primary-r: 20;
      --primary-g: 20;
      --primary-b: 20;
      --primary: rgba(var(--primary-r), var(--primary-g), var(--primary-b), var(--primary-alpha));
  
      --pop-alpha: 1;
      --pop-r:  83;
      --pop-g:  186;
      --pop-b:  99;
      --pop: rgba(var(--pop-r), var(--pop-g), var(--pop-b), var(--pop-alpha));
      --pop-active:rgb(var(--pop-r), var(--pop-g), var(--pop-b));
      --pop-brightness: 10px;
  
      --text-alpha: 1;
      --text-r: 1;
      --text-g: 1;
      --text-b: 1;
      --text: rgba(var(--text-r), var(--text-g), var(--text-b), var(--text-alpha));
      --text-brightness: 0px;
      --text-glow: rgba(var(--text-r), var(--text-g), var(--text-b), var(--text-brightness));
  
      --shadow-x: .3px;
      --shadow-x-max: .3;
      --shadow-y: .3px;
      --shadow-y-max: 1;
      --shadow-radius: .2px;
      --brightness: 100%;
      --shadow-alpha: 1;
      --shadow-r: 0;
      --shadow-g: 0;
      --shadow-b: 0;
      --shadow: rgba(var(--shadow-r), var(--shadow-g), var(--shadow-b), var(--shadow-alpha));
  
      --border-radius: 10px;
      --border-style: solid;
  
      /* search bar cursor and active text */
      --md-default-fg-color: var(--text);
      /* h1 headers and >'s, link highlights, TOC nav highlight, hover1 */
      --md-default-fg-color--light: var(--text);
      /* scroll bars and markers un-hovered */
      --md-default-fg-color--lighter: rgba(var(--pop-r), var(--pop-g), var(--pop-b), 1);
      /* horizontal lines and icons unhovered, search header background */
      --md-default-fg-color--lightest: var(--bg);
      /* HTML page Background color */
      --md-default-bg-color: var(--bg);
      /*?*/
      --md-default-bg-color--light: rgba(49, 218, 7, .8);
      /*?*/
      --md-default-bg-color--lighter: rgb(253, 99, 10);
      /*?*/
      --md-default-bg-color--lightest: rgb(235, 14, 243);
      /*header background*/
      --md-primary-fg-color: var(--transparent);
      /*?*/
      --md-primary-fg-color--light: var(--header);
      /*?*/
      --md-primary-fg-color--dark: var(--header);
      /* header text and icon color */
      --md-primary-bg-color: var(--header-contrast);
      /* search bar initial text */
      --md-primary-bg-color--light: var(--header-contrast);
      /* Hover color2 + search syntax highlight */
      --md-accent-fg-color: var(--pop);
      /* search result highlight */
      --md-accent-fg-color--transparent: rgba(var(--primary-r), var(--primary-g), var(--primary-b), .2);
      /*?*/
      --md-accent-bg-color: rgba(2, 22, 222, 1);
      /*?*/
      --md-accent-bg-color--light: rgba(235, 14, 243, 1);
      /* default text color in a code block */
  
      --md-code-fg-color: var(--header-contrast);
      --md-code-bg-color: var(--code-bg);
      --md-code-hl-color: rgb(207, 62, 200);
      --md-code-hl-number-color: rgb(252, 17, 173);
      --md-code-hl-special-color: hsla(340, 83%, 47%, 1);
      --md-code-hl-function-color: hsla(291, 45%, 50%, 1);
      --md-code-hl-constant-color: rgb(89, 214, 245);
      --md-code-hl-keyword-color: hsla(219, 54%, 51%, 1);
      --md-code-hl-string-color: rgb(250, 175, 104);
      --md-code-hl-name-color: rgb(244, 243, 247);
      --md-code-hl-operator-color: rgb(250, 167, 111);
      --md-code-hl-punctuation-color: rgb(250, 69, 69);
      --md-code-hl-comment-color: rgba(10,220,100,1);
      --md-code-hl-generic-color: rgba(222,222,222,1);
      --md-code-hl-variable-color: var(--header-contrast);
      /* Main Font Color */
      --md-typeset-color: var(--text);
      --md-typeset-a-color: var(--pop);
      /*?*/
      --md-typeset-mark-color: rgba(212,2,212,1);
      /*?*/
      --md-typeset-del-color: rgba(255,25,255,1);
      /*?*/
      --md-typeset-ins-color: rgba(255,25,255,1);
      /*?*/
      --md-typeset-kbd-color: rgba(255,25,255,1);
      /*?*/
      --md-typeset-kbd-accent-color: rgba(255,25,255,1);
      /*?*/
      --md-typeset-kbd-border-color: rgba(255,25,255,1);
      /*?*/
      --md-typeset-table-color: var(--pop);
      /*?*/
      --md-admonition-fg-color: var(--text);
      /*?*/
      --md-admonition-bg-color: var(--contrast);
  }
  [data-md-color-scheme="dark"]  {
      --bg-alpha: 1;
      --bg-r: 43;
      --bg-g: 44;
      --bg-b: 53;
      --bg: rgba(var(--bg-r), var(--bg-g), var(--bg-b), var(--bg-alpha));
  
      --gradient-color1:   rgba(16, 10, 30, 1);
      --gradient-c1-amt:   80%;
      --gradient-color2:   rgba(15, 15, 20, 1);
      --gradient-c2-amt:   90%;
      --gradient-x:        -10.8%;
      --gradient-y:        -50.3%;
  
      --graydient: radial-gradient(var(--gray-50-hex), var(--gray-40-hex) 800% );
      --bg-gradient: var(--bg);
      --bg-size: 100% 100%;
      --bg-repeat: yes;
  
      --header-alpha: 1;
      --header-r: 242;
      --header-g: 243;
      --header-b: 243;
      --header: rgba(var(--header-r), var(--header-g), var(--header-b), var(--header-alpha));
      --header-brightness: 1;
  
      --header-contrast-alpha: 1;
      --header-contrast-r: 43;
      --header-contrast-g: 44;
      --header-contrast-b: 53;
      --header-contrast: rgba(var(--header-contrast-r), var(--header-contrast-g), var(--header-contrast-b), var(--header-contrast-alpha));
      --header-contrast-brightness: 1;
  
      --card-bg-alpha: .7;
      --card-bg-r:  255;
      --card-bg-g:  250;
      --card-bg-b:  250;
      --card-bg: rgba(var(--card-bg-r), var(--card-bg-g), var(--card-bg-b), var(--card-bg-alpha));
      --card-text: var(--header-contrast);
  
      --code-bg-alpha: 1;
      --code-bg-r: 80;
      --code-bg-g: 80;
      --code-bg-b: 80;
      --code-bg: rgba(var(--code-bg-r), var(--code-bg-g), var(--code-bg-b), var(--code-bg-alpha));
  
      --primary-alpha: 1;
      --primary-r:  220;
      --primary-g:  220;
      --primary-b:  220;
      --primary: rgba(var(--primary-r), var(--primary-g), var(--primary-b), var(--primary-alpha));
  
      --pop-alpha: 1;
      --pop-r: 83;
      --pop-g: 186;
      --pop-b: 69;
      --pop: rgba(var(--pop-r), var(--pop-g), var(--pop-b), var(--pop-alpha));
      
      --shadow-x: 1px;
      --shadow-x-max: .3;
      --shadow-y: 1px;
      --shadow-y-max: 1;
      --shadow-radius: 1px;
      --brightness: 90%;
      --shadow-alpha: .4;
      --shadow-r: 51;
      --shadow-g: 51;
      --shadow-b: 51;
      --shadow: rgba(var(--shadow-r), var(--shadow-g), var(--shadow-b), var(--shadow-alpha));
  
      --text-alpha: 1;
      --text-r: 255;
      --text-g: 255;
      --text-b: 255;
      --text: rgba(var(--text-r), var(--text-g), var(--text-b), var(--text-alpha));
      --text-brightness: 0;
      --text-glow: rgba(var(--text-r), var(--text-g), var(--text-b), var(--text-brightness));
      --border-radius: 10px;
      --border-style: solid;
  
      /* search bar cursor and active text */
      --md-default-fg-color: var(--text);
      /* h1 headers and >'s, link highlights, TOC nav highlight, hover1 */
      --md-default-fg-color--light: var(--primary);
      /* scroll bars and markers un-hovered */
      --md-default-fg-color--lighter: rgba(var(--pop-r), var(--pop-g), var(--pop-b), 1);
      /* horizontal lines and icons unhovered, search header background */
      --md-default-fg-color--lightest: var(--text);
      /* HTML page Background color */
      --md-default-bg-color: var(--bg);
      /*?*/
      --md-default-bg-color--light: rgba(49, 218, 7, .8);
      /*?*/
      --md-default-bg-color--lighter: rgb(253, 99, 10);
      /*?*/
      --md-default-bg-color--lightest: rgb(235, 14, 243);
      /*header background*/
      --md-primary-fg-color: var(--transparent);
      /*?*/
      --md-primary-fg-color--light: var(--header);
      /*?*/
      --md-primary-fg-color--dark: var(--header);
      /* header text and icon color */
      --md-primary-bg-color: var(--header-contrast);
      /* search bar initial text */
      --md-primary-bg-color--light: var(--header-contrast);
      /* Hover color2 + search syntax highlight */
      --md-accent-fg-color: rgba(var(--pop-r), var(--pop-g), var(--pop-b), 1);
      /* search result highlight */
      --md-accent-fg-color--transparent: rgba(var(--primary-r), var(--primary-g), var(--primary-b), .2);
      /*?*/
      --md-accent-bg-color: rgba(2, 22, 222, 1);
      /*?*/
      --md-accent-bg-color--light: rgba(235, 14, 243, 1);
      /* default text color in a code block */
      --md-code-fg-color: var(--text);
      --md-code-bg-color: var(--code-bg);
      --md-code-hl-color: rgb(207, 62, 200);
      --md-code-hl-number-color: rgb(252, 17, 173);
      --md-code-hl-special-color: hsla(340, 83%, 47%, 1);
      --md-code-hl-function-color: hsla(291, 45%, 50%, 1);
      --md-code-hl-constant-color: rgb(89, 214, 245);
      --md-code-hl-keyword-color: hsla(219, 54%, 51%, 1);
      --md-code-hl-string-color: rgb(250, 175, 104);
      --md-code-hl-name-color: rgb(244, 243, 247);
      --md-code-hl-operator-color: rgb(250, 167, 111);
      --md-code-hl-punctuation-color: rgb(250, 69, 69);
      --md-code-hl-comment-color: rgba(10,220,100,1);
      --md-code-hl-generic-color: rgba(222,222,222,1);
      --md-code-hl-variable-color: var(--text);
      /* Main Font Color */
      --md-typeset-color: var(--text);
      --md-typeset-a-color: var(--header);
      /*?*/
      --md-typeset-mark-color: rgba(212,2,212,1);
      /*?*/
      --md-typeset-del-color: rgba(255,25,255,1);
      /*?*/
      --md-typeset-ins-color: rgba(255,25,255,1);
      /*?*/
      --md-typeset-kbd-color: rgba(255,25,255,1);
      /*?*/
      --md-typeset-kbd-accent-color: rgba(255,25,255,1);
      /*?*/
      --md-typeset-kbd-border-color: rgba(255,25,255,1);
      /*?*/
      --md-typeset-table-color: var(--primary);
      /*?*/
      --md-admonition-fg-color: var(--text);
      /*?*/
      --md-admonition-bg-color: var(--header-contrast);
  }
  a:active, a:link {
      color: var(--pop);
      font-size: calc(var(--link-multiplier) * var(--font-size));
      line-height: var(--title-line-height);
   }
  a:hover {
      color: var(--pop);
      filter: drop-shadow(var(--shadow-x) var(--shadow-y) var(--shadow-radius) var(--pop));
   }
  strong, emp {
      color: var(--text);
      font-size: calc(var(--emp-multiplier) * var(--font-size));
      line-height: var(--title-line-height);
      font-weight: var(--font-weight-emp)!important;
    }
  .md-nav--lifted {
      margin-top: 0;
      color: var(--pop)!important;;
      font-size: calc(var(--link-multiplier) * var(--font-size))!important;;
      font-weight: var(--font-weight-link)!important;
      line-height: var(--title-line-height)!important;;
  }
  .md-tabs__link {
      background: var(--transparent);
      font-size: calc(var(--link-multiplier) * var(--font-size));
      font-weight: var(--font-weight-link);
      line-height: var(--title-line-height);
      color: var(--header)!important;
  }
  .md-header, .md-header--lifted{
      background-color: var(--header);
  }
  a.md-button:active {
      color: var(--header)!important;
      font-weight: var(--font-weight-link);
  }
  a .md-nav__link {
      color: var(--header)!important;
      background-color: var(--bg)!important;
      font-weight: var(--font-weight-link)!important;
      filter: drop-shadow(var(--shadow-x) var(--shadow-y) var(--shadow-radius)  var(--shadow))!important;
  }
  label .md-nav__link {
      color: var(--header)!important;
      background-color: var(--bg)!important;
      font-weight: var(--font-weight-link)!important;
      filter: drop-shadow(var(--shadow-x) var(--shadow-y) var(--shadow-radius) var(--shadow))!important;
  }
  .md-nav--primary .md-nav__link {
    color: var(--header)!important;
    background-color: var(--bg)!important;
    font-weight: var(--font-weight-link)!important;
    filter: none!important;
  }
  .md-button {
      scale: 70%;
  }
  .md-button--primary {
      color: var(--header-contrast)!important;
      background-color: var(--header)!important;
  }
  .md-nav__title {
      background: var(--header)!important;
      color: var(--header-contrast)!important;
      padding-left: 5%!important;
      padding-top: 2%;
      padding-bottom: 2%;
  }
  .md-nav__list {
      padding: var(--global-padding);
  }
  .md-nav, .md-nav--primary, .md-nav--integrated{
      padding: var(--global-padding);
  }
  .highlight {
      background: rgba(0,0,0,1);
  }
  .md-ellipsis {
      font-size: calc(var(--elipsis-multiplier) * var(--font-size));
      font-weight: var(--font-weight-link);
      color: var(--header);
  }
  .md-nav__item--active {
      background-color: transparent!important;
      color: var(--header)!important;
  }
  .md-nav--primary .md-nav__item {
    border: none!important;
    filter: none!important;
  }
  .md-nav__item .md-nav__link--active {
    color: var(--header)!important;
    background-color: var(--bg);
  }
  .md-nav--primary .md-nav__title {
    height: 3rem!important;
  }
  h1, h2, h3, h4 {
      line-height: var(--title-line-height)!important;
  }
  h1 {
      font-size: calc(var(--header1-multiplier) * var(--font-size));
      font-weight: var(--font-weight-h1)!important;
  }
  h2 {
      font-size: calc(var(--header2-multiplier) * var(--font-size));
      font-weight: var(--font-weight-h2)!important;
  }
  h3 {
      font-size: calc(var(--header3-multiplier) * var(--font-size));
      font-weight: var(--font-weight-h3)!important;
  }
  h4 {
      font-size: calc(var(--header4-multiplier) * var(--font-size));
      font-weight: var(--font-weight-h4)!important;
  }
  h5 {
      font-size: calc(var(--header4-multiplier) * var(--font-size));
      font-weight: var(--font-weight-h4)!important;
  }
  ol, li {
      font-size: calc(var(--list-multiplier) * var(--font-size));
      font-weight: var(--font-weight-list);
  }
  strong {
      font-size: calc(var(--list-multiplier) * var(--font-size));
      font-weight: var(--font-weight-list)!important;
      list-style: none;
  }
  blockquote {
    color: rgba(var(--text-r), var(--text-g), var(--text-b), 1);
    font-size: calc(var(--font-size) * var(--blockquote-multiplier));
    font-weight: var(--font-weight-text)!important;
  }
  table {
    border-collapse: collapse;
    border-color: var(--header)!important;
    background-color: var(--header-contrast)!important;
    border-radius: 5px!important;
  }
  th {
    background-color: var(--pop)!important;
    border-bottom: 1px solid #ddd;
    font-size: calc(var(--text-multiplier) * var(--font-size));
    font-weight: var(--font-weight-header4)!important;

  }
  td {
    border-bottom: 1px solid #ddd;
    font-size: calc(var(--text-multiplier) * var(--font-size));
    font-weight: var(--font-weight-text)!important;
  }
  span.normal {
    color: var(--header-contrast);
  }
  .wrap {
      width: 200px;
      margin: 0 auto;
      background: white;
  }
  .md-grid {
      max-width: 80vw;
  }
  .md-button {
    filter: drop-shadow(var(--shadow-x) var(--shadow-y) var(--shadow-radius) var(--header));
  }
  .md-icon{
      color: var(--pop)!important;
  }
  .md-typeset :is(.admonition, details):is(.example){
      border-color: var(--pop) 
  }
  .md-typeset :is(.example) > :is(.admonition-title, summary){
      background-color: var(--header)
  }
  .md-typeset :is(.example) > :is(.admonition-title, summary)::before {
      background-color: var(--pop);
  }
  .md-typeset blockquote {
      border-left: .2rem solid var(--md-default-fg-color--lighter);
      color: var(--text);
      padding-left: .6rem;
  }
  .md-typeset{
      font-size: calc(var(--header2-multiplier) * var(--font-size));
  }
  body {
      padding: var(--global-padding);
      font-size: var(--font-size);
      margin-top: var(--margin);
      margin-bottom: var(--margin);
      margin-right: var(--margin);
      margin-left: var(--margin);
      margin: 0;
      box-shadow: inset 0 0 100% black;
      height: 100vh;
      width: 100%;
      z-index: -100;
  }
  p {
      font-size: var(--font-size)!important;
      text-indent: 0%;
      line-height: var(--line-height);
      letter-spacing: var(--letter-spacing-f1);
      color: var(--text);
      font-weight: var(--font-weight-text)!important;
   }
   p a {
      font-size: var(--font-size)!important;
      text-indent: 0%;
      line-height: var(--line-height);
      letter-spacing: var(--letter-spacing-f1);
      color: var(--text);
      font-weight: var(--font-weight-link)!important;
      filter: drop-shadow(var(--shadow-x) var(--shadow-y) var(--shadow-radius)  var(--shadow));
   }
   li a {
      font-size: var(--font-size)!important;
      text-indent: 0%;
      line-height: var(--line-height);
      letter-spacing: var(--letter-spacing-f1);
      color: var(--text);
      font-weight: var(--font-weight-link)!important;
      filter: drop-shadow(var(--shadow-x) var(--shadow-y) var(--shadow-radius) var(--shadow));
   }
  .md-typeset details{
      padding-left: 1%;
      padding-right: 1%;
      overflow: hidden;
      border-left: .1rem solid #448aff;
      border-right: .1rem solid #448aff;
      border-bottom: .1rem solid #448aff;
  }
  .md-typeset .example > summary::before {
      background-color: var(--header-contrast);
      padding: var(--global-padding);
  }
  .md-typeset .example > summary {
      background-color: var(--header);
      border-color: var(--header);
      color: var(--header-contrast);
  }
  .md-typeset details.example {
      border-color: var(--header);
  }
  .md-typeset details{
      filter: drop-shadow(2px 2px 5px rgb(0 0 0 / 0.8));
  }
  .md-footer-meta {
      display: none;
  }
  .code, .lineos, .highlighttable {
      font-size: var(--font-size)!important;
  }
  .md-main {
    max-width: 100%!important;
    padding: 0%!important;
    margin-left: 0px;
  }
  .md-main__inner {
    max-width: 100%!important;
    padding: 0%!important;
  }
  .md-main__inner.md-grid{  
    display: flex;
    flex-direction: row;
    margin-left: 5%!important;
    margin-right: 5%!important;
  }
  .md-header__inner.md-grid{  
    display: flex;
    flex-direction: row;
    margin-left: 4%!important;
    margin-right: 15%!important;
  }
  .md-tabs__inner.md-grid{  
    display: flex;
    flex-direction: row;
    margin-left: 5%!important;
    margin-right: 15%!important;
  }