/* CSS Variables from your website */
:root {
  /*  --primary-color: #3498db;
    --secondary-color: #e74c3c;
    --accent-color: #2ecc71;
    --neutral-color: #95a5a6;*/


  --color-1: rgba(255, 99, 132, 0.75);    /* #ff6384 */
      --col10-1: rgba(255, 99, 132, 1.0);   
      --colo2-1: rgba(255, 99, 132, 0.2); 
  --color-2: rgba(54, 162, 235, 0.75);    /* #36a2eb */
      --col10-2: rgba(54, 162, 235, 1.0); 
      --colo2-2: rgba(54, 162, 235, 0.2);    
  --color-3: rgba(255, 206, 86, 0.75);
      --col10-3: rgba(255, 206, 86, 1.0);
      --colo2-3: rgba(255, 206, 86, 0.2);
  --color-4: rgba(75, 192, 192, 0.75);    /* #4bc0c0 */
      --col10-4: rgba(75, 192, 192, 1.0); 
      --colo2-4: rgba(75, 192, 192, 0.2);
  --color-5: rgba(153, 102, 255, 0.75);   /* #9966ff */
      --col10-5: rgba(153, 102, 255, 1.0); 
      --colo2-5: rgba(153, 102, 255, 0.2);
  --color-6: rgba(255, 159, 64, 0.75);    /* #ff9f40 */
      --col10-6: rgba(255, 159, 64, 1.0); 
      --colo2-6: rgba(255, 159, 64, 0.2); 
  --color-7: rgba(93, 173, 226, 0.75);    /* #5dade2 */
      --colo2-7: rgba(93, 173, 226, 0.2);
      --col10-7: rgba(93, 173, 226, 1.0);
  --color-8: rgba(178, 223, 138, 0.75);   /* #b2df8a */
      --col10-8: rgba(178, 223, 138, 1.0);
      --colo2-8: rgba(178, 223, 138, 0.2);
  --color-9: rgba(255, 117, 117, 0.75);   /* #ff7575 */
      --col10-9: rgba(255, 117, 117, 1.0);
      --colo2-9: rgba(255, 117, 117, 0.2);
  --color-10:rgba(169, 169, 169, 0.75);   /* #a9a9a9 */
      --col10-10:rgba(169, 169, 169, 1.0); 
      --colo2-10:rgba(169, 169, 169, 0.2); 
}

/* SVG Styles */
.svg-gears {
    width: 150%;
    height: auto;
}

.gear-small { 
    transform: scale(0.7) translate(440px, 145px); 
    fill: var(--col10-6);
}

.gear-large { 
    transform: scale(1.3) translate(150px, 0); 
    fill: var(--col10-3);
}

 .gear-xlarge { 
    transform: scale(2.7) translate(190px, 0); 
    fill: var(--colo2-9);
}

.gear-rotated { 
    transform: rotate(45deg) translate(100px, 0); 
    fill: var(--col10-5);
}

/* Target the path inside symbols when used */
use.gear-small {
    fill: var(--col10-1) !important;
}