$yellow: #f2c463;
$size: 300px;

@for $i from 1 through 9 {
  $deg: $i * 20deg;
  @keyframes rotate-#{$i} {
    0% {
      transform: rotate($deg);
    }
    100% {
      transform: rotate($deg + 360deg);
    }
  }
  .ray:nth-child(#{$i}) {
    animation: rotate-#{$i} 30s infinite;
    transform: rotate($deg);
  }
}

.sun {
  position: absolute;
  top: 50vh;
  margin-top: -6rem;
  left: 50vw;
  margin-left: -6rem;
  background: $yellow;
  width: $size/2;
  height: $size/2;
  border-radius: 50%;
  border: 20px solid white;
  z-index: 1;
}
.ray-group {
  position: absolute;
  top: 50vh;
  margin-top: 0rem;
  left: 50vw;
  margin-left: -9.5rem;
  position: absolute;
  width: $size;
  height: $size;
  z-index: -1;
}
.ray {
  width: $size;
  height: 5px;
  background-color: $yellow;
  margin: -5px auto 0 auto;
}
@media (prefers-color-scheme: dark) {
  body {
    background: #191919;
  }
  .sun {
    border: 20px solid #191919;
  }
}