*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  background-color: rgb(46, 75, 237);
}

.loading-container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 10px
}


.loading{
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50px;
  animation-name: load;
  animation-duration:0.8s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.one{
  animation-delay: 0.2s;
}
.two{
  animation-delay: 0.4s;
}
.three{
  animation-delay: 0.6s;
}
.four {
  animation-delay: 0.8s;
}


@keyframes load{

  0%,100%{
    width: 30px;
    height:30px;
  }
   50%{
    width: 20px;
    height: 20px;
  }
  
}