.circles {
  height: 55vmin;
  width: 55vmin;
  position: absolute;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate3D(-50%, -50%, 0); }

.circle {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2.5vmin solid transparent;
  border-radius: 115% 140% 145% 110%/125% 140% 110% 125%;
  mix-blend-mode: screen; }
  .circle:nth-child(1) {
    border-color: #DB4437;
    transform-origin: 50% 50%;
    animation: spin1 5.5s linear infinite; }
  .circle:nth-child(2) {
    border-color: #F4B400;
    transform-origin: 50% 50%;
    animation: spin2 5.5s linear infinite; }
  .circle:nth-child(3) {
    border-color: #4285F4;
    transform-origin: 50% 50%;
    animation: spin3 5.5s linear infinite; }
  .circle:nth-child(4) {
    border-color: #0F9D58;
    transform-origin: 50% 50%;
    animation: spin4 5.5s linear infinite; }

@keyframes spin1 {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

@keyframes spin2 {
  0% {
    transform: rotate(72deg); }
  100% {
    transform: rotate(-288deg); } }

@keyframes spin3 {
  0% {
    transform: rotate(-144deg); }
  100% {
    transform: rotate(216deg); } }

@keyframes spin4 {
  0% {
    transform: rotate(216deg); }
  100% {
    transform: rotate(-144deg); } }

body,
html {
  background-color: black; }

.warning {
  color: white;
  font-family: sans-serif;
  text-align: center;
  display: inline-block;
  padding: 50%;
  width: 80%;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate3D(-50%, -50%, 0); }

@supports (mix-blend-mode: screen) {
  .warning {
    display: none; } }