/* From Uiverse.io by fanishah */ 
.loader {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  #page-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
  }

  #container-loader {
    position: relative;
    width: 490px;
    height: 490px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .item {
    /* width: 400px;
    height: 400px;
    border: 1px solid transparent;
    border-radius: 50%;
    position: absolute; */
    width: 150px;
    height: 150px;
    position: absolute;
  }
  
  .item-1 {
    background-color: rgb(250, 87, 103);
    top: 0;
    left: 0;
    z-index: 1002;
    animation: item-1_move 2.8s cubic-bezier(.6,.01,.4,1) infinite;
    /* border-bottom: 38px solid rgb(44, 244, 37); */
    /* animation: rotate1 2s linear infinite; */
  }

  @keyframes rotate1 {
    from {
      transform: rotateX(50deg) rotateZ(110deg);
    }
    to {
      transform: rotateX(50deg) rotateZ(470deg);
    }
  }
  
  .item-2 {
    background-color: rgb(121, 68, 228);
    animation: item-2_move 2.8s cubic-bezier(.6,.01,.4,1) infinite;
    top: 0;
    right: 0;
    z-index: 1001;
    /* border-bottom: 38px solid rgb(37, 95, 244); */
    /* animation: rotate2 2s linear infinite; */
  }

  @keyframes rotate2 {
    from {
      transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);
    }
    to {
      transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);
    }
  }
  
  .item-3 {
    bottom: 0;
    right: 0;
    z-index: 1002;
    background-color: rgb(27, 145, 247);
    animation: item-3_move 2.8s cubic-bezier(.6,.01,.4,1) infinite;
    /* border-bottom: 38px solid rgb(255, 221, 0); */
    /* animation: rotate3 2s linear infinite; */
  }

  @keyframes rotate3 {
    from {
      transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);
    }
    to {
      transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);
    }
  }
  
  .item-4 {
    bottom: 0;
    left: 0;
    z-index: 1001;
    background-color: rgb(250, 194, 76);
    animation: item-4_move 2.8s cubic-bezier(.6,.01,.4,1) infinite;
    /* border-bottom: 38px solid rgb(244, 47, 37); */
    /* animation: rotate4 2s linear infinite; */
  }

  @keyframes rotate4 {
    from {
      transform: rotateX(70deg) rotateZ(270deg);
    }
    to {
      transform: rotateX(70deg) rotateZ(630deg);
    }
  }
  
  @keyframes item-1_move {
    0%, 100% {
      transform: translate(0, 0) 
    }
  
    25% {
      transform: translate(0, 150px)
    }
  
    50% {
      transform: translate(150px, 150px) rotate(90deg)
    }
  
    75% {
      transform: translate(150px, 0) rotate(360deg)
    }
  }
  
  @keyframes item-2_move {
    0%, 100% {
      transform: translate(0, 0)
    }
  
    25% {
      transform: translate(-150px, 0)
    }
  
    50% {
      transform: translate(-150px, 150px) rotate(90deg)
    }
  
    75% {
      transform: translate(0, 150px) rotate(360deg)
    }
  }
  
  @keyframes item-3_move {
    0%, 100% {
      transform: translate(0, 0)
    }
  
    25% {
      transform: translate(0, -150px)
    }
  
    50% {
      transform: translate(-150px, -150px) rotate(90deg)
    }
  
    75% {
      transform: translate(-150px, 0) rotate(360deg)
    }
  }
  
  @keyframes item-4_move {
    0%, 100% {
      transform: translate(0, 0)
    }
  
    25% {
      transform: translate(150px, 0)
    }
  
    50% {
      transform: translate(150px, -150px) rotate(90deg)
    }
  
    75% {
      transform: translate(0, -150px) rotate(360deg)
    }
  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    z-index: 1000; 
}

@media (max-width: 768px) and (max-height: 1024px){
  .item {
    width: 90px;
    height: 90px;
  }

}