/* refer documentStructure.def for detailed explanations and comments*/

/* set all items here as variables, everything is calculated to ensure consistency and flexibility */
/*set for a4 */ 

:root{
   /* user adjustable parameters document Standards which can be overridden by setting these variable in a :root in the document*/


/* animation default settings =>hange for an object by setting the style attribute*/
   --transitionoff:2s;
   --transitionon:1s;
   --transitionrotateon:360deg;
   --transitionantirotate: calc( -1.0 * var(--transitionrotateon) );
   --transitiongrow:2.0;
   --transitionantigrow: calc( 1.0 / var(--transitiongrow) );
   --transitionshrink:2.0;
   --transitionantishrink: calc( 1.0 / var(--transitionshrink) );
   --flarecolor: rgba(0,255,0,0.8);
   --beforeflarecolor: rgba(255,255,255,0.5);
   --textcolor: rgba(80,80,255,0.95);
   --fontweight:bold;
   --outlinestyle:dotted;
  --outlinecolor:rgba(255,128,75,0.8);
  --outlineoffset:-8px;
  --outlinewidth:12px;
  
  --t0off         :2s ;
  --t0on          :2s ;
  --outlinestyle0 :inherit;
  --outlinecolor0 :inherit;
  --outlineoffset0:inherit;
  --outlinewidth0 :inherit;
  --textcolor0    :inherit;
  --fontweight0   :normal;
  --flarecolor0   :rgba(255,255,255,0);
  --transitionrotateon0:inherit;
  --transitiongrow0:inherit;
  
  --t1on          :0s ;
  --outlinestyle1 :var(--outlinestyle0 );
  --outlinecolor1 :var(--outlinecolor0 );
  --outlineoffset1:var(--outlineoffset0);
  --outlinewidth1 :var(--outlinewidth0 );
  --textcolor1    :var(--textcolor0    );
  --fontweight1   :var(--fontweight0   );
  --flarecolor1   :var(--flarecolor0   );
  --transitionrotateon1:var(--transitionrotateon0);
  --transitiongrow1    :var(--transitiongrow0);
  
  --t2on          :0s ;
  --outlinestyle2 :var(--outlinestyle1 );
  --outlinecolor2 :var(--outlinecolor1 );
  --outlineoffset2:var(--outlineoffset1);
  --outlinewidth2 :var(--outlinewidth1 );
  --textcolor2    :var(--textcolor1    );
  --fontweight2   :var(--fontweight1   );
  --flarecolor2   :var(--flarecolor1   );
  --transitionrotateon2:var(--transitionrotateon1);
  --transitiongrow2    :var(--transitiongrow1);
  
  --t3on          :0s ;
  --outlinestyle3 :var(--outlinestyle2 );
  --outlinecolor3 :var(--outlinecolor2 );
  --outlineoffset3:var(--outlineoffset2);
  --outlinewidth3 :var(--outlinewidth2 );
  --textcolor3    :var(--textcolor2    );
  --fontweight3   :var(--fontweight2   );
  --flarecolor3   :var(--flarecolor2   );
  --transitionrotateon3:var(--transitionrotateon2);
  --transitiongrow3    :var(--transitiongrow2);
  
  --t4on          :0s ;
  --outlinestyle4 :var(--outlinestyle3 );
  --outlinecolor4 :var(--outlinecolor3 );
  --outlineoffset4:var(--outlineoffset3);
  --outlinewidth4 :var(--outlinewidth3 );
  --textcolor4    :var(--textcolor3    );
  --fontweight4   :var(--fontweight3   );
  --flarecolor4   :var(--flarecolor3   );
  --transitionrotateon4:var(--transitionrotateon3);
  --transitiongrow4    :var(--transitiongrow3);
  
  --t5on          :0s ;
  --outlinestyle5 :var(--outlinestyle4 );
  --outlinecolor5 :var(--outlinecolor4 );
  --outlineoffset5:var(--outlineoffset4);
  --outlinewidth5 :var(--outlinewidth4 );
  --textcolor5    :var(--textcolor4    );
  --fontweight5   :var(--fontweight4   );
  --flarecolor5   :var(--flarecolor4   );
  --transitionrotateon5:var(--transitionrotateon4);
  --transitiongrow5    :var(--transitiongrow4);
  --seqcount: 0;
}

