:root {

/* Color Sets */

/* == dark == */
  --col-bg-dark-primary-1 : #1f1f1f; /* 0f1316 1f1f1f */ /* invert = e0e0e0*/
  --col-bg-dark-primary-2 : #242424;
  --col-bg-dark-primary-3 : var(--col-bg-dark-primary-1);

  --col-bg-dark-secondary-1 : #0b0e12;
  --col-bg-dark-secondary-2 : #323a4c;
  --col-bg-dark-secondary-3 : #15191d;

  --col-bg-dark-header: #212529; /* 212529 121a2c 1f1f1f */ /* invert = dedad6 */
  --col-bg-dark-footer: var(--col-bg-dark-header);

/** font **/
  --col-h-dark-primary-1 : #d23a3a; /* f93c1a d23a3a a00 */
  --col-h-dark-primary-2 : #c92f2f;

  --col-h-dark-nav-1 : #f93c1a; /* ff6b6 */

  --col-txt-dark-primary-1 : #f6f7f9;
  --col-txt-dark-secondary-1 : #f6f7f9;

/** panel / card **/

  --col-card-dark-primary-1 : #14171a;
  --col-card-dark-secondary-1 : #15191d;

/** glass looks **/

  --glass-border: #ffffffaa;
  --glass-1: #ffffff15;
  --glass-2: #ffffff88;

/* == light == */

  --col-bg-light-primary-1 : #f7f7f8; /* e0e0e0 f7f7f8 */
  --col-bg-light-primary-2 : #fefefe;
  --col-bg-light-primary-3 : var(--col-bg-light-primary-1);

  --col-bg-light-secondary-1 : #eeeeee; /* dedad6 eeeeee f0f0f3 fff5f2 */
  --col-bg-light-secondary-2 : #fdf6f4;
  --col-bg-light-secondary-3 : #f6f9fb;

  --col-bg-light-header: var(--col-bg-light-primary-1); /* 212529 121a2c 1f1f1f */ /* invert = dedad6 */
  --col-bg-light-footer: var(--col-bg-light-header);

/** font **/
  --col-h-light-primary-1 : var(--col-h-dark-primary-1);
  --col-h-light-secondary-1 :var(--col-h-light-primary-1);

  --col-h-light-nav-1 : #a00;

  --col-txt-light-primary-1 : #111217;
  --col-txt-light-secondary-1 : #111217;


/** panel / card **/

  --col-card-light-primary-1 : #ffffff;
  --col-card-light-secondary-1 : #f0f1f3;



/* Light Theme */

  --bg-lane1-color: var(--col-bg-light-primary-2); 
  --bg-lane2-color: var(--col-bg-light-secondary-1);


  --bg-cell1-color: var(--col-card-light-primary-1);
  --bg-cell2-color: var(--col-card-light-secondary-1);
  --bg-cell3-color: #cbd;
  --bg-cell4-color: #dcb;

  --text-color-lane1: var(--col-txt-light-primary-1);
  --text-color-lane2: var(--col-txt-light-secondary-1);
  --text-color: var(--col-txt-light-primary-1);

  --text-nav-h-color: var(--col-h-light-nav-1);
  --text-heading-color-lane1: var(--col-h-dark-primary-1);
  --text-heading-color-lane2: var(--col-h-dark-primary-1);
  --text-heading-color: var(--col-h-dark-primary-1);

  --cd-text-color-lane1: var(--col-txt-light-primary-1);
  --cd-text-color-lane2: var(--col-txt-light-primary-1);


  /* --bg-header2: #f0f0f0; */
  --bg-button: #e0e0e0;

  --link-color: #1a0dab;
  --text-color-button: #333333;


  --bg-header-color: var(--col-bg-light-header);
  --bg-footer-color: var(--col-bg-light-footer);

  --primary-dark: #121A2C;

  --gradient-primary1-lane1 : #ECECECFF;
  --gradient-secondary1-lane1 : #DADADA44;

  --gradient-primary1-lane2 : #242424FF;
  --gradient-secondary1-lane2 : #64646444;

  --gradient-primary-dark-black : #00000011;
  --gradient-secondary-dark-red : #aa000044;

  --gradient-secondary-dark-red : #aa000044;

  --accent-cyan: #00FFFF;
  --text-light: #E0E0E0;


  --bg-lane3-color: #eee;
  --bg-lane4-color: #ddd;
}

