.visible {
   visibility: visible;
}

.hidden {
   visibility: hidden;
}

 .barprogress {
    margin: 0 auto;
    padding: 2px;
    width: 100%;
    border: 0px solid #000;
    border-radius: 10px;
    height: 26px;
    position: relative;

  }
  
  .barprogress .barprogress__bar {
    height: 100%;
    border-radius: 15px;
    background-image: 
repeating-linear-gradient(
  45deg,
  white,
  white 10px,
  #e0dede 10px,
  #e0dede 20px /* determines size */
);
  }


.barprogress__bar {
animation-name: progessanimation;
animation-duration: 5s;
}

@keyframes progessanimation {

0% {width:0%;}
50%  {width:0%;}
100% {}

}

  .question {
      margin: 0 auto;
      text-align:center;
      margin-bottom:10px;
      
    }

    .baraverage {
      border-left: 3px solid #000;
      color:black;
      padding-left: 5px;
       width: 45px;
       position: absolute;
margin-top: -26px;
line-height: 1;
padding-top: 10px;
animation-name: averageanimation;
animation-duration: 3s;
       }

@keyframes averageanimation {

0% {left:0px;}
100% {}

}

.averagetext {
animation-name: averageanimation2;
animation-duration: 2s;
display: inline;
}

@keyframes averageanimation2 {

0% {opacity:0;}
99% {opacity:0;}
100% {}

}

.board {
display:flex;
justify-content: center;
gap: 10px;
margin: 0 auto;
width: 100%;
max-width: 1200px;
min-width: 500px;
}

.flex-item {
width: 100%;
}