@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

:root {

    --colormiddle1 : hsl(calc(360 * var(--hue1, .9)) 100% 50%);
    --colorleft1 : hsl(calc(360 * var(--hue2, .9)) 100% 50%);
    --colorright1 : hsl(calc(360 * var(--hue3, .9)) 100% 50%);

    --colormiddle2 : hsl(calc(360 * var(--secondaryhue1, .9)) 100% 50%);
    --colorleft2 : hsl(calc(360 * var(--secondaryhue2, .9)) 100% 50%);
    --colorright2 : hsl(calc(360 * var(--secondaryhue3, .9)) 100% 50%);

    --intro-duration: 4s;


}


  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  h1 {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%,0);

    font-family: "Titillium Web", sans-serif;
    font-size: 3rem;
    letter-spacing: 0.1em;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-image: linear-gradient(305deg, tomato, gold, cyan);
    margin: 0;
  
      animation: title var(--intro-duration) forwards;
  }

  @keyframes title {
    0% {
      opacity: 0;
      top: -10%;
      display: block;
    }

    30% {
      opacity: 1;
      top: 10%;
    }


    70% {
      opacity: 1;
      top: 10%;
      display: block;
    }

    100% {
      opacity: 0;
      top: -10%;
      display: none;
    }
  }

  @keyframes intro {
    0% {

      transform: translate( 0, 400px);
    }

    30% {

      transform: translate( 0, 400px);
    }


    70% {

      transform: translate(0, 400px);
    }

    100% {

      transform: translate( 0, 0);
    }
  }

  html {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */


  margin: 0;
  overflow: hidden;
  }

  body {
    overflow: hidden;
    overflow-y: scroll;
    z-index: 1;
    width: 100vw;
    height: 100vh;

    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  label {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
  }

  section:nth-of-type(4) {
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 20vh;
    background-image: url(../images/grass.jpg);
    background-size: cover;
    z-index: 1;
    animation: intro var(--intro-duration) ;

  }
  
  /* ==============================*/
  /* ===========Console============*/
  /* ==============================*/
  
  section:nth-of-type(2) {
    position: fixed;
    /* bottom: 4.95rem; */
    bottom: -10em;
    left: 0em;
  
    margin-left: -1em;
    height: 15rem;
    min-width: 500px;
    background-color: #25282b;
    border-top: 1em solid #25282b;
    border-top: linear;
    
    padding-right: 3em;

    z-index: 10;

    transition: 1s ease;

    animation: intro var(--intro-duration) ;

    &::before {
      content: "";
      position: absolute;
      top: -1em;
      width: 100%;
      background-color: #1e2026;
      height: 4px;
    }

    
    

    @media (max-width: 888px) {
      
      transition: 2s 1s;

      height: 15rem ;
      bottom: -10em;

    }

    @media (min-width: 888px) {
      bottom: 4.95rem;
      height: 15rem!important;
    }
    
  }

  
  section:nth-of-type(3) {
    position: fixed;
    bottom: 0em;
    left: -1em;
  
    height: 5rem;
  
    background-color: #2f3337;
    border: 5px solid transparent; 
    border-color: #25282b; 
    border-image-slice: 1;
    min-width: 620px;
    box-shadow: 47px 0 0 #25282b;

    animation: intro var(--intro-duration) ;
    z-index: 10;
    transition: .4s ease;

    @media (max-width: 1060px) {
        min-width: 100%!important;
    }



  }
  
  @media (max-width: 880px) {
    section > ul {
      transform: skew(0deg)!important;
      width: 95vw!important;
      margin-left: 2em!important;
      justify-content: center;
    }
    section:nth-of-type(2) {
      min-width: 100%;
      padding-right: 7em;
      
    }
    section:nth-of-type(3) {
      min-width: 95vw;
      box-shadow: 90px -1px 1px #25282b, -90px -1px 1px #25282b;
      margin-left: 2em!important;
    }
    
  }

  section:nth-of-type(2) > div {
    width: 100%;
    height: 4em;

    position: absolute;
    top: -5em;

    @media (max-width: 888px) {
      width: calc(100vw + 16px);
      background-color: #25282b;
    }

  }
  
  section:nth-of-type(2) > div > div:nth-of-type(1) {
    display: none;

    position: absolute;
    top: -1.2em;
    right: 10%;

    border: 10px solid #25282b;
    border-bottom: #0000;
    background-color: #2f3337 ;
    width: 6em;
    height: 6em;
    z-index: 100;

    transform: rotateX( 60deg);


    @media (max-width: 888px) {
      display: flex;
      justify-content: center;
    
    };



    label {

      --updownbuttoncolor : red;
      border: 4px solid darkred;
      width: 4em;
      height: 4em;
      background-color: var(--updownbuttoncolor);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: 1s;

      box-shadow: 
      inset 0 0 10px black,
      0 0.1em 0 var(--updownbuttoncolor),
      0 0.2em 0 var(--updownbuttoncolor),
      0 0.3em 0 var(--updownbuttoncolor),
      0 0.4em 0 var(--updownbuttoncolor),
      0 0.5em 0 var(--updownbuttoncolor),
      0 0.6em 0 var(--updownbuttoncolor),
      0 0.7em 0 var(--updownbuttoncolor),
      0 0.8em 0 var(--updownbuttoncolor),
      0 0.9em 0 var(--updownbuttoncolor),
      0 1em 0 var(--updownbuttoncolor),
      0 1.1em 0 var(--updownbuttoncolor),
      0 1.2em 0 var(--updownbuttoncolor),
      0 1.3em 0 var(--updownbuttoncolor),
      0 1.4em 0 var(--updownbuttoncolor),
      0 1.5em 0 var(--updownbuttoncolor),
      0 1.6em 0 var(--updownbuttoncolor),
      0 1.7em 0 var(--updownbuttoncolor)
      ;
    }

    input {
      display: none; 
    }

    label::before {

      content: "Up";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: 0.6s;

      opacity: 1;
    }

    label::after {
      content: "down";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: 0.6s;

      opacity: 0;
    }

  }


  section:nth-of-type(2) > div > div:nth-of-type(2) { 

    position: absolute;
    top: 3em;
    left: 5rem;

    display: flex;
    justify-content: center;

    

    /* border: 1px solid darkgrey; */
    width: 12em;
    height: 2em;
    z-index: 100;
    padding: 0;

    align-items: center;
    transform-style:preserve-3d;

    /* background-color: darkgrey;
    border-radius: 0.5em; */
   
    /* box-shadow: 
    0 8px 0 0 gray,
    0 0 10px 0 black inset; */


    @media (max-width: 888px) {
      top: 1.5em;
      left: 10px;
    }
    


    &::before {
      content: "";
      position: absolute;
      z-index: 101;
      height: 1.5em;
      width: 1.5em;
      border-radius: 10em 10em 0 0;
      background-color: grey;
      box-shadow: 0 0 10px 0 black inset;
      border: 3px solid grey;
      margin-bottom: 1em;
    }


    label {
      display:grid;
      height:1em;
      width:4em;
      margin-bottom: 1em;
    
      z-index: 100;
    
      background-color:grey;
      box-shadow: -2px 0 6px black inset, -2px 0 6px black inset;
      border-radius: 10px;
      margin-left: 4em;
      
      transition:3s;
      transform-origin:center left;

      
      place-content:start start;
      
      cursor: pointer;
    

      transition-timing-function: linear(
      /* Start to 1st bounce */
      0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
      /* 1st to 2nd bounce */
      0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
      /* 2nd to 3rd bounce */
      0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
      /* 3rd bounce to end */
      0.988, 0.984, 0.988, 1
  );


    }

    label:before {
      content:"";
      position:relative;
      display:block;
      z-index: 1;
      left: 50px;
    
      width:2em;
      height:2em;
      background-color:red;

      box-shadow: 1px 0 6px black inset, -3px 0 6px black inset;
      border-radius:50%;
      transform:translateY( -6px) rotateX(0deg);
      
      transition:3s;
      transition-timing-function: linear(
          0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
          0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
          0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
          0.988, 0.984, 0.988, 1
      );
    }

    label:has(:checked) { 
      transform:perspective(10em) rotateZ(-180deg) skewx(2deg);
      transform-origin: left center;
    }

    input {
     display: none; 
    }

  }


    body:has(section:nth-of-type(2) > div > div input[type="checkbox"][name="popup"]:checked)  section:nth-of-type(2) {
  
      transition: 2s 1s ;
      height: 70%;
      bottom: 4.95em;

    }

    body:has(section:nth-of-type(2) > div > div input[type="checkbox"][name="popup"]:checked)  section:nth-of-type(2) > div > div:nth-of-type(1) label {
 
      translate: 0 2em;
      box-shadow: 
      inset 0 0 10px black,
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor),
      0 0 0 var(--updownbuttoncolor)
      ;



    }

    body:has(section:nth-of-type(2) > div > div input[type="checkbox"][name="popup"]:checked)  section:nth-of-type(2) > div > div:nth-of-type(1) label::after {
      opacity: 1;
    }
 
    body:has(section:nth-of-type(2) > div > div input[type="checkbox"][name="popup"]:checked)  section:nth-of-type(2) > div > div:nth-of-type(1) label::before {
      opacity: 0;
    }


  
  section > ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 5px;
    grid-row-gap: 0px;
    margin-left: 0.6em;
  
    height: 100%;
    transform: skew(-8deg) translatex(12px);
    background-color: #2f3337;

    overflow-x: scroll;
    overflow-y: hidden;

    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    @media (max-width: 888px) {
      display: flex;
      flex-wrap: wrap;
      overflow-y: scroll;;
      flex-basis: auto;
      

      -ms-overflow-style: auto;  /* IE and Edge */
      scrollbar-width: auto;  /* Firefox */
    }
   
  }


