#mistakes {
   width: 320px;
   display: flex;
   justify-content: space-evenly;
   margin: auto;
   margin-top: 10px
}

.mistakes-text {
   font-weight: 600;
   height: 30px;
   margin: 0;
   line-height: 30px;
}

.dot-container {
   height: 30px;
   width: 30px;
   display: flex;
   justify-content: center;
}

.dot {
   margin: auto;
   display: block;
   background-color: #5A594E;
   height: 20px;
   width: 20px;
   border-radius: 20px;

   transition: all 700ms;
}

.dot.smallerdot {
   animation-duration: 2s;
   animation-name: shrink;
   height: 0px;
   width: 0px;
}

@keyframes shrink {
   10% {
      scale: 1.5
   }

   60% {
      scale: 0
   }



}