/* //-- ref only , a different transition used in the system :
// simply add clas FBORD to object
@keyframes flashoutline {
    0% {
        outline-offset: 0px;
        outline-style: dotted;
    }
    100% {
        outline-offset: 4px;
        outline-style: dashed;
    }
}
.fbord {
    outline-style: dotted;
    outline-color: rgba(255,0,0,0.8); 
    outline-offset:0px;
    outline-width:2px;
    animation-name: flashoutline;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.row>.fbord{
   outline-style: dotted;
   outline-color: rgba(128,0,255,0.8); 
   outline-width:2px;
}
.onepage.fbord{
   outline-style: dotted;
   outline-color: rgba(200,100,50,0.8); 
   outline-width:3px;
}

*/


/* transition Animations*/
/* Note, m_ is added dynamically on hover by js 
  currently cannot control to ensure JS is executed before css:hoverso exclude m_ 
  from anti transition */ 
  
/* need a classmethod  to hide menu and prevent when user is showing anitmations not editing them*/


 /* make an object bigger when hovering */
 /*.noanimation class is applied to a document: div.reportcontainer but needs to affect every sub element*/
 .reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row, 
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div, 
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box ,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_, 
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_, 
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>n_, 
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>c_, 
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_>o_,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_>o_,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_>o_>*,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_>o_>*,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_>o_>*>*,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_>o_>*>*,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_>o_>*>*>*,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_>o_>*>*>*,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_>o_>*>*>*>*,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_>o_>*>*>*>*,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_>o_>*>*>*>*>*,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_>o_>*>*>*>*>*,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_>o_>*>*>*>*>*>*,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_>o_>*>*>*>*>*>*
{   
      transition: unset;
      
 }

.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row:hover, 
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div:hover, 
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box:hover,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_:hover, 
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_:hover, 
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>n_:hover, 
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>c_:hover, 
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_>o_:hover,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_>o_:hover,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_>o_>*:hover,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_>o_>*:hover,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_>o_>*>*:hover,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_>o_>*>*:hover,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_>o_>*>*>*:hover,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_>o_>*>*>*:hover,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_>o_>*>*>*>*:hover,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_>o_>*>*>*>*:hover,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_>o_>*>*>*>*>*:hover,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_>o_>*>*>*>*>*:hover,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>t_>o_>*>*>*>*>*>*:hover,
.reportcontainer.noanimation>.printzone>.docsection>.paperpage>div>.row>div>box>d_>o_>*>*>*>*>*>*:hover
 {
    transition: unset;
    transform: unset;
}    



