@charset "UTF-8";
@import "variables";

article {height: 10px;
  background: $splashcolor;
  background: linear-gradient(to right, black 10%, white 10%);
  background-size: 50px 10px;
  margin: 20px 0;
  position: relative;
}
article:after {
  content: '';
  height: 10px;
  width: 5px;
  position: absolute;
  left: 498px;
  background-color:  $splashcolor;
}



div:nth-of-type(1){border-color:  $splashcolor;}
div:nth-of-type(1){animation-iteration-count: 0.0000001;}
div:nth-of-type(2){animation-iteration-count: 0.05;}
div:nth-of-type(3){animation-iteration-count: 0.1;}
div:nth-of-type(4){animation-iteration-count: 0.15;}
div:nth-of-type(5){animation-iteration-count: 0.2;}
div:nth-of-type(6){animation-iteration-count: 0.25;}
div:nth-of-type(7){animation-iteration-count: 0.3;}
div:nth-of-type(8){animation-iteration-count: 0.35;}
div:nth-of-type(9){animation-iteration-count: 0.4;}
div:nth-of-type(10){animation-iteration-count: 0.45;}
div:nth-of-type(11){animation-iteration-count: 0.50;}
div:nth-of-type(12){animation-iteration-count: 0.55;}
div:nth-of-type(13){animation-iteration-count: 0.6;}
div:nth-of-type(14){animation-iteration-count: 0.65;}
div:nth-of-type(15){animation-iteration-count: 0.7;}
div:nth-of-type(16){animation-iteration-count: 0.75;}
div:nth-of-type(17){animation-iteration-count: 0.8;}
div:nth-of-type(18){animation-iteration-count: 0.85;}
div:nth-of-type(19){animation-iteration-count: 0.9;}
div:nth-of-type(20){animation-iteration-count: 0.95;}
div:nth-of-type(21){animation-iteration-count: 1; border-color:  $splashcolor;}
div:nth-of-type(n+22) {display: none;}
article:after,article:before  {height: 300px !important;opacity: 0.25; content: "";}

article:before {position:absolute; left: 100px; width: 5px; background-color: black;}