*,
*::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: #6ef195;
  --secondary-color: #00e3fd;
}

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

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

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