/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Sep. 25, 2020, 10:22:37 p.m.
    Author     : anthony
*/
.wait * {
  margin: 0;
  height: 0;
}
html {
  --spinner: gray;
  --center: translate(-50%, -50%);
}
.center {
   position: absolute;
   width: 10px;
   height: 10px;
   background: var(--spinner);
   border-radius: 50%;
   top: 50%;
   left: 50%;
   transform: var(--center); 
}
.outer-spin, .inner-spin {
  position: absolute;
  top: 50%;
  left: 50%;
}
.outer-spin {
  animation: spin 4s linear infinite;
}
.outer-arc, .inner-arc {
  position: absolute;
  border-radius: 50%;
  border: 2px solid;
}
.outer-arc {
  width: 65px;
  height: 65px;
}
.outer-arc_start-a {
  border-color: transparent transparent transparent var(--spinner);
  /*NOTE: the order here very much matters!  */
  transform: var(--center) rotate(65deg); 
}
.outer-arc_end-a {
  border-color: var(--spinner) transparent transparent transparent;
  transform: var(--center) rotate(45deg);
}
.outer-arc_start-b {
  border-color: transparent transparent transparent var(--spinner); 
  transform: var(--center) rotate(65deg) scale(-1, -1);
}
.outer-arc_end-b {
  border-color: var(--spinner) transparent transparent transparent;
  transform: var(--center) rotate(45deg) scale(-1, -1);
}

.outer-moon-a {
   position: absolute;
   top:50%;
   left:50%;
   width: 10px;
   height: 10px;
   background: var(--spinner);
   border-radius: 50%;
   transform: var(--center) translate(32px, 0); 
}
.outer-moon-b {
   position: absolute;
   top:50%;
   left:50%;
   width: 10px;
   height: 10px;
   background: var(--spinner);
   border-radius: 50%;
   transform: var(--center) translate(-32px, 0); 
}
.inner-spin {
  animation: spin 3s linear infinite;
}
.inner-arc {
  width: 42px;
  height: 42px;
}
.inner-arc_start-a {
  border-color: transparent transparent transparent var(--spinner);
/*NOTE: the order here very much matters!  */
  transform: var(--center) rotate(65deg); 
}
.inner-arc_end-a {
  border-color: var(--spinner) transparent transparent transparent;
  transform: var(--center) rotate(45deg);
}
.inner-arc_start-b {
  border-color: transparent transparent transparent var(--spinner); 
  transform: var(--center) rotate(65deg) scale(-1, -1);
}
.inner-arc_end-b {
  border-color: var(--spinner) transparent transparent transparent;
  transform: var(--center) rotate(45deg) scale(-1, -1);
}
.inner-moon-a {
   position: absolute;
   top:50%;
   left:50%;
   width: 8px;
   height: 8px;
   background: var(--spinner);
   border-radius: 50%;
   transform: var(--center) translate(20px, 0); 
}
.inner-moon-b {
   position: absolute;
   top:50%;
   left:50%;
   width: 8px;
   height: 8px;
   background: var(--spinner);
   border-radius: 50%;
   transform: var(--center) translate(-20px, 0); 
}
@keyframes spin { 100% {transform: rotate(360deg); } }

@media screen and (max-width: 500px) {
    html {
       --spinner: blue;
    }
}