body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #111;
}

h1 {
  text-align: center;
  color: #fff;
}

.yin-yang {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  margin: 2em auto;
  box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.15);
  background: -webkit-radial-gradient(50% 25%, 30px circle, black 50%, transparent 50%), -webkit-radial-gradient(50% 75%, 30px circle, white 50%, transparent 50%), -webkit-radial-gradient(50% 25%, 150px circle, white 50%, transparent 50%), -webkit-radial-gradient(50% 75%, 150px circle, black 50%, transparent 50%), -webkit-linear-gradient(0deg, white 50%, black 50%);
  background: radial-gradient(30px circle at 50% 25%, black 50%, transparent 50%), radial-gradient(30px circle at 50% 75%, white 50%, transparent 50%), radial-gradient(150px circle at 50% 25%, white 50%, transparent 50%), radial-gradient(150px circle at 50% 75%, black 50%, transparent 50%), linear-gradient(90deg, white 50%, black 50%);
  -webkit-animation: girar 2s linear infinite;
          animation: girar 2s linear infinite;
}

@-webkit-keyframes girar {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes girar {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
