body{
    background: #212529;
    --background-color: #212529;
    overflow:hidden;
  }
  .spinner-container{
    --spinner-outer-mag:175px;
    --spinner-primary-color:#2eccd1;
    height:100vh;
    
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .preloader{
    position:relative;
    height:var(--spinner-outer-mag);
    width:var(--spinner-outer-mag);
  }
  
  .spinner-outer-circle, .spinner-level-2-dashes, .spinner-level-3-reverse, .spinner-level-5{
    position:absolute;
    border-radius:50%;
  }
  
  .spinner-outer-circle{
    height: var(--spinner-outer-mag);
    width: var(--spinner-outer-mag);
  
    border: 1px solid var(--spinner-primary-color);
    border-top: 5px solid var(--spinner-primary-color);
  
    box-shadow: 0px 0px 8px var(--spinner-primary-color);
  
    animation: rotate-forward 1.5s linear infinite;
  }
  @keyframes rotate-forward{
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
    }
  
  .spinner-level-2-dashes{
    --level-2-mag: calc(var(--spinner-outer-mag) / (250/15));
    top: calc(var(--level-2-mag) / 2);
    left: calc(var(--level-2-mag) / 2);
    height: calc(var(--spinner-outer-mag) - var(--level-2-mag));
    width: calc(var(--spinner-outer-mag) - var(--level-2-mag));
    
    border: 1px dashed transparent;
    border-top: 4px dashed var(--spinner-primary-color);
    /* background-image: linear-gradient(to right, var(--spinner-primary-color), var(--background-color)  2 25% ); */
    /* background-image: linear-gradient(red, yellow); */
  
    box-shadow: 0px 0px 8px var(--spinner-primary-color);
  
    animation: rotate-forward 1s linear infinite;
  
  }
  .spinner-level-3-reverse{
    --level-3-mag: calc(var(--spinner-outer-mag) / (250/40));
    top: calc(var(--level-3-mag) / 2);
    left: calc(var(--level-3-mag) / 2);
    height: calc(var(--spinner-outer-mag) - var(--level-3-mag));
    width: calc(var(--spinner-outer-mag) - var(--level-3-mag));
    
    border: 2px solid var(--background-color);
    border-top: 1px solid var(--spinner-primary-color);
    border-bottom: 1px solid var(--spinner-primary-color);
  
    animation: rotate-backward 2s linear infinite;
  }
  
  .spinner-level-5{
    --level-5-mag: calc(var(--spinner-outer-mag) / (250/100));
    top: calc(var(--level-5-mag) / 2);
    left: calc(var(--level-5-mag) / 2);
    height: calc(var(--spinner-outer-mag) - var(--level-5-mag));
    width: calc(var(--spinner-outer-mag) - var(--level-5-mag));
  
    border: 2px solid var(--spinner-primary-color);  
  }
  
  @keyframes rotate-backward{
    0% {transform: rotate(360deg);}
    100% {transform: rotate(0deg);}
    }