.talldemoset1{
  --t0off         :2s ;
  --t0on          :8s ;
  --outlinestyle0 :inherit;
  --outlinecolor0 :inherit;
  --outlineoffset0:inherit;
  --outlinewidth0 :inherit;
  --textcolor0    :inherit;
  --fontweight0   :normal;
  --flarecolor0   :rgba(255,255,255,0);
  --transitionrotateon0:0deg;
  --transitiongrow0:1.0;
  
  --t1on          :2s ;
  --outlinestyle1 :var(--outlinestyle0);
  --outlinecolor1 :var(--outlinecolor0);
  --outlineoffset1:var(--outlineoffset0);
  --outlinewidth1 :var(--outlinewidth0);
  --textcolor1    :red;
  --fontweight1   :bold;
  --flarecolor1   :var(--flarecolor0);
  --transitionrotateon1:var(--transitionrotateon0);
  --transitiongrow1    :1.5;
  
  --t2on          :2s ;
  --outlinestyle2 :var(--outlinestyle1);
  --outlinecolor2 :var(--outlinecolor1);
  --outlineoffset2:var(--outlineoffset1);
  --outlinewidth2 :var(--outlinewidth1);
  --textcolor2    :var(--textcolor1);
  --fontweight2   :var(--fontweight1);
  --flarecolor2   :green;
  --transitionrotateon2:360deg;
  --transitiongrow2    :var(--transitiongrow1);
  
  --t3on          :2s ;
  --outlinestyle3 :solid;
  --outlinecolor3 :red;
  --outlineoffset3:-1px;
  --outlinewidth3 :8px;
  --textcolor3    :var(--textcolor2);
  --fontweight3   :var(--fontweight2);
  --flarecolor3   :var(--flarecolor2);
  --transitionrotateon3:var(--transitionrotateon2);
  --transitiongrow3    :var(--transitiongrow2);
   
  --t4on          :0s ;
  --outlinestyle4 :var(--outlinestyle3);
  --outlinecolor4 :var(--outlinecolor3);
  --outlineoffset4:var(--outlineoffset3);
  --outlinewidth4 :var(--outlinewidth3);
  --textcolor4    :var(--textcolor3);
  --fontweight4   :var(--fontweight3);
  --flarecolor4   :var(--flarecolor3);
  --transitionrotateon4:360deg;
  --transitiongrow4    :var(--transitiongrow3);
  
  --t5on          :0s ;
  --outlinestyle5 :var(--outlinestyle4);
  --outlinecolor5 :var(--outlinecolor4);
  --outlineoffset5:var(--outlineoffset4);
  --outlinewidth5 :var(--outlinewidth4);
  --textcolor5    :var(--textcolor4);
  --fontweight5   :var(--fontweight4);
  --flarecolor5   :orange;
  --transitionrotateon5:-720deg;
  --transitiongrow5    :var(--transitiongrow4);
  
 
}


.clickanimate{
  /* --comment: clickanimate only works if item is selectable ie edit = y*/
  --transitionoff:1s;
  --transitionon:1s;
  --outlinestyle:solid;
  --outlinecolor:blue;
  --outlineoffset:-2px;
  --outlinewidth:5px;
  --textcolor:orange;
  --fontweight:bold;
  --flarecolor:rgba(255,255,255,0);
  --transitionrotateon:0deg;
  --transitiongrow:1.20;
}


.clickanimate:active{
transition: all var(--transitionoff) ;
}
.clickanimate:focus{
  transition: all var(--transitionon);
  outline-style:  var(--outlinestyle);
  outline-color:  var(--outlinecolor);
  outline-offset: var(--outlineoffset);
  outline-width:  var(--outlinewidth);
  color:          var(--textcolor);
  font-weight:    var(--fontweight);
  background-color: var(--flarecolor);
  transform: rotate(var(--transitionrotateon)) scale(var(--transitiongrow),var(--transitiongrow));
  z-index: 100;
}

  
.flare {
  background-color: var(--beforeflarecolor);
  transition: transform var(--transitionoff),background-color var(--transitionoff);
 }
.flare:hover {
  background-color: var(--flarecolor);
  transform: scale(var(--transitiongrow),var(--transitiongrow));
  transition: transform var(--transitionon), background-color var(--transitionon);
  z-index: 100;
  }
/*do not scale menu notes or comments*/
.flare>n_,.flare>c_ {/*,.flare>m_*/
    transition: transform var(--transitionoff);
    }
.flare:hover>n_,.flare:hover>c_{/*,.flare:hover>m_ */
    transition: transform var(--transitionon);
    transform:scale(var(--transitionantigrow),var(--transitionantigrow));
    }

 /* make an object spin when hovering */
.spin {
    background-color: var(--beforeflarecolor);
    transition: transform var(--transitionoff),background-color  var(--transitionoff);
   }
.spin:hover {
    background-color: var(--flarecolor);
    transition: transform var(--transitionon),background-color var(--transitionon); /* fast onhover*/
    transform: rotate(var(--transitionrotateon));
    z-index: 100;
    }
.spin>n_,.spin>c_,.spin>.antispin {/*,.spin>m_*/
    transition: transform var(--transitionoff);
    }
.spin:hover>n_,.spin:hover>c_,.spin>.antispin { /*,.spin:hover>m_*/
    transition: transform var(--transitionon);
    transform:rotate(var(--transitionantirotate));
    }

