* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
}

:root {
  --background-color: hsl(220deg, 23%, 95%);
  --accent-color: hsl(189deg, 70%, 42%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: hsl(229deg, 19%, 23%);
    --accent-color: hsl(199deg, 55%, 69%);
  }
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-color: var(--background-color);
}

div {
  width: 50px;
  aspect-ratio: 1;
  --spin-colors: no-repeat radial-gradient(farthest-side, var(--accent-color) 92%, var(--background-color));
  background:
    var(--spin-colors) top,
    var(--spin-colors) left,
    var(--spin-colors) right,
    var(--spin-colors) bottom;
  background-size: 12px 12px;
  animation: spin 1s infinite;
}

@keyframes spin {
  to {
    transform: rotate(.5turn)
  }
}