.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: #fdfcfc;
}

.loader {
  width: 80px;
  aspect-ratio: 1;
  color: #423f3f;
  background: repeating-conic-gradient(from -47deg, #0000 0deg, currentColor 1deg 91deg, #0000 94deg 180deg);
  display: flex;
  animation: l12-0 2s infinite linear;
}

.loader::before,
.loader::after {
  content: "";
  flex: 1;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: l12 1s infinite alternate;
  transform-origin: bottom left;
}

.loader::after {
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
  transform-origin: top right;
}

.logo {
  position: fixed;
  top: 5px;
}

@keyframes l12-0 {
  0%, 49.9% {
    transform: scaleX(1)
  }
  50%, 100% {
    transform: scaleX(-1)
  }
}

@keyframes l12 {
  0%, 20% {
    transform: rotate(0deg)
  }
  80%, 100% {
    transform: rotate(-270deg)
  }
}

#loader.hidden {
  display: none;
}