:root {
  --color1: #3498DB;
  --color1_mix: 102, 190, 221;
  --color1_orb: 0, 239, 255;
  --color2: #76a9cb;
  --color3: #41799f;
  --color4: #c3c3c3;
  --color5: #111;
  --color6: #e97b7a;
  --color4_mix: 195, 195, 195;
}

#curr_selected .helmet .color1,
#curr_selected .dog .color1,
#curr_selected svg.nexus1 .color1,
#curr_selected svg.nexus2 .color1,
#curr_selected .toni .color1,
#curr_selected .Foundation .color1,
#curr_selected .Earth1 .color1,
#curr_selected .Earth1 .color6,
#curr_selected .Earth2 .color1,
#curr_selected .Math1 .color1,
#curr_selected .Math2 .color1
{
  fill: var(--color1)
}
#curr_selected .Math2 .color1{
  stroke:var(--color1)
}
#curr_selected .helmet .color2,
#curr_selected .dog .color2,
#curr_selected svg.nexus1 .color2,
#curr_selected svg.nexus2 .color2,
#curr_selected .toni .color2,
#curr_selected .Foundation .color2,
#curr_selected .Earth1 .color2,
#curr_selected .Earth2 .color2,
#curr_selected .Math1 .color2,
#curr_selected .Math2 .color2{
  fill: var(--color2)
}
#curr_selected .Math2 .color2{
  stroke:var(--color2)
}
#curr_selected svg.Math2{
  background-color: var(--color2)
}


#curr_selected .helmet .color3,
#curr_selected .dog .color3,
#curr_selected svg.nexus1 .color3,
#curr_selected svg.nexus2 .color3,
#curr_selected .toni .color3,
#curr_selected .Foundation .color3,
#curr_selected .Earth1 .color3,
#curr_selected .Earth2 .color3,
#curr_selected .Math1 .color3,
#curr_selected .Math2 .color3{
  fill: var(--color3)
}
#curr_selected .Math2 .color3{
  stroke:var(--color3)
}
#curr_selected .helmet .color4,
#curr_selected .dog .color4,
#curr_selected svg.nexus1 .color4,
#curr_selected svg.nexus2 .color4,
#curr_selected .toni .color4,
#curr_selected .Foundation .color4,
#curr_selected .Earth1 .color4,
#curr_selected .Earth2 .color4,
#curr_selected .Math1 .color4,
#curr_selected .Math2 .color4{
  fill: var(--color4)
}
#curr_selected svg.helmet,
#curr_selected .helmet .color5
#curr_selected svg.dog,
#curr_selected .dog .color5,
#curr_selected svg.nexus1,
#curr_selected svg.nexus1 .color5,
#curr_selected svg.nexus2,
#curr_selected svg.nexus2 .color5,
#curr_selected .toni .color5,
#curr_selected .Foundation .color5,
#curr_selected .Earth1 .color5,
#curr_selected .Earth2 .color5,
#curr_selected .Math1 .color5,
#curr_selected .Math2 .color5
{
  background: var(--color5)
}
#curr_selected .toni .color5,
#curr_selected .Earth1 .color5,
#curr_selected .Math2 .color5{
  fill: var(--color5)
}
/*=========Controls=============*/
.ai .svgObject svg{
  width: 250px;
  margin: 25px
}
.ai .editor,
.AI #curr_selected svg{
  margin: 25px;
}
.code img{
  width: 120px;
  height: 50px;
  object-fit: cover;
}
body .inner.ai a.code.btn.link{
  width: fit-content;
  font-size: 1.25em;
  margin: 40px auto 10px 15px;
}
 a.code span{
  margin: 10px 30px 10px 5px;
}
/*============AI Icon Page============*/

.ai svg {
  width: 500px;
}
/*Math*/
svg.Math2 {
  background: #af6a7d;
  border-radius: 50%;
}
.Math2 .color1,
.Math2 .color3{
  fill: #d7353e;
  stroke: #d7353e;

}
.Math2 .color2{
  fill: #af6a7d;
  stroke:  #af6a7d;


}
/*Math*/
.Math1 .color1{
  fill: #8f6f84;
  stroke: #8f6f84;
}
.Math1 .color2{
  fill: #bdbdbd;
    stroke: none;

}
.Math1 .color3{
  fill: #c75800;
    stroke: #c75800;
}
.Math1 .color4{
  fill: #c97a0d;
    stroke: #c97a0d;
}
.Math1 .color5{
  fill: #7f3434;
    stroke: #7f3434;
}

/*Foundation*/
.Foundation path {
  stroke: none;
}
.Foundation .color1{
  fill: #e3aa67
}
.Foundation .color2{
  fill: #bdbdbd;

}
.Foundation .color3{
  fill: #c75800;
}
.Foundation .color4{
  fill: #c97a0d
}
.Foundation .color5{
  fill: #7f3434;
}
/*Earth*/
.Earth1 path {
  stroke: none;
}
.Earth1 .color1{
  fill: #32bdae;
}
.Earth1 .color2{
  fill: #61c2e3;

}
.Earth1 .color3{
  fill: #c75800;
}
.Earth1 .color4{
  fill: url(#lakeGradient);
}
.Earth1 .color5{
  fill: #a6b3b2;
}
.Earth1 .color6{
  fill: #672c06;
  stroke: #672c06;
}
/*Earth*/
.Earth2 path {
  stroke: none;
}
.Earth2 .color1{
  fill: #32bdae;
}
.Earth2 .color2{
  fill: #61c2e3;
  stroke: #111;
}
.Earth2 .color3{
  fill: #c75800;
}
.Earth2 .color4{
  fill: #4fd5c6;
}
.Earth2 .color5{
  fill: #27af9a
}
.Earth2 .color6{
  fill: #672c06;
  stroke: #672c06;
}


/*toni*/
.toni path{
  stroke: none;
}
.toni .color1{
  fill: white;
}
.toni .color2{
  fill: pink;
  stroke: #111;
}
.toni .color3{
  fill: #111;
}
.toni .color4{
  fill: #d5af4f;
}
.toni .color5{
  fill: #bb858e;
}
.toni .color6{
  fill: #333;
}
.toni .eye{
  fill: #9b5235;
  fill: url(#eyeGradient);
  stroke: #111;
}


/*helmet*/
svg.helmet path {
  stroke: none;
}

svg.helmet{
  background: #c3c3c3;
  border-radius: 50%;
}
.helmet .color1{
  fill: #6e6575

}
.helmet .color2{
  fill: #1c1c1cbb
}
.helmet .color3{
  fill: #b0a7b7;
}
.helmet .color4{
  fill: #b3840d
}


svg.nexus2{

  border-radius: 50%;
}
/*nexus*/
svg.nexus2 .color1{
  fill: #78ebb0;
  stroke: #b3810c80;
}
svg.nexus2 .color2 {
    fill: url(#lakeGradient);
}
/*nexus*/
svg.nexus1 path {
  stroke: none;
}

svg.nexus1{
  background: #27abd9;
  border-radius: 50%;
}
.nexus1 .color1{
  fill: #204733;

}
.nexus1 .color2{
  fill: #27abd9
}
.nexus1 .color3{
  fill: #e3a507;;
}
.nexus1 .color4{
  fill: #4b8b58
}




/*dog*/
.dog path{
  stroke: none;
}
svg.dog{
  background: #111;
  border-radius: 50%;
}
.dog .color1{
  fill: #4d4b4a;
}
.dog .color2{
  fill: #e3afaf;
}
.dog .color3{
  fill: #9b5235;
  fill: url(#eyeGradient);
}
.dog .color4{
  fill: #3d3d3d
}