@charset "UTF-8";
/*! Sassy Spinner Loader | MIT License | (c) Gabriel Rodríguez | https://www.gabrielrf.dev */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter';
}

body {
  padding: 25px;
  background: #fafafa;
}

h1 {
  font-size: 24px;
}
h1:not(:first-of-type) {
  margin-top: 60px;
}

section {
  padding: 20px;
}
section + section {
  margin-top: 30px;
}

article {
  display: inline-block;
}
article h1 {
  font-size: 16px;
  color: #444;
  text-align: center;
}
article + article {
  margin-left: 45px;
}

.spinner-loader {
  --size: 100px;
  --thickness-ratio: 0.125;
  --thickness: calc(var(--size) * var(--thickness-ratio));
  --speed: 1.25;
  --fg-color: #008cff;
  --bg-color: rgba(130, 131, 130, 0.25);
  --position: relative;
  --display: block;
  position: var(--position);
  display: var(--display);
  width: var(--size);
  overflow: hidden;
  margin: 0 auto;
}
.spinner-loader::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.spinner-loader::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: var(--thickness) solid var(--bg-color);
  border-top-color: var(--fg-color);
  animation: spinner-loader-rotation calc(1 / var(--speed) * 1s) linear infinite;
}
@keyframes spinner-loader-rotation {
  to {
    transform: rotate(360deg);
  }
}
.spinner-loader.black {
  --fg-color: #000;
}
.spinner-loader.fast {
  --speed: 2;
}
.spinner-loader.big {
  --size: 200px;
}
.spinner-loader.slim {
  --thickness-ratio: 0.05;
}
.spinner-loader.fixed-thickness {
  --thickness: 20px;
}

.legacy-spinner-loader {
  position: relative;
  display: block;
  width: 100px;
  overflow: hidden;
  margin: 0 auto;
}
.legacy-spinner-loader::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.legacy-spinner-loader::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 12.5px solid rgba(130, 131, 130, 0.25);
  border-top-color: #008cff;
  animation: spinner-loader-rotation 0.8s linear infinite;
}
@keyframes spinner-loader-rotation {
  to {
    transform: rotate(360deg);
  }
}
.legacy-spinner-loader.black::after {
  border-top-color: #000;
}
.legacy-spinner-loader.fast::after {
  animation-duration: 0.5s;
}
.legacy-spinner-loader.big {
  width: 200px;
}
.legacy-spinner-loader.big::after {
  border-width: 25px;
}
.legacy-spinner-loader.fixed-thickness::after {
  border-width: 20px;
}

.legacy-spinner-loader--black {
  position: relative;
  display: block;
  width: 100px;
  overflow: hidden;
  margin: 0 auto;
}
.legacy-spinner-loader--black::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.legacy-spinner-loader--black::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 12.5px solid rgba(130, 131, 130, 0.25);
  border-top-color: #000;
  animation: spinner-loader-rotation 0.8s linear infinite;
}
@keyframes spinner-loader-rotation {
  to {
    transform: rotate(360deg);
  }
}

.legacy-spinner-loader--fast {
  position: relative;
  display: block;
  width: 100px;
  overflow: hidden;
  margin: 0 auto;
}
.legacy-spinner-loader--fast::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.legacy-spinner-loader--fast::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 12.5px solid rgba(130, 131, 130, 0.25);
  border-top-color: #008cff;
  animation: spinner-loader-rotation 0.5s linear infinite;
}
@keyframes spinner-loader-rotation {
  to {
    transform: rotate(360deg);
  }
}

.legacy-spinner-loader--big {
  position: relative;
  display: block;
  width: 200px;
  overflow: hidden;
  margin: 0 auto;
}
.legacy-spinner-loader--big::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.legacy-spinner-loader--big::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 25px solid rgba(130, 131, 130, 0.25);
  border-top-color: #008cff;
  animation: spinner-loader-rotation 0.8s linear infinite;
}
@keyframes spinner-loader-rotation {
  to {
    transform: rotate(360deg);
  }
}

.legacy-spinner-loader--slim {
  position: relative;
  display: block;
  width: 100px;
  overflow: hidden;
  margin: 0 auto;
}
.legacy-spinner-loader--slim::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.legacy-spinner-loader--slim::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 9px solid rgba(130, 131, 130, 0.25);
  border-top-color: #008cff;
  animation: spinner-loader-rotation 0.8s linear infinite;
}
@keyframes spinner-loader-rotation {
  to {
    transform: rotate(360deg);
  }
}

.legacy-spinner-loader--fixed-thickness {
  position: relative;
  display: block;
  width: 100px;
  overflow: hidden;
  margin: 0 auto;
}
.legacy-spinner-loader--fixed-thickness::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.legacy-spinner-loader--fixed-thickness::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 20px solid rgba(130, 131, 130, 0.25);
  border-top-color: #008cff;
  animation: spinner-loader-rotation 0.8s linear infinite;
}
@keyframes spinner-loader-rotation {
  to {
    transform: rotate(360deg);
  }
}