section > ul::-webkit-scrollbar {
    display: none;
  }
  


  
    @media (max-width: 500px) {
      
      section > ul {
        min-width: 100vw;
      }
    }
  
  section > ul li ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 5px;
    grid-row-gap: 0px;
  
    height: 100%;
  }
  
  section > ul li {
    list-style: none;
    height: 100%;
    width: 100%;
    position: relative;
    max-height: 13.5em;

    @media (max-width: 888px) {
      width: auto;
    }
  }
  
  section > ul > li:nth-child(1) {
    grid-area: 1 / 1 / 6 / 2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 150px;

    @media (max-width: 888px) {
      width: calc(50% - 5px);
    }
  }
  
  section > ul > li:nth-child(2) {
    grid-area: 1 / 2 / 2 / 3;
    position: relative; 
    border-left: 2px #25282b solid;
    border-right: 2px #25282b solid;
    min-width: 200px;
    @media (max-width: 888px) {
      width: calc(50% - 5px);
    }
  }
  
  section > ul > li:nth-child(3) {
    grid-area: 1 / 3 / 6 / 4;
    position: relative; 

  }

  section > ul > li:nth-child(4) {
    display: none;

  }

  section > ul > li:nth-child(5) {
    display: none;

  }

  section > ul > li:nth-of-type(3),
  section > ul > li:nth-of-type(4),
  section > ul > li:nth-of-type(5) {
    padding: 0 0.5em;
    min-width: 10em;

    border-right: 2px solid #25282b;

    @media (max-width: 888px) {
      flex-grow: 1;
    }

  }
  
  
  /* =====================================*/
  /* ===========Amount Buttons============*/
  /* =====================================*/
  
  /* ===========list of buttons============*/
  
  section > ul li ul {
    display: flex;
    flex-direction: column;
  }
  
  section > ul li ul li {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* ===========all Labels============*/
  
  
    input:disabled + label[for="1"],
    input:disabled  + label[for="2"],
    input:disabled + label[for="3"],
    input:disabled + label[for="css"],
    input:disabled + label[for="both"],
    input:disabled + label[for="js"]  {
      background-color: gray;
  
    }
  

  label[for="1"],
  label[for="2"],
  label[for="3"],
  label[for="css"],
  label[for="both"],
  label[for="js"]  {
    text-align: center;
    align-items: center;
    justify-content: center;
    position: absolute;
    display: flex;
    width: 50px;
    height: 50px;
    border: 3px solid #ccc;
    padding: 0;
    cursor: pointer;
    border-radius: 10em;
    background-color: darkred;
    transition: 1s;
    -webkit-box-shadow: 2px 0 6px inset black, 3px 3px 1px grey;
    box-shadow: 2px 0 6px inset black, 3px 3px 1px grey ;


  }
  
  /* ===========Amount button labels============*/
  

  input[type="radio"][id="1"]:checked:disabled + label,
  input[type="radio"][id="2"]:checked:disabled + label,
  input[type="radio"][id="3"]:checked:disabled + label,
  input[type="radio"][id="css"]:checked:disabled + label,
  input[type="radio"][id="both"]:checked:disabled + label,
  input[type="radio"][id="js"]:checked:disabled + label {
    background-color: #444343;
  }


  input[type="radio"][id="1"]:checked + label,
  input[type="radio"][id="2"]:checked + label,
  input[type="radio"][id="3"]:checked + label, 
  input[type="radio"][id="css"]:checked + label,
  input[type="radio"][id="both"]:checked + label,
  input[type="radio"][id="js"]:checked + label{
    background-color: red;
    box-shadow: 0 0 6px black inset, 3px 3px 1px grey;


  }
  
  input[type="radio"][id="1"]:active + label,
  input[type="radio"][id="2"]:active + label,
  input[type="radio"][id="3"]:active + label,
  input[type="radio"][id="css"]:active + label,
  input[type="radio"][id="both"]:active + label,
  input[type="radio"][id="js"]:active + label {
    background-color: red;
    box-shadow: 2px 0 6px black inset, 2px 2px 5px black;

  }
  /* ===========Hover============*/
  input[type="radio"] + label:hover {
    background: #d4291e;
  }
  
  /* ===========Hide inputs============*/
  
  input[type="radio"][id="1"],
  input[type="radio"][id="2"],
  input[type="radio"][id="3"],
  input[type="radio"][id="css"],
  input[type="radio"][id="both"],
  input[type="radio"][id="js"] {
    display: none;
  }
  
  
  
  /* ============================*/
  /* ===========Lever============*/
  /* ============================*/
  
  section > ul > li:nth-of-type(1) > div {
    
    display: flex;
    
    justify-content: center;
    align-items:center;
    
    
    background-color: darkgrey;
    
    width: 6em;
    height: 11em;
    border-radius: 10px;
    
    box-shadow: 3px 3px 0 darkgrey, 3px 0 20px 0 black inset;
    border: 1px solid darkgrey;
  }
  
  section > ul > li:nth-of-type(1) > div::before {
    content: "";
    position: absolute;
    height: 1.5em;
    width: 1.5em;
    background-color: #25282b;
    box-shadow: 5px 0 20px 1px black inset;
    border: 3px solid grey;
    
  }
  
  /* ===========Label============*/
  
  section > ul > li > div > label {
      display:grid;
      height:4em;
      width:1em;
    
    z-index: 1;
    
      background-color:grey;
    box-shadow: -2px 0 6px black inset, -2px 0 6px black inset;
    border-radius: 1em;
    margin-bottom: 4em;
      
      transition:3s;
      transform-origin:center bottom;
      transform:perspective(10em) rotateX(0deg) skewx(-2deg);
      
      place-content:start center;
      transform-style:preserve-3d;
    cursor: pointer;
      
      transition-timing-function: linear(
          /* Start to 1st bounce */
          0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
          /* 1st to 2nd bounce */
          0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
          /* 2nd to 3rd bounce */
          0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
          /* 3rd bounce to end */
          0.988, 0.984, 0.988, 1
      );
  }
  
  section > ul > li > div > label:has(:checked) {
      transform:perspective(10em) rotateX(-180deg) skewx(2deg);
  }
  
  section > ul > li > div > label::before {
      content:"";
      position:relative;
      display:block;
    
    box-shadow: 1px 0 6px black inset, -3px 0 6px black inset;
    
    z-index: 1;
    
      width:2em;
      height:2em;
      background-color:red;
      border-radius:50%;
      transform:translateY( calc(-1em - 1px) ) rotateX(0deg);
      transition:3s;
      transition-timing-function: linear(
          /* Start to 1st bounce */
          0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
          /* 1st to 2nd bounce */
          0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
          /* 2nd to 3rd bounce */
          0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
          /* 3rd bounce to end */
          0.988, 0.984, 0.988, 1
      );
  }
  
  section > ul > li > div > label:has(:checked)::before {
      transform:translateY( calc(-1em - 1px) ) rotateX(180deg);
  }
  
  section > ul > li > div > label > input {
    display: none;
  }
  

   /* ============================*/
  /* =========Color changer==========*/
  /* ============================*/


label:has(input[type="range"][orient=vertical]) {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.5em;
}

  input[type=range][orient=vertical] {
    writing-mode: vertical-lr;
    width: 8px;
    height: 150px;
    padding: 0 5px;
}

input[type=range][orient=vertical]:nth-of-type(1) {
    grid-area: left-slider;
}

input[type=range][orient=vertical]:nth-of-type(2) {
    grid-area: right-slider;
}

section > ul > li:nth-of-type(3) > div,
section > ul > li:nth-of-type(4) > div,
section > ul > li:nth-of-type(5) > div {
    grid-area: color-picker1;
    width: 4em;
    height: 2em;
    border: 2px solid gray;
    box-shadow: inset 0 0 6px 0 black;
}

/* hue Values*/

section > ul > li:nth-of-type(3) > div:nth-of-type(1) {
    background-color:  hsl(calc(360 * var(--hue1, .9)) 100% 50%);
}
section > ul > li:nth-of-type(4) > div:nth-of-type(1) {
    background-color:  hsl(calc(360 * var(--hue2, .9)) 100% 50%);
}
section > ul > li:nth-of-type(5) > div:nth-of-type(1) {
    background-color:  hsl(calc(360 * var(--hue3, .9)) 100% 50%);
}

/* Glow Values*/

section > ul > li:nth-of-type(3) > div:nth-of-type(2) {
    grid-area: color-picker2;
    background-color:  hsl(calc(360 * var(--secondaryhue1, .9)) 100% 50%);
}
section > ul > li:nth-of-type(4) > div:nth-of-type(2) {
    grid-area: color-picker2;
    background-color:  hsl(calc(360 * var(--secondaryhue2, .9)) 100% 50%);
}
section > ul > li:nth-of-type(5) > div:nth-of-type(2) {
    grid-area: color-picker2;
    background-color:  hsl(calc(360 * var(--secondaryhue3, .9)) 100% 50%);
}



section > ul > li:nth-of-type(3) {
    display: grid; 
    grid-auto-rows: 1fr; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    gap: 0 0; 
    grid-template-areas: 
      "left-slider right-slider"
      "color-picker1 color-picker2"; 
    justify-items: center; 
    align-items: center; 
}

section > ul > li:nth-of-type(4) {
    display: none; 
    grid-auto-rows: 1fr; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    gap: 0 0; 
    grid-template-areas: 
      "left-slider right-slider"
      "color-picker1 color-picker2"; 
    justify-items: center; 
    align-items: center; 
}

section > ul > li:nth-of-type(5) {
    display: none; 
    grid-auto-rows: 1fr; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    gap: 0 0; 
    grid-template-areas: 
      "left-slider right-slider"
      "color-picker1 color-picker2"; 
    justify-items: center; 
    align-items: center; 
}


 /* ============================*/
  /* =======Range Slider custom========*/
  /* ============================*/
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 5em;
    border: 2px solid darkgray;
    height: 1em;
  }
  
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--thumbcolor);
    width: 3em;
    height: 1em;
    border-radius: 40%;
    box-shadow: 
      inset 2px 2px 3px 0 black,
      3px 2px 0 0 var(--thumbcolor);

  }

  input[type="range"]:disabled::-webkit-slider-thumb {
    background-color: gray;
    box-shadow: inset 2px 2px 3px 0 black,
    3px 2px 0 0 gray;
  }
  
  li:nth-of-type(3) > label:nth-of-type(1) > input[type="range"] {
    --thumbcolor: var(--colormiddle1);
  }
  
  li:nth-of-type(3) label:nth-of-type(2) input[type="range"] {
    --thumbcolor: var(--colormiddle2);
  }
  
  li:nth-of-type(4) label:nth-of-type(1)  input[type="range"] {
    --thumbcolor: var(--colorleft1);
  }
  
  li:nth-of-type(4) label:nth-of-type(2) input[type="range"] {
    --thumbcolor: var(--colorleft2);
  }
  
  li:nth-of-type(5) label:nth-of-type(1) input[type="range"] {
    --thumbcolor: var(--colorright1);
  }
  
  li:nth-of-type(5) label:nth-of-type(2) input[type="range"] {
    --thumbcolor: var(--colorright2);
  }
  

 /* ============================*/
  /* =======Fireworks activation========*/
  /* ============================*/


  body:has(input[type="radio"][id="1"]:checked) section:nth-of-type(1) div:nth-of-type(2) {
    display: block;
  }

  body:has(input[type="radio"][id="2"]:checked) section:nth-of-type(1) div:nth-of-type(1),
  body:has(input[type="radio"][id="2"]:checked) section:nth-of-type(1) div:nth-of-type(2) {
    display: block;
  }

  body:has(input[type="radio"][id="3"]:checked) section:nth-of-type(1) div:nth-of-type(1),
  body:has(input[type="radio"][id="3"]:checked) section:nth-of-type(1) div:nth-of-type(2),
  body:has(input[type="radio"][id="3"]:checked) section:nth-of-type(1) div:nth-of-type(3) {
    display: block;
  }

  body:has(section:nth-of-type(2) div input[type="checkbox"][name="launch"]:not(:checked)) section:nth-of-type(1) div:nth-of-type(1),
  body:has(section:nth-of-type(2) div input[type="checkbox"][name="launch"]:not(:checked)) section:nth-of-type(1) div:nth-of-type(2),
  body:has(section:nth-of-type(2) div input[type="checkbox"][name="launch"]:not(:checked)) section:nth-of-type(1) div:nth-of-type(3)  {
    display: none!important;
  }



  body:has(input[type="radio"][id="2"]:checked) section > ul {
    grid-template-columns: repeat(4, 1fr);
  }

  body:has(input[type="radio"][id="2"]:checked)   section > ul > li:nth-child(4) {
    display: grid;
  }

  body:has(input[type="radio"][id="2"]:checked)   section:nth-of-type(3) {
    min-width: 826px;
  }



  body:has(input[type="radio"][id="3"]:checked) section > ul {
    grid-template-columns: repeat(5, 1fr);
  }

  body:has(input[type="radio"][id="3"]:checked)   section > ul > li:nth-child(4), 
  body:has(input[type="radio"][id="3"]:checked)   section > ul > li:nth-child(5) {
    display: grid;

  }

  body:has(input[type="radio"][id="3"]:checked)   section:nth-of-type(3) {
    min-width: 1030px;
  }
  
  
 /* =============================*/
  /* ===========Fireworks ===========*/
  /* ============================*/
  
  
  section:nth-of-type(1) {
    background: 
      linear-gradient(#0007, #0000),
      #123;
    margin: 0;
    height: 100vh;
    overflow: hidden;


  }
  
  @keyframes firework {
    0% { 
        transform: translate(var(--x),var(--startingY)); 
        opacity: 1;
        width: var(--initialSize);
    }
    50% { 
        opacity: 1;
        width: 0.5vmin;
    }
    80% {
        opacity: 0.8;
    }
    100% { 
        opacity: 0;  /* make 0 */
        width: var(--finalSize);
        
    }
  }
  
  section:nth-of-type(1) div{

    display: none;
    --startingY : 90vmin;
    --y: -20vmin;
    --x: -50%;
    --initialSize: 1vmin;
    --finalSize: 45vmin;
    --particleSize: 0.3vmin;


    position: absolute;
    top: 20%;
    left: 50%; 
    width: var(--initialSize);
    aspect-ratio: 1;

    transform: translate(-50%, var(--y));

    animation: firework 5s infinite; /* make infinite */

  }

  section:nth-of-type(1) div:nth-of-type(1) {
    background:

/* top left */
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 10% 30%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 11% 25%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 14% 20%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 18% 15%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 23% 10%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 30% 5%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 40% 2%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 50% 0%,

/* top right */
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 90% 30%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 89% 25%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 86% 20%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 82% 15%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 77% 10%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 70% 5%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 60% 2%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 50% 0%,


/* Bottom left */

radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 9% 35%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 9% 40%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 9% 45%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 9% 50%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 9% 55%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 9% 60%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 9% 65%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 9% 70%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 10% 75%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 10% 80%,  
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 11% 85%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 13% 90%,

radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 18% 94%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 25% 97%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 30% 98%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 34% 99%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 40% 100%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 45% 100%,

/* Bottom right */


radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 91% 35%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 91% 40%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 91% 45%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 91% 50%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 91% 55%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 91% 60%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 91% 65%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 91% 70%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 90% 75%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 90% 80%,  
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 89% 85%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 87% 90%,

radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 82% 94%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 75% 97%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 70% 98%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 66% 99%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 60% 100%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 55% 100%,


radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 50% 100%,

/* oog links */

/* pupil */
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 31.5% 53.5%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 33% 54%, 
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 33.5% 55.5%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 33% 57%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 31.5% 57.5%,


radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 30% 54%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 29.5% 55.5%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 30% 57%,



/* Oog */

/* top */

/* end */
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 18% 52%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 20% 51%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 24% 49.5%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 28% 49.5%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 32% 49.5%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 35% 50.5%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 38% 52%,

/* start */

/* bottom */

radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 38.5% 54.5%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 37.5% 57.5%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 35% 61%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 32% 63%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 28% 63%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 24% 62%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 20% 59%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 18% 55%,




/* oog rechts */
/* pupil */
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 62% 53.5%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 63.5% 54%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 64% 55.5%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 63.5% 57%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 62% 57.5%,

radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 60.5% 54%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 60% 55.5%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 60.5% 57%,


/* Oog */

/* top */

/* end */
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 74% 52%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 72% 51%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 68% 49.5%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 64% 49.5%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 60% 49.5%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 57% 50.5%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 54% 52%,

/* start */



/* bottom */

radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 53.5% 54.5%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 54.5% 57.5%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 57% 61%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 60% 63%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 64% 63%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 68% 62%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 72% 59%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 74% 55%,






/* neus */

radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 50% 40%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 48% 45%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 46% 50%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 44% 55%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 42% 60%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 41% 65%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 41% 69%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 43% 71%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 46% 72%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 49% 72%,


/* Mond */
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 46% 83%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 48% 81%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 50% 81%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 52% 81%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 54% 82%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 56% 83%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 55% 85%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 52% 86%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 50% 86%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 48% 85%,


/* tong */
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 50% 84%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 51% 84%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 52% 84%,



/* oor links */

/* Boven */

radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 7% 44%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 5% 43%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 3% 44%,

radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 2% 47%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 2% 50%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 2% 54%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 2% 58%,


radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 2% 62%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 3% 66%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 6% 67%,

/* Onder */

/* oor rechts */

/* Onder */
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 93% 44%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 95% 43%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 97% 44%,

radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 98% 47%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 98% 50%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 98% 54%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 98% 58%,

radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 98% 62%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 97% 66%,
radial-gradient(circle, var(--colorleft1) var(--particleSize), #0000 0) 94% 67%,

/* boven */

/* Ster op hoofd */

/* top */

radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 68.5% 19%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 70% 15%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 71.5% 19%,


radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 72.5%  22.5%,
/* right */

radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 76% 23.5%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 80% 25%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 76%  26.5%,

radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 72.5%  27.5%,
/* left */


radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 64% 23.5%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 60% 25%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 64% 26.5%,

radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 67.5%  27.5%,
/* bottom */

radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 68.5% 31%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 70% 35%,
radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 71.5% 31%,

radial-gradient(circle, var(--colorleft2) var(--particleSize), #0000 0) 67.5%  22.5%;


    background-size: var(--initialSize) var(--initialSize);
    background-repeat: no-repeat;
  }
  
  section:nth-of-type(1) div:nth-child(2) {

    --x: 40vmin;

    --finalSize: 40vmin;

    left: 20%;
    top: 30%;
    animation-delay: -1s;

    background: 
    radial-gradient(circle, var(--colormiddle1) var(--particleSize), #0000 0) 75% 75%,
    radial-gradient(circle, var(--colormiddle1) var(--particleSize), #0000 0) 25% 25%,
    radial-gradient(circle, var(--colormiddle1) var(--particleSize), #0000 0) 75% 25%,
    radial-gradient(circle, var(--colormiddle1) var(--particleSize), #0000 0) 25% 75%,
    radial-gradient(circle, var(--colormiddle1) var(--particleSize), #0000 0) 50% 100%,
    radial-gradient(circle, var(--colormiddle1) var(--particleSize), #0000 0) 100% 50%,
    radial-gradient(circle, var(--colormiddle1) var(--particleSize), #0000 0) 50% 0%,
    radial-gradient(circle, var(--colormiddle1) var(--particleSize), #0000 0) 0% 50%,

    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 10% 10%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 30% 10%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 50% 10%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 70% 10%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 90% 10%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 90% 30%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 90% 50%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 90% 70%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 90% 90%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 70% 90%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 50% 90%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 30% 90%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 10% 90%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 10% 70%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 10% 50%,
    radial-gradient(circle, var(--colormiddle2) var(--particleSize), #0000 0) 10% 30%;



background-size: var(--initialSize) var(--initialSize);
background-repeat: no-repeat;
  }

  
  section:nth-of-type(1) div:nth-child(3){
    --x: -30vmin;
    --y: -50vmin;

    --finalSize: 35vmin;
    left: 80%;
    top: 60%;
    animation-delay: 0.4s;

    background: 
    radial-gradient(circle, var(--colorright1) var(--particleSize), #0000 0) 20% 20%,
    radial-gradient(circle, var(--colorright1) var(--particleSize), #0000 0) 40% 40%,
    radial-gradient(circle, var(--colorright1) var(--particleSize), #0000 0) 60% 60%,
    radial-gradient(circle, var(--colorright1) var(--particleSize), #0000 0) 80% 80%,
    radial-gradient(circle, var(--colorright1) var(--particleSize), #0000 0) 20% 80%,
    radial-gradient(circle, var(--colorright1) var(--particleSize), #0000 0) 40% 20%,
    radial-gradient(circle, var(--colorright1) var(--particleSize), #0000 0) 60% 40%,
    radial-gradient(circle, var(--colorright1) var(--particleSize), #0000 0) 80% 60%,
    radial-gradient(circle, var(--colorright2) var(--particleSize), #0000 0) 30% 30%,
    radial-gradient(circle, var(--colorright2) var(--particleSize), #0000 0) 50% 50%,
    radial-gradient(circle, var(--colorright2) var(--particleSize), #0000 0) 70% 70%,
    radial-gradient(circle, var(--colorright2) var(--particleSize), #0000 0) 30% 70%,
    radial-gradient(circle, var(--colorright2) var(--particleSize), #0000 0) 70% 30%,
    radial-gradient(circle, var(--colorright2) var(--particleSize), #0000 0) 10% 50%,
    radial-gradient(circle, var(--colorright2) var(--particleSize), #0000 0) 90% 50%,
    radial-gradient(circle, var(--colorright2) var(--particleSize), #0000 0) 50% 10%;
        



background-size: var(--initialSize) var(--initialSize);
background-repeat: no-repeat;
  }