body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: auto;
}

.custom-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-loader {
    width: 50px;
    height: 50px;
    display: grid;
    border:4px solid #0000;
    border-radius: 50%;
    border-color:#E4E4ED #0000;
    animation: s6 1s infinite linear;
  }
  .custom-loader::before,
  .custom-loader::after {    
    content:"";
    grid-area: 1/1;
    margin:2px;
    border:inherit;
    border-radius: 50%;
  }
  .custom-loader::before {
    border-color:#766DF4 #0000;
    animation:inherit; 
    animation-duration: .5s;
    animation-direction: reverse;
  }
  .custom-loader::after {
    margin:8px;
  }
  
  @keyframes s6 { 
    100%{transform: rotate(1turn)}
  }