.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.75s, visibility 0.75s;
    z-index: 20;
  }
  
  .loader--hidden {
    opacity: 0;
    visibility: hidden;
  }
  
  .loader::after {
    content: "";
    width: 70px;
    height: 70px;
    border: 13px solid #dddddd;
    border-top-color: #7449f5ea;
    border-radius: 50%;
    animation: loading 0.7s ease infinite;
  }
  
  @keyframes loading {
    from {
      transform: rotate(0turn);
    }
    to {
      transform: rotate(1turn);
    }
  }

  @media only screen and (max-width: 1081px) {
    .loader::after {
      width: 60px;
      height: 60px;
      border: 12px solid #dddddd;
      border-top-color: #7449f5ea;
    }
  }
  

  @media only screen and (max-width: 700px) {
    .loader::after {
      width: 54px;
      height: 54px;
      border: 11px solid #dddddd;
      border-top-color: #7449f5ea;
    }
  }

  @media only screen and (max-width: 460px) {
    .loader::after {
      width: 45px;
      height: 45px;
      border: 10px solid #dddddd;
      border-top-color: #7449f5ea;
    }
  }