:root {
  --aniDuration: 12s;
  --fillNone: hsla(31, 96%, 32%, 0);
  --fillOne: hsla(31, 96%, 32%, 1);
  --fillTwo: hsla(31, 96%, 32%, 0.5);
  --strokeClr: hsl(31, 96%, 32%);
}    

@keyframes draw {
  0% { 
    stroke-dasharray: 0 2500;
  }
  40% { 
    stroke-dasharray: 2500 2500;
  }
  100% { 
    stroke-dasharray: 2500 2500;
  }
} 


@keyframes act1 {
  0%   { rx: 25px;  height: 50px; width: 50px; fill: var(--fillNone); x:200; y:100; }
  40%  { rx: 25px;  height: 50px; width: 50px; fill: var(--fillNone); x:200; y:100; }
  50%  { rx: 25px;  height: 50px; width: 50px; fill: var(--fillNone); x:200; y:100; }
  51%  { rx: 25px;  height: 50px; width: 50px; fill: var(--fillTwo);  x:200; y:100; }
  60%  { rx: 25px;  height: 50px; width: 50px; fill: var(--fillTwo);  x:200; y:100; }
  65%  { rx: 25px;  height: 50px; width: 50px; fill: var(--fillTwo);  x:200; y:100; }
  70%  { rx: 25px;  height: 50px; width: 50px; fill: var(--fillTwo);  x:200; y:100; }
  75%  { rx: 2px;   height: 30px; width: 50px; fill: var(--fillTwo);  x:200; y:110; }
  85%  { rx: 2px;   height: 30px; width: 50px; fill: var(--fillTwo);  x:100; y:150; }
  100% { rx: 2px;   height: 30px; width: 50px; fill: var(--fillTwo);  x:100; y:150; }
} 

@keyframes act2 {
  0%   { rx: 25;  height: 50px; width: 50px; fill: var(--fillNone); x:100; y:200; }
  40%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillNone); x:100; y:200; }
  54%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillNone); x:100; y:200; }
  55%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillOne);  x:100; y:200; }
  60%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillOne);  x:100; y:200; }
  62%  { rx: 35;  height: 70px; width: 70px; fill: var(--fillOne);  x:95;  y:195; }
  70%  { rx: 35;  height: 70px; width: 70px; fill: var(--fillOne);  x:95;  y:195; }
  75%  { rx: 2;   height: 30px; width: 80px; fill: var(--fillOne);  x:95;  y:215; }
  85%  { rx: 2;   height: 30px; width: 80px; fill: var(--fillOne);  x:150; y:250; }
  100% { rx: 2;   height: 30px; width: 80px; fill: var(--fillOne);  x:150; y:250; }
} 

@keyframes act3 {
  0%   { rx: 25;  height: 50px; width: 50px; fill: var(--fillNone); x:300; y:200; }
  40%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillNone); x:300; y:200; }
  51%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillNone); x:300; y:200; }
  52%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillTwo);  x:300; y:200; }
  62%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillTwo);  x:300; y:200; }
  64%  { rx: 20;  height: 40px; width: 40px; fill: var(--fillTwo);  x:305; y:205; }
  70%  { rx: 20;  height: 40px; width: 40px; fill: var(--fillTwo);  x:305; y:205; }
  75%  { rx: 2;   height: 30px; width: 40px; fill: var(--fillTwo);  x:305; y:210; }
  85%  { rx: 2;   height: 30px; width: 40px; fill: var(--fillTwo);  x:150; y:200; }
  100% { rx: 2;   height: 30px; width: 40px; fill: var(--fillTwo);  x:150; y:200; }
} 

