.loading-container{
  width: 100%;
  height: 100%;  
  display: flex;
  gap: 0.5em;
  justify-content: center;
  align-content: center;
  position: absolute;
  top: 40%;
}

.orange, .yellow, .blue{
  width: 25px;
  height: 25px;
  border-radius: 30%;
}

.orange{
  background-color: rgba(255, 127, 80, 1);
  animation: orangeloading 3s infinite ease-in-out;
}

.yellow{
  background-color: rgba(255, 191, 0, 1);  
    animation: yellowloading 3s infinite ease-in-out;
}

.blue{
  background-color: rgba(0, 150, 255, 1);
  animation: blueloading 3s infinite ease-in-out;
}

@keyframes orangeloading{
    0%{
        background-color: rgba(255, 127, 80, 0.5);
        /* transform: translateX(-50%); */
    }
    50%{
        background-color: rgba(255, 127, 80, 0.9);
        /* transform: translate(25%); */
        border-radius: 50%;
    }
    100%{
        background-color: rgba(255, 127, 80, 0.5);
        /* transform: translate(-50%); */
      
    }
}

@keyframes yellowloading{
    0%{
        background-color: rgba(255, 191, 0, 0.5);
        /* transform: translateX(-50%); */
    }
    50%{
        background-color: rgba(255, 191, 0, 0.9);
        /* transform: translate(25%); */
        border-radius: 50%;

    }
    100%{
        background-color: rgba(255, 191, 0, 0.5);
        /* transform: translate(-50%); */
    }
}

@keyframes blueloading{
    0%{
        background-color: rgba(0, 150, 255, 0.5);
        /* transform: translateX(-50%); */
    }
    50%{
        background-color: rgba(0, 150, 255, 0.9);
        /* transform: translate(25%); */
        border-radius: 50%;
    }
    100%{
        background-color: rgba(0, 150, 255, 0.5);
        /* transform: translate(-50%); */
    }
}