/* style.css */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.loader {
  width: 50px;
  aspect-ratio: 1;
  color: #dc1818;
  background: radial-gradient(circle at 60% 65%, currentColor 62%, #0000 65%)
      top left,
    radial-gradient(circle at 40% 65%, currentColor 62%, #0000 65%) top right,
    linear-gradient(to bottom left, currentColor 42%, #0000 43%) bottom left,
    linear-gradient(to bottom right, currentColor 42%, #0000 43%) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  position: relative;
}

.loader:after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.4;
  animation: l3 1s infinite;
}

@keyframes l3 {
  to {
    transform: scale(1.8);
    opacity: 0;
  }
}