/* note cannot apply two transitions for the smae object for the same property*/
/*Hence*/
.flarespin {
    background-color: var(--beforeflarecolor);
    transition: transform var(--transitionoff),background-color var(--transitionoff);
} /*slow on unhover*/
.flarespin:hover {
    background-color: var(--flarecolor);
    transition: transform var(--transitionon),background-color var(--transitionon); /* fast onhover*/
    transform: rotate(var(--transitionrotateon)) scale(var(--transitiongrow),var(--transitiongrow));
    z-index: 100;
}
.flarespin>n_,.flarespin>c_{/*,.flarespin>m_ */
    transition: transform var(--transitionoff);
}
.flarespin:hover>n_,.flarespin:hover>c_ {/*,.flarespin:hover>m_*/
    transition: transform var(--transitionon);
    transform: rotate(var(--transitionantirotate)) scale(var(--transitionantigrow),var(--transitionantigrow));
}

.glow {
  background-color: var(--beforeflarecolor);
  transition: background-color var(--transitionoff) ,box-shadow var(--transitionoff);
 }
.glow:hover {
  background-color: var(--flarecolor);
  box-shadow: 2px 4px 6px rgba(120,120,120,0.95);
  transition: background-color var(--transitionon) ,box-shadow var(--transitionon);
 }



.txallthreestage:not(:hover){
  animation-direction: reverse;
  animation-name: txthreestageforunhover;
  animation-duration: var(--t0off);
}
.txallthreestage:hover{
  animation-direction: forwards;
  animation-fill-mode: forwards;
  animation-name: txthreestage;
  animation-duration: var(--t0on);
  z-index: 100;
}

@keyframes txthreestage {
  0% {
    outline-style: var(--outlinestyle0);
    outline-color: var(--outlinecolor0);
    outline-offset:var(--outlineoffset0);
    outline-width: var(--outlinewidth0);
    color:         var(--textcolor0);
    font-weight:   var(--fontweight0);
    background-color: var(--flarecolor0);
    transform: rotate(var(--transitionrotateon0)) scale(var(--transitiongrow0),var(--transitiongrow0));
  }
  33% {
    outline-style: var(--outlinestyle1);
    outline-color: var(--outlinecolor1);
    outline-offset:var(--outlineoffset1);
    outline-width: var(--outlinewidth1);
    color:         var(--textcolor1);
    font-weight:   var(--fontweight1);
    background-color: var(--flarecolor1);
    transform: rotate(var(--transitionrotateon1)) scale(var(--transitiongrow1),var(--transitiongrow1));
  }
  66% {
    outline-style: var(--outlinestyle2);
    outline-color: var(--outlinecolor2);
    outline-offset:var(--outlineoffset2);
    outline-width: var(--outlinewidth2);
    color:         var(--textcolor2);
    font-weight:   var(--fontweight2);
    background-color: var(--flarecolor2);
    transform: rotate(var(--transitionrotateon2)) scale(var(--transitiongrow2),var(--transitiongrow2));
  }
  100% {
    outline-style: var(--outlinestyle3);
    outline-color: var(--outlinecolor3);
    outline-offset:var(--outlineoffset3);
    outline-width: var(--outlinewidth3);
    color:         var(--textcolor3);
    font-weight:   var(--fontweight3);
    background-color: var(--flarecolor3);
    transform: rotate(var(--transitionrotateon3)) scale(var(--transitiongrow3),var(--transitiongrow3));
  }

}

