@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

$space:.5em;
 
body, button{
  font-family:'Manrope','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 500;
  font-size: 3rem;
//   background-color: aquamarine;
}
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 1.5em;
    height: 1.5em;
    margin:auto 7px;
    align-items: center;
  }
  .lds-ellipsis div {
    position: absolute;
    margin:auto;
    top:0;
    bottom: 0;
    width: .3em;
    height: .3em;
    border-radius: 50%;
    // background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: .2em;
    animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: .2em; //1*
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: .8em; //4*
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 1.4em; // 7*
    animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(.6em, 0); //3*
    }
  }