*,
*::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;
  overflow: hidden;
  background: linear-gradient(90deg, #f9d07d, #cb4558);
}

.container-loader {
  width: 300px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(500px) rotateX(60deg);

  @media (width <= 1111px) {
    zoom: 0.7;
  }

  .aro {
    position: absolute;
    inset: calc(var(--s) * 10px);
    border: 2px solid white;
    background-color: #fff2;
    animation: up_and_down 3s infinite ease-in-out both;
    animation-delay: calc(var(--s) * -0.1s);
  }
}

@keyframes up_and_down {
  0%,
  100% {
    transform: translateZ(-100px);
  }
  50% {
    transform: translateZ(100px);
  }
}