[data-theme="dark"] {

  --bg-lane1-color: var(--col-bg-dark-primary-1); 
  --bg-lane2-color: var(--col-bg-dark-header);


  --bg-cell1-color: var(--col-card-dark-primary-1);
  --bg-cell2-color: var(--col-card-dark-secondary-1);
  --bg-cell3-color: #657;
  --bg-cell4-color: #765;

  --text-color-lane1: var(--col-txt-dark-primary-1);
  --text-color-lane2: var(--col-txt-dark-secondary-1);
  --text-color: var(--col-txt-dark-primary-1);

  --text-nav-h-color: var(--col-h-dark-nav-1);
  --text-heading-color-lane1: var(--col-h-dark-primary-1);
  --text-heading-color-lane2: var(--col-h-dark-primary-1);
  --text-heading-color: var(--col-h-dark-primary-1);

  --cd-text-color-lane1: var(--col-txt-dark-primary-1);
  --cd-text-color-lane2: var(--col-txt-dark-primary-1);


  --gradient-primary1-lane1 : #242424FF;
  --gradient-secondary1-lane1 : #64646444;

  --gradient-primary1-lane2 : #ECECECFF;
  --gradient-secondary1-lane2 : #DADADA44;

  --bg-header-color: var(--col-bg-dark-secondary-1);
  --bg-footer-color: var(--col-bg-dark-secondary-1);

  --bg-button: #333333;

  --link-color: #8ab4f8;
  --text-color-button: #e0e0e0;



  --bg-lane3-color: #444;
  --bg-lane4-color: #666;
}

[data-theme="light-dark"] {
  --bg-header-color: var(--col-bg-light-header);
  --bg-footer-color: var(--col-bg-light-footer);

  --bg-lane1-color: var(--col-bg-light-primary-2); 
  --bg-lane2-color: var(--col-bg-dark-secondary-1);

  --text-color-lane1: var(--col-txt-light-primary-1);
  --text-color-lane2: var(--col-txt-dark-secondary-1);
  --text-color: var(--col-txt-light-primary-1);

  --text-heading-color-lane1: var(--col-h-dark-primary-1);
  --text-heading-color-lane2: var(--col-h-dark-primary-1);
  --text-heading-color: var(--col-h-dark-primary-1);

  --cd-text-color-lane1: var(--col-txt-dark-primary-1);
  --cd-text-color-lane2: var(--col-txt-light-primary-1);

  --bg-cell1-color: var(--col-card-dark-primary-1);
  --bg-cell2-color: var(--col-card-light-secondary-1);

  --bg-button: #e0e0e0;
}

[data-theme="dark-light"] {

  --bg-header-color: var(--col-bg-dark-secondary-1);
  --bg-footer-color: var(--col-bg-dark-secondary-1);

  --bg-lane1-color: var(--col-bg-dark-primary-1); 
  --bg-lane2-color: var(--col-bg-light-primary-1);

  --text-color-lane1: var(--col-txt-dark-primary-1);
  --text-color-lane2: var(--col-txt-light-secondary-1);
  --text-color: var(--col-txt-dark-primary-1);

  --text-heading-color-lane1: var(--col-h-dark-primary-1);
  --text-heading-color-lane2: var(--col-h-dark-primary-1);
  --text-heading-color: var(--col-h-dark-primary-1);

  --cd-text-color-lane1: var(--col-txt-light-primary-1);
  --cd-text-color-lane2: var(--col-txt-dark-primary-1);

  --bg-cell1-color: var(--col-card-light-primary-1);
  --bg-cell2-color: var(--col-card-dark-secondary-1);

  --bg-button: #333333;
}


.lanes2 div:nth-child(2n+1 of .lane)
,.lanes3 div:nth-child(3n+1 of .lane) 
,.lanes4 div:nth-child(4n+1 of .lane)

,.lanes2 section:nth-child(2n+1 of .lane)
,.lanes3 section:nth-child(3n+1 of .lane)
,.lanes4 section:nth-child(4n+1 of .lane)