@keyframes txthreestageforunhover {
  0% {
    outline-style: var(--outlinestyle0);
    outline-color: var(--outlinecolor0);
    outline-offset:var(--outlineoffset0);
    outline-width: var(--outlinewidth0);
    color:         var(--textcolor0);
    font-weight:   var(--fontweight0);
    background-color: var(--flarecolor0);
    transform: rotate(var(--transitionrotateon0)) scale(var(--transitiongrow0),var(--transitiongrow0));
  }
  33% {
    outline-style: var(--outlinestyle1);
    outline-color: var(--outlinecolor1);
    outline-offset:var(--outlineoffset1);
    outline-width: var(--outlinewidth1);
    color:         var(--textcolor1);
    font-weight:   var(--fontweight1);
    background-color: var(--flarecolor1);
    transform: rotate(var(--transitionrotateon1)) scale(var(--transitiongrow1),var(--transitiongrow1));
  }
  66% {
    outline-style: var(--outlinestyle2);
    outline-color: var(--outlinecolor2);
    outline-offset:var(--outlineoffset2);
    outline-width: var(--outlinewidth2);
    color:         var(--textcolor2);
    font-weight:   var(--fontweight2);
    background-color: var(--flarecolor2);
    transform: rotate(var(--transitionrotateon2)) scale(var(--transitiongrow2),var(--transitiongrow2));
  }
  100% {
    outline-style: var(--outlinestyle3);
    outline-color: var(--outlinecolor3);
    outline-offset:var(--outlineoffset3);
    outline-width: var(--outlinewidth3);
    color:         var(--textcolor3);
    font-weight:   var(--fontweight3);
    background-color: var(--flarecolor3);
    transform: rotate(var(--transitionrotateon3)) scale(var(--transitiongrow3),var(--transitiongrow3));
  }

}

.txallfivestage:not(:hover){
  animation-direction: reverse;
  animation-name: txfivestageforunhover;
  animation-duration: var(--t0off);
}
.txallfivestage:hover{
  animation-direction: forwards;
  animation-fill-mode: forwards;
  animation-name: txfivestage;
  animation-duration: var(--t0on);
  z-index: 100;

}


@keyframes txfivestage {
  0% {
    outline-style: var(--outlinestyle0);
    outline-color: var(--outlinecolor0);
    outline-offset:var(--outlineoffset0);
    outline-width: var(--outlinewidth0);
    color:         var(--textcolor0);
    font-weight:   var(--fontweight0);
    background-color: var(--flarecolor0);
    transform: rotate(var(--transitionrotateon0)) scale(var(--transitiongrow0),var(--transitiongrow0));
  }
  20% {
    outline-style: var(--outlinestyle1);
    outline-color: var(--outlinecolor1);
    outline-offset:var(--outlineoffset1);
    outline-width: var(--outlinewidth1);
    color:         var(--textcolor1);
    font-weight:   var(--fontweight1);
    background-color: var(--flarecolor1);
    transform: rotate(var(--transitionrotateon1)) scale(var(--transitiongrow1),var(--transitiongrow1));
  }
  40% {
    outline-style: var(--outlinestyle2);
    outline-color: var(--outlinecolor2);
    outline-offset:var(--outlineoffset2);
    outline-width: var(--outlinewidth2);
    color:         var(--textcolor2);
    font-weight:   var(--fontweight2);
    background-color: var(--flarecolor2);
    transform: rotate(var(--transitionrotateon2)) scale(var(--transitiongrow2),var(--transitiongrow2));
  }
  60% {
    outline-style: var(--outlinestyle3);
    outline-color: var(--outlinecolor3);
    outline-offset:var(--outlineoffset3);
    outline-width: var(--outlinewidth3);
    color:         var(--textcolor3);
    font-weight:   var(--fontweight3);
    background-color: var(--flarecolor3);
    transform: rotate(var(--transitionrotateon3)) scale(var(--transitiongrow3),var(--transitiongrow3));
  }
  80% {
    outline-style: var(--outlinestyle4);
    outline-color: var(--outlinecolor4);
    outline-offset:var(--outlineoffset4);
    outline-width: var(--outlinewidth4);
    color:         var(--textcolor4);
    font-weight:   var(--fontweight4);
    background-color: var(--flarecolor4);
    transform: rotate(var(--transitionrotateon4)) scale(var(--transitiongrow4),var(--transitiongrow4));
  }
  100% {
    outline-style: var(--outlinestyle5);
    outline-color: var(--outlinecolor5);
    outline-offset:var(--outlineoffset5);
    outline-width: var(--outlinewidth5);
    color:         var(--textcolor5);
    font-weight:   var(--fontweight5);
    background-color: var(--flarecolor5);
    transform: rotate(var(--transitionrotateon5)) scale(var(--transitiongrow5),var(--transitiongrow5));
  }
}


