*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Open Sans', 'Helvetica Neue';
}

:root {
  --primary-color: oklch(0.91 0.26 282);
  --secondary-color: oklch(1 0.37 220);
}

body {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  overflow: hidden;
  background-image: repeating-conic-gradient(
      from var(--deg) at 0% 0%,
      var(--primary-color) 0 1deg,
      transparent 2deg 3deg
    ),
    repeating-conic-gradient(
      from var(--deg) at 100% 100%,
      var(--secondary-color) 0 1deg,
      transparent 2deg 3deg
    );
  animation: rotar 120s linear infinite alternate both;
}

@keyframes rotar {
  0% {
    --deg: 0deg;
  }
  100% {
    --deg: 360deg;
  }
}

@property --deg {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}