@keyframes act4 {
  0%   { rx: 25;  height: 50px; width: 50px; fill: var(--fillNone); x:200; y:300; }
  40%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillNone); x:200; y:300; }
  55%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillNone); x:200; y:300; }
  56%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillOne);  x:200; y:300; }
  60%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillOne);  x:200; y:300; }
  65%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillOne);  x:200; y:300; }
  70%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillOne);  x:200; y:300; }
  75%  { rx: 2;   height: 30px; width: 50px; fill: var(--fillOne);  x:200; y:310; }
  85%  { rx: 2;   height: 30px; width: 50px; fill: var(--fillOne);  x:230; y:300; }
  100% { rx: 2;   height: 30px; width: 50px; fill: var(--fillOne);  x:230; y:300; }
} 

@keyframes act5 {
  0%   { rx: 25;  height: 50px; width: 50px; fill: var(--fillNone); x:200; y:400; }
  40%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillNone); x:200; y:400; }
  53%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillNone); x:200; y:400; }
  54%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillTwo);  x:200; y:400; }
  64%  { rx: 25;  height: 50px; width: 50px; fill: var(--fillTwo);  x:200; y:400; }
  66%  { rx: 30;  height: 60px; width: 60px; fill: var(--fillTwo);  x:195; y:395; }
  70%  { rx: 30;  height: 60px; width: 60px; fill: var(--fillTwo);  x:195; y:395; }
  75%  { rx: 2;   height: 30px; width: 60px; fill: var(--fillTwo);  x:195; y:415; }
  85%  { rx: 2;   height: 30px; width: 60px; fill: var(--fillTwo);  x:280; y:350; }
  100% { rx: 2;   height: 30px; width: 60px; fill: var(--fillTwo);  x:280; y:350; }
} 

@keyframes dependencies {
  0%   {stroke: var(--strokeClr); }
  70%  {stroke: var(--strokeClr); }
  75%  {stroke: var(--fillNone); }
  100% {stroke: var(--fillNone); }
}

@keyframes milestone {
  0%   {translate: 0px 0px; }
  75%  {translate: 0px 0px; }
  85%  {translate: 115px -100px; }
  100% {translate: 115px -100px; }
}

@keyframes schedule {
  0%   {stroke: var(--fillNone);  }
  85%  {stroke: var(--fillNone);  }
  90%  {stroke: var(--strokeClr); }
  100% {stroke: var(--strokeClr); }
}

.prj {
  stroke: var(--strokeClr);
  stroke-width: 4;
  fill: none;
  width: 600px;
  height: 600px;
  animation: draw var(--aniDuration) linear infinite;  
}

.prj .act1{
  animation: act1 var(--aniDuration) ease-in-out infinite;
}
.prj .act2{
  animation: act2 var(--aniDuration) ease-in-out infinite;
}
.prj .act3{
  animation: act3 var(--aniDuration) ease-in-out infinite;
}
.prj .act4{
  animation: act4 var(--aniDuration) ease-in-out infinite;
}
.prj .act5{
  animation: act5 var(--aniDuration) ease-in-out infinite;
}

.prj .dependencies {
  animation: dependencies var(--aniDuration) ease-in-out infinite;
}

.prj .milestone {
  animation: milestone var(--aniDuration) ease-in-out infinite;
}

.prj .schedule {
  stroke-width: 2;
  animation: schedule var(--aniDuration) ease-in-out infinite;
}

.projectani {
  width: 400px;
  display: none;
  overflow: hidden;
  position: absolute;
  top: 70px;
  left: clamp(-500px, -22vw ,-350px);
  transition: all 300ms;
  opacity: 100%;
}

.projectaniTransparent {
  opacity: 0%;
  transition: opacity 12s ease-in;
  transition-delay: 12s;
}

@supports (rx: 25) {

  @media screen and (min-width: 1150px) {
    .projectani {
      display: block;
      transform: scale(0.5);
      left: clamp(-500px, -26vw ,-300px);    
    }  
  } 

  @media screen and (min-width: 1350px) {
    .projectani {
      display: block;
      transform: scale(1);
      left: clamp(-500px, -22vw ,-350px);
    }  
  } 

}