,.lanes2 article:nth-child(2n+1 of .lane)
,.lanes3 article:nth-child(3n+1 of .lane)
,.lanes4 article:nth-child(4n+1 of .lane)
{
  background-color: var(--bg-lane1-color);

  .cells > article, .cells > div {
    background-color: var(--bg-cell1-color);
  }

 
  * { color: var(--text-color-lane1); }

  h1, h2 { color : var(--text-heading-color-lane1); }
  .card > * { color : var(--cd-text-color-lane1); }

  /*
        --c1-0: hsl(from var(--col0-hsla) h s l);
        --c1-1: hsl(from var(--col1-hsla) h s l);
        --c1-2: hsl(from var(--col2-hsla) h s l);
        --c1-3: hsl(from var(--col3-hsla) h s l);

        --x1-0 : 85%;
        --x1-1 : 60%;
        --x1-2 : 13%;
        --x1-3 : 24%;

        --y1-0 : 80%;
        --y1-1 : 24%;
        --y1-2 : 82%;
        --y1-3 : 7%;

        --s1-start-0 : 9%;
        --s1-start-1 : 5%;
        --s1-start-2 : 5%;
        --s1-start-3 : 13%;

        --s1-end-0 : 55%;
        --s1-end-1 : 72%;
        --s1-end-2 : 52%;
        --s1-end-3 : 68%;
*/

/*
    background-image: 
      radial-gradient(circle at calc(var(--x1-0)) calc(var(--y1-0)), var(--c1-0) calc(var(--s1-start-0)), transparent calc(var(--s1-end-0)))
     ,radial-gradient(circle at calc(var(--x1-1)) calc(var(--y1-1)), var(--c1-1) calc(var(--s1-start-1)), transparent calc(var(--s1-end-1)))
     ,radial-gradient(circle at calc(var(--x1-2)) calc(var(--y1-2)), var(--c1-2) calc(var(--s1-start-2)), transparent calc(var(--s1-end-2)))
     ,radial-gradient(circle at calc(var(--x1-3)) calc(var(--y1-3)), var(--c1-3) calc(var(--s1-start-3)), transparent calc(var(--s1-end-3)));

    animation: fluid-gradient-animation-1 20s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal;
*/

/*
  background: linear-gradient(
    45deg, 
    var(--gradient-primary1-lane1), 
    var(--gradient-secondary1-lane1)
  );

  background-size: 400% 400%;

  animation: subtle-movement 20s infinite alternate; 
*/

}

.lanes2 div:nth-child(2n of .lane)
,.lanes3 div:nth-child(3n+2 of .lane)
,.lanes4 div:nth-child(4n+2 of .lane)

,.lanes2 section:nth-child(2n of .lane) 
,.lanes3 section:nth-child(3n+2 of .lane)
,.lanes4 section:nth-child(4n+2 of .lane)

,.lanes2 article:nth-child(2n of .lane) 
,.lanes3 article:nth-child(3n+2 of .lane)
,.lanes4 article:nth-child(4n+2 of .lane)