@keyframes txfivestageforunhover {
  0% {
    outline-style: var(--outlinestyle0);
    outline-color: var(--outlinecolor0);
    outline-offset:var(--outlineoffset0);
    outline-width: var(--outlinewidth0);
    color:         var(--textcolor0);
    font-weight:   var(--fontweight0);
    background-color: var(--flarecolor0);
    transform: rotate(var(--transitionrotateon0)) scale(var(--transitiongrow0),var(--transitiongrow0));
  }
  20% {
    outline-style: var(--outlinestyle1);
    outline-color: var(--outlinecolor1);
    outline-offset:var(--outlineoffset1);
    outline-width: var(--outlinewidth1);
    color:         var(--textcolor1);
    font-weight:   var(--fontweight1);
    background-color: var(--flarecolor1);
    transform: rotate(var(--transitionrotateon1)) scale(var(--transitiongrow1),var(--transitiongrow1));
  }
  40% {
    outline-style: var(--outlinestyle2);
    outline-color: var(--outlinecolor2);
    outline-offset:var(--outlineoffset2);
    outline-width: var(--outlinewidth2);
    color:         var(--textcolor2);
    font-weight:   var(--fontweight2);
    background-color: var(--flarecolor2);
    transform: rotate(var(--transitionrotateon2)) scale(var(--transitiongrow2),var(--transitiongrow2));
  }
  60% {
    outline-style: var(--outlinestyle3);
    outline-color: var(--outlinecolor3);
    outline-offset:var(--outlineoffset3);
    outline-width: var(--outlinewidth3);
    color:         var(--textcolor3);
    font-weight:   var(--fontweight3);
    background-color: var(--flarecolor3);
    transform: rotate(var(--transitionrotateon3)) scale(var(--transitiongrow3),var(--transitiongrow3));
  }
  80% {
    outline-style: var(--outlinestyle4);
    outline-color: var(--outlinecolor4);
    outline-offset:var(--outlineoffset4);
    outline-width: var(--outlinewidth4);
    color:         var(--textcolor4);
    font-weight:   var(--fontweight4);
    background-color: var(--flarecolor4);
    transform: rotate(var(--transitionrotateon4)) scale(var(--transitiongrow4),var(--transitiongrow4));
  }
  100% {
    outline-style: var(--outlinestyle5);
    outline-color: var(--outlinecolor5);
    outline-offset:var(--outlineoffset5);
    outline-width: var(--outlinewidth5);
    color:         var(--textcolor5);
    font-weight:   var(--fontweight5);
    background-color: var(--flarecolor5);
    transform: rotate(var(--transitionrotateon5)) scale(var(--transitiongrow5),var(--transitiongrow5));
  }
}





/* *******************testing*******************  */
.seqanimateparent{
   counter-reset:seqcount;
   --seqcount:0;
}

.seqanimate{
 
  
  --transitionoff:1s;
  --transitionon:1s;
  --outlinestyle:solid;
  --outlinecolor:blue;
  --outlineoffset:-2px;
  --outlinewidth:5px;
  --textcolor:orange;
  --fontweight:bold;
  --flarecolor:rgba(255,255,255,0);
  --transitionrotateon:0deg;
  --transitiongrow:1.20;
}

.seqanimate:before{
  content: "[x]";
  
  /* content: "[]" var(--seqcount);*/
  /*  counter-increment: seqcount;*/
  /*  --ourseq: counter(seqcount);*/
  /*  content: [counter(seqcount)];*/
}
.seqanimate:focus{
  --seqcount:calc( var(--seqcount) + 1 );
}


.seqanimate:active{
transition: all var(--transitionoff) ;
}
.seqanimate[data-anim=var(--seqcount)]:focus{
  transition: all var(--transitionon);
  outline-style:  var(--outlinestyle);
  outline-color:  var(--outlinecolor);
  outline-offset: var(--outlineoffset);
  outline-width:  var(--outlinewidth);
  color:          var(--textcolor);
  font-weight:    var(--fontweight);
  background-color: var(--flarecolor);
  transform: rotate(var(--transitionrotateon)) scale(var(--transitiongrow),var(--transitiongrow));
}