@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rammetto+One&display=swap');

:root {
  font-optical-sizing: auto;
  font-style: normal;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* *, *::after, *::before {
  outline: 1px solid lime;
} */

* {
  font-family: Quicksand, sans-serif;
  box-sizing: border-box;
}

*:focus {
  outline: 1px solid #CE66FF;
}

body {
  margin: 0;
  color: #FFF;
  overflow-x: hidden;
}

.rammetto-one-regular {
  font-family: "Rammetto One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.shake {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@keyframes headShake {
  0% {
    transform: translate(0);
    -webkit-transform: translate(0);
  }

  12.5% {
    transform: translate(-5px) rotateY(-8deg);
    -webkit-transform: translate(-5px) rotateY(-8deg);
  }

  37.5% {
    transform: translate(4px) rotateY(6deg);
    -webkit-transform: translate(4px) rotateY(6deg);
  }

  62.5% {
    transform: translate(-2px) rotateY(-4deg);
    -webkit-transform: translate(-2px) rotateY(-4deg);
  }

  87.5% {
    transform: translate(1px) rotateY(2deg);
    -webkit-transform: translate(1px) rotateY(2deg);
  }

  100% {
    transform: translate(0);
    -webkit-transform: translate(0);
  }
}


@keyframes rainbow {
  0% {
      background-position: 0% 0
  }

  to {
      background-position: 125% 0
  }
}

@keyframes enter {
  0% {
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
  }
}

.loader {
  width: 30px;
  aspect-ratio: 1;
  --_g: no-repeat radial-gradient(circle closest-side,#FFF 90%,#FFF0);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: dots 0.8s infinite linear;
  min-height: 30px;
}
@keyframes dots {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}