{
  background-color: var(--bg-lane2-color);

  .cells > article, .cells > div {
    background-color: var(--bg-cell2-color);
  }

  * { color: var(--text-color-lane2); }

  h1, h2 { color : var(--text-heading-color-lane2); }
  .card > * { color : var(--cd-text-color-lane2); }

/*
        --c2-0: hsl(from var(--col0-hsla-2) h s l);
        --c2-1: hsl(from var(--col1-hsla-2) h s l);
        --c2-2: hsl(from var(--col2-hsla-2) h s l);
        --c2-3: hsl(from var(--col3-hsla-2) h s l);

    background-image: 
      radial-gradient(circle at var(--x2-0) var(--y2-0), var(--c2-0) var(--s2-start-0), transparent var(--s2-end-0))
     ,radial-gradient(circle at var(--x2-1) var(--y2-1), var(--c2-1) var(--s2-start-1), transparent var(--s2-end-1))
     ,radial-gradient(circle at var(--x2-2) var(--y2-2), var(--c2-2) var(--s2-start-2), transparent var(--s2-end-2))
     ,radial-gradient(circle at var(--x2-3) var(--y2-3), var(--c2-3) var(--s2-start-3), transparent var(--s2-end-3));

    animation: fluid-gradient-animation-2 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal;
*/
  /*
    background-image: 
       radial-gradient(circle at var(--x2-0) var(--y2-0), var(--c2-0) var(--s2-start-0), transparent var(--s2-end-0))
      ,radial-gradient(circle at var(--x2-1) var(--y2-1), var(--c2-1) var(--s2-start-1), transparent var(--s2-end-1))
      ,radial-gradient(circle at var(--x2-2) var(--y2-2), var(--c2-2) var(--s2-start-2), transparent var(--s2-end-2))
      ,radial-gradient(circle at var(--x2-3) var(--y2-3), var(--c2-3) var(--s2-start-3), transparent var(--s2-end-3))
      ,radial-gradient(circle at var(--x2-4) var(--y2-4), var(--c2-4) var(--s2-start-4), transparent var(--s2-end-4))
      ,radial-gradient(circle at var(--x2-5) var(--y2-5), var(--c2-5) var(--s2-start-5), transparent var(--s2-end-5))
      ,radial-gradient(circle at var(--x2-6) var(--y2-6), var(--c2-6) var(--s2-start-6), transparent var(--s2-end-6))
      ,radial-gradient(circle at var(--x2-7) var(--y2-7), var(--c2-7) var(--s2-start-7), transparent var(--s2-end-7))
      ,radial-gradient(circle at var(--x2-8) var(--y2-8), var(--c2-8) var(--s2-start-8), transparent var(--s2-end-8))
      ,radial-gradient(circle at var(--x2-9) var(--y2-9), var(--c2-9) var(--s2-start-9), transparent var(--s2-end-9));

    animation: gradient-animation-2 15s linear infinite alternate-reverse;
    background-blend-mode: normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;
*/

/*
  background: linear-gradient(
    45deg, 
    var(--gradient-primary1-lane2), 
    var(--gradient-secondary1-lane2)
  );

  background-size: 400% 400%;

  animation: subtle-movement 20s infinite alternate; 
*/

}

.lanes3 div:nth-child(3n of .lane)
,.lanes4 div:nth-child(4n+3 of .lane)

,.lanes3 section:nth-child(3n of .lane)
,.lanes4 section:nth-child(4n+3 of .lane)

,.lanes3 article:nth-child(3n of .lane)
,.lanes4 article:nth-child(4n+3 of .lane)

{
  background-color: var(--bg-lane3-color);

  .cells > article, .cells > div {
    background-color: var(--bg-cell3-color);
  }
}

.lanes4 div:nth-child(4n of .lane)

,.lanes4 section:nth-child(4n of .lane)

,.lanes4 article:nth-child(4n of .lane)
{
  background-color: var(--bg-lane4-color);

  .cells > article, .cells > div {
    background-color: var(--bg-cell4-color);
  }
}



* {
  color: var(--text-color);
}

h1, h2 {
  color: var(--text-heading-color);  /*var(--col-h-dark-nav-1);*/
}


.phase {
  border-left: 3px solid blue;
}

.header, .footer {
    background-color: var(--bg-header-color);
}

button {
  background-color: var(--bg-button);
  color : var(--text-color-button);
}

.component-table-wrap {
  background:var(--glass-1); /*--color-surface */
  color:var(--color-muted);
}

/* Hero Section Styling */
.hero-section {
/*
  background: var(--primary-dark);
*/
  color: var(--text-light);

  position: relative;

  overflow: hidden;
}

/* Animated Background */
.hero-background {

/*
  position: absolute;
  width: 100%;
  height: 100%;
*/

  background: linear-gradient(
    45deg, 
    var(--primary-dark), 
    var(--gradient-primary-dark-red)
  );

  background-size: 400% 400%;

  animation: subtle-movement 20s infinite alternate; 
  /*
    infinite alternate
    ease infinite
  */
}

@keyframes subtle-movement {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.sidebar-fixed 
{
   i {
    color: var(--text-heading-color-lane1);
  }
}

section > hr { opacity:0.3; }