*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
}

a {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

body {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  background: linear-gradient(90deg, #e6589d, #a65fb5);
}

.loader {
  --size: 220px;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  box-shadow: -5px -5px 5px  #0008, 5px 5px 3px #fff2, inset -5px -5px 5px  #0008, inset 5px 5px 5px #fff2, 2px 2px 2px 2px #0002;
  overflow: hidden;

  &:hover {
    &::before {
      filter: saturate(900%) blur(30px);
    }
  }

  .center {
    width: 60%;
    height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inherit;
    border-radius: inherit;
    background-color: #222;
  }


  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      #ffcc2f,
      #62daca,
      #d169d1,
      #9ed478
    );
    border-radius: inherit;
    animation: girar .6s linear infinite forwards;
    z-index: -1;
  }
}

@keyframes girar {
  to  {
    transform: rotate(360deg);
  }
}