/** 

    Block 시멘틱 태그 
    body, header, nav, main, section, article, aside, footer, div ,progress

**/

body, header, nav, main, section, article, aside, footer, div ,progress{
  /*transition: background-color 800ms ease-in-out, color 800ms ease-in-out;*/
  transition: background-color 800ms ease-in-out;
}

html,body{
  
    margin:0px;
    padding:0px;
    height:100%;
    font-family: Roboto Mono, Menlo, Courier, monospace;    
    background-color: var(--body-bg-color);
    color:var(--text-color);
    
}

article{
  background-color: var(--article-bg-color);
}
section{
  background-color: var(--section-bg-color);
}
aside{
  background-color: var(--asdie-bg-color);
}
progress.active{
    display: block;
}
progress{
    display: none;
}
progress.none{
    display: none;
}
progress:indeterminate {
    appearance: none;
    width: 100%;
    background-color: #aad1f9;
    height: 5px;
    position: absolute;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    top:0px;
    left:0px;
    right:0px;
}
progress:indeterminate::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background: #106cc8;
    animation: progress-bar-1 2100ms 
    cubic-bezier(0.65, 0.81, 0.73, 0.4) infinite;
}

progress:indeterminate::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    background: #106cc8;
    animation: progress-bar-2 2100ms 
    cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
    animation-delay: 1150ms;
}

progress:indeterminate::-webkit-progress-inner-element {
    background-color: transparent;
   
 }
 progress:indeterminate::-webkit-progress-bar {
   
    background-color:transparent;
 
 }

@keyframes progress-bar-1{
    0% {
      left:-35%;
      right:100%;
    }
    60%,100% {
      left:100%;
      right:-90%;
    }
  }
  @keyframes progress-bar-2 {
    0% {
      left:-200%;
      right:100%;
    }
    60%,100% {
      left:107%;
      right:-8%;
    }
}