.balls{
    --effect: hover 1s linear infinite;
  }
  #loadercont{
/* display: none; */
      position: fixed;
      z-index: 555;
      width: 100%;
      /* margin: 100px auto; */
      box-sizing: border-box;
      justify-content: center;
      top: 45%;
      text-align: center;
      /* height: 100vh; */
  }
.balls{
    
    /* display: none; */
    width: 50px; 
    height: 20px; 
    margin: 4px; 
    background-color: #490303; 
    border-radius: 100px;
    /* animation: hover 1s linear infinite;;
    -moz-animation: hover 1s linear infinite;;
    -o-animation: hover 1s linear infinite;; */
    /* -webkit-animation: hover 1s linear infinite;; */
}
#span1 {
      /* -webkit-animation: hover 1s linear infinite;; */
    animation: var(--effect);
  }
  
  #span2 {
    animation: var(--effect) .125s;
  }
  
  #span3 {
    animation: var(--effect) .25s;
  }
  
  #span4 {
    animation: var(--effect) .375s;
  }
  
  #span5 {
    animation: var(--effect) .5s;
  }
  
  #span6 {
    animation: var(--effect) .675s;
  }
  
  #span7 {
    animation: var(--effect) .75s;
  }
  #span8{
    animation: var(--effect) .654s;
  }
  #span9{
    animation: var(--effect) .89s;
  }
  
  @-webkit-keyframes hover {
    0% {
      /* transform: scale(.5); */
      opacity: 0;
     
    }
  
    20% {
      /* transform: scale(1); */
      color: grey;
      -webkit-text-stroke: 3px rgb(156, 154, 154);
      filter: drop-shadow(0 0 1px rgb(73, 219, 171))
      drop-shadow(0 0 1px rgb(2, 1, 6))
      drop-shadow(0 0 3px rgb(174, 37, 37))
      drop-shadow(0 0 5px #381e53)
      hue-rotate(10turn);
    }
    
    50% {
        /* transform: scale(.5); */
        /* color: #121212; */
        color: #bbb8b8;
      -webkit-text-stroke: 2px gray;
    }
  
  
  }
  *{
    margin: 0;
    padding: 0;
    
}
@-moz-keyframes spin{
    0%{
        transform: rotate(10deg);
        transition: ease-in-out 2s;
    }
    100%{
        transform: rotate(360deg);
        opacity: 0.2;
    }
}
@-webkit-keyframes spin{
    0%{
        transform: rotate(10deg);
        transition: ease-in-out 2s;
    }
    100%{
        transform: rotate(360deg);
        opacity: 0.2;
    }
}
@-o-keyframes spin{
    0%{
        transform: rotate(10deg);
        transition: ease-in-out 2s;
    }
    100%{
        transform: rotate(360deg);
        opacity: 0.2;
    }
}
@keyframes spin{
    0%{
        transform: rotate(10deg);
        transition: ease-in-out 2s;
    }
    100%{
        transform: rotate(360deg);
        opacity: 0.2;
    }
}

.loaderWrapper{
    width: 100%;
    height: 100vh;
    /* z-index: 99; */
    /* background-color: #0000006d; */
    /* background-attachment: fixed; */
    /* position: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; */
    /* display: none; */
}
.loader{
    width: 40px;
    height: 40px;
    border-radius: 100px;
    border: 4px dashed blue;
    border-top: #0000006d;
    position: relative;
    top: 40%;
    left: 40%;
    animation: spin 1s linear infinite;
}