/*[this is where magic is brewed]*/
@-webkit-keyframes circle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes circle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes swing {
  0% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(20deg);
  }
}
@keyframes swing {
  0% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(20deg);
  }
}
@-webkit-keyframes anchorswing {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
@keyframes anchorswing {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
@-webkit-keyframes pulse {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.25;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.25;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes glow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes glow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes breathe {
  0% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}
@keyframes breathe {
  0% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes hue {
  0% {
    fill: #b3ff66;
  }
  55% {
    fill: #b3ff66;
  }
  70% {
    fill: #66b3ff;
  }
  85% {
    fill: #ff66b3;
  }
  99.99% {
    fill: #b3ff66;
  }
}
@keyframes hue {
  0% {
    fill: #b3ff66;
  }
  55% {
    fill: #b3ff66;
  }
  70% {
    fill: #66b3ff;
  }
  85% {
    fill: #ff66b3;
  }
  99.99% {
    fill: #b3ff66;
  }
}
@-webkit-keyframes stroke-hue {
  0% {
    stroke: #b3ff66;
  }
  55% {
    stroke: #b3ff66;
  }
  70% {
    stroke: #66b3ff;
  }
  85% {
    stroke: #ff66b3;
  }
  99.99% {
    stroke: #b3ff66;
  }
}
@keyframes stroke-hue {
  0% {
    stroke: #b3ff66;
  }
  55% {
    stroke: #b3ff66;
  }
  70% {
    stroke: #66b3ff;
  }
  85% {
    stroke: #ff66b3;
  }
  99.99% {
    stroke: #b3ff66;
  }
}
@-webkit-keyframes dust {
  0% {
    opacity: 0;
    transform: scale(0.5) rotateZ(-15deg);
  }
  50% {
    opacity: 0.75;
    transform: scale(0.75) rotateZ(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(15deg);
  }
}
@keyframes dust {
  0% {
    opacity: 0;
    transform: scale(0.5) rotateZ(-15deg);
  }
  50% {
    opacity: 0.75;
    transform: scale(0.75) rotateZ(0deg);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotateZ(15deg);
  }
}
html body {
  position: relative;
  overflow: hidden;
  height: 100vh;
  background: #0d0d0d;
}
/* 
html body .frame {
  position: absolute;
  height: 95vmin;
  width: 95vmin;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
} */

html body .frame svg {
  position: absolute;
  height: 125%;
  width: 125%;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  /*[animations]*/
}
html body .frame svg .primary-fill {
  fill: #b3ff66;
}
html body .frame svg .primary-stroke-a {
  fill: none;
  stroke: #b3ff66;
  stroke-width: 1;
}
html body .frame svg .primary-stroke-b {
  fill: none;
  stroke: #b3ff66;
  stroke-width: 3;
}
html body .frame svg .hour-hand {
  fill: #ad551f;
}
html body .frame svg .minute-hand {
  fill: #ddc23c;
}
html body .frame svg .second-hand {
  fill: #99e052;
}
html body .frame svg .skeleton-frame {
  fill: url(#face_frame_skeleton_1_);
}
html body .frame svg .gear-front {
  fill: #59981b;
}
html body .frame svg .gear-back {
  fill: #33570f;
}
html body .frame svg .backdrop-disk {
  fill: #050902;
}
html body .frame svg .backdrop-glow-gradient {
  fill: url(#backdrop_glow_gradient);
}
html body .frame svg .st11 {
  fill: none;
}
html body .frame svg .st1 {
  fill: none;
  stroke: #1A1A1A;
  stroke-width: 6;
  stroke-linecap: round;
}
html body .frame svg .st2 {
  fill: none;
  stroke: #1A1A1A;
  stroke-width: 4.75;
  stroke-linecap: round;
}
html body .frame svg .st3 {
  fill: none;
  stroke: #1A1A1A;
  stroke-width: 3.5;
  stroke-linecap: round;
}
html body .frame svg .st4 {
  fill: none;
  stroke: #1A1A1A;
  stroke-width: 2.25;
  stroke-linecap: round;
}
html body .frame svg .st5 {
  fill: none;
  stroke: #1A1A1A;
  stroke-linecap: round;
}
html body .frame svg .st6 {
  fill: url(#SVGID_1_);
}
html body .frame svg .st8 {
  fill: url(#SVGID_2_);
}
html body .frame svg .st9 {
  fill: #181818;
}
html body .frame svg .st10 {
  fill: url(#SVGID_3_);
}
html body .frame svg .st14 {
  fill: url(#SVGID_4_);
}
html body .frame svg .st15 {
  fill: url(#SVGID_5_);
  stroke: url(#SVGID_6_);
  stroke-width: 2;
}
html body .frame svg .st16 {
  fill: #0D0D0D;
  stroke: url(#SVGID_7_);
}
html body .frame svg .st17 {
  fill: #282828;
  stroke: url(#SVGID_8_);
  stroke-width: 2;
}
html body .frame svg .st18 {
  fill: #282828;
  stroke: url(#SVGID_9_);
  stroke-width: 2;
}
html body .frame svg .st19 {
  fill: #282828;
  stroke: url(#SVGID_10_);
  stroke-width: 2;
}
html body .frame svg .st20 {
  fill: #282828;
  stroke: url(#SVGID_11_);
  stroke-width: 2;
}
html body .frame svg .st21 {
  fill: #282828;
  stroke: url(#SVGID_12_);
  stroke-width: 2;
}
html body .frame svg .st22 {
  fill: #282828;
  stroke: url(#SVGID_13_);
  stroke-width: 2;
}
html body .frame svg .st23 {
  fill: #282828;
  stroke: url(#SVGID_14_);
  stroke-width: 2;
}
html body .frame svg .st24 {
  fill: #282828;
  stroke: url(#SVGID_15_);
  stroke-width: 2;
}
html body .frame svg .st25 {
  fill: #282828;
  stroke: url(#SVGID_16_);
  stroke-width: 2;
}
html body .frame svg .st26 {
  fill: #282828;
  stroke: url(#SVGID_17_);
  stroke-width: 2;
}
html body .frame svg .st27 {
  fill: #282828;
  stroke: url(#SVGID_18_);
  stroke-width: 2;
}
html body .frame svg .st28 {
  fill: #282828;
  stroke: url(#SVGID_19_);
  stroke-width: 2;
}
html body .frame svg .st29 {
  fill: url(#SVGID_20_);
  stroke: url(#SVGID_21_);
  stroke-width: 2;
}
html body .frame svg .st30 {
  fill: #0D0D0D;
  stroke: url(#SVGID_22_);
}
html body .frame svg .st31 {
  fill: url(#SVGID_23_);
  stroke: url(#SVGID_24_);
  stroke-width: 2;
}
html body .frame svg .st32 {
  fill: #0D0D0D;
  stroke: url(#SVGID_25_);
}
html body .frame svg .st34 {
  fill: url(#SVGID_26_);
  stroke: url(#SVGID_27_);
  stroke-width: 2;
}
html body .frame svg .st35 {
  fill: #0D0D0D;
  stroke: url(#SVGID_28_);
}
html body .frame svg .st36 {
  fill: url(#SVGID_29_);
  stroke: url(#SVGID_30_);
  stroke-width: 2;
}
html body .frame svg .st37 {
  fill: #0D0D0D;
  stroke: url(#SVGID_31_);
}
html body .frame svg .st38 {
  fill: url(#SVGID_32_);
  stroke: url(#SVGID_33_);
  stroke-width: 2;
}
html body .frame svg .st39 {
  fill: #0D0D0D;
  stroke: url(#SVGID_34_);
}
html body .frame svg .st40 {
  fill: url(#SVGID_35_);
  stroke: url(#SVGID_36_);
  stroke-width: 2;
}
html body .frame svg .st41 {
  fill: #0D0D0D;
  stroke: url(#SVGID_37_);
}
html body .frame svg .st42 {
  fill: url(#SVGID_38_);
}
html body .frame svg .st45 {
  fill: url(#SVGID_39_);
}
html body .frame svg .st46 {
  fill: url(#SVGID_40_);
}
html body .frame svg .st47 {
  fill: url(#SVGID_41_);
}
html body .frame svg .st48 {
  fill: url(#SVGID_42_);
}
html body .frame svg .st49 {
  fill: url(#SVGID_43_);
}
html body .frame svg .st50 {
  fill: url(#SVGID_44_);
}
html body .frame svg .st51 {
  fill: url(#SVGID_45_);
}
html body .frame svg .st52 {
  fill: url(#SVGID_46_);
}
html body .frame svg .st53 {
  fill: url(#SVGID_47_);
}
html body .frame svg .st54 {
  fill: url(#SVGID_48_);
}
html body .frame svg .st55 {
  fill: url(#SVGID_49_);
}
html body .frame svg .st60 {
  fill: url(#SVGID_50_);
  stroke: url(#SVGID_51_);
  stroke-width: 2;
}
html body .frame svg .st61 {
  fill: #0D0D0D;
  stroke: url(#SVGID_52_);
}
html body .frame svg #hands,
html body .frame svg #hands g {
  transform-origin: 657.5px 657.5px;
}
html body .frame svg #knobs {
  -webkit-animation: breathe 5s linear infinite;
          animation: breathe 5s linear infinite;
}
html body .frame svg #knobs [class^=primary-stroke] {
  -webkit-animation: stroke-hue 15s linear infinite;
          animation: stroke-hue 15s linear infinite;
}
html body .frame svg #face_marks g {
  -webkit-animation: breathe 5s linear infinite;
          animation: breathe 5s linear infinite;
}
html body .frame svg #face_marks .primary-fill {
  -webkit-animation: hue 15s linear infinite;
          animation: hue 15s linear infinite;
}
html body .frame svg #back_marks {
  -webkit-animation: breathe 10s linear infinite;
          animation: breathe 10s linear infinite;
}
html body .frame svg #second_hand {
  -webkit-animation: circle 60s steps(360) infinite;
          animation: circle 60s steps(360) infinite;
}
html body .frame svg #minute_hand {
  -webkit-animation: circle 3600s steps(360) infinite;
          animation: circle 3600s steps(360) infinite;
}
html body .frame svg #hour_hand {
  -webkit-animation: circle 216000s steps(360) infinite;
          animation: circle 216000s steps(360) infinite;
}
html body .frame svg #pendilum {
  transform-origin: 657.5px 275px;
  -webkit-animation: swing 1s cubic-bezier(0.75, 0, 0.25, 1) alternate infinite;
          animation: swing 1s cubic-bezier(0.75, 0, 0.25, 1) alternate infinite;
}
html body .frame svg #gear_anchor {
  transform-origin: 657.5px 275px;
  -webkit-animation: anchorswing 1s cubic-bezier(0.75, 0, 0.25, 1) alternate infinite;
          animation: anchorswing 1s cubic-bezier(0.75, 0, 0.25, 1) alternate infinite;
}
html body .frame svg #gear_click {
  transform-origin: 657.5px 657.5px;
  animation: circle 30s steps(30) reverse infinite;
}
html body .frame svg #backdrop_disk {
  transform-origin: 657.5px 657.5px;
  -webkit-animation: circle 300s linear infinite;
          animation: circle 300s linear infinite;
}
html body .frame svg #ticks {
  -webkit-animation: pulse 1s linear infinite;
          animation: pulse 1s linear infinite;
}
html body .frame svg #ticks [id^=minute] {
  -webkit-animation: hue 15s linear infinite;
          animation: hue 15s linear infinite;
}
html body .frame svg #gear_front_ten_mark {
  transform-origin: 292px 447px;
  -webkit-animation: circle 10s steps(90) infinite;
          animation: circle 10s steps(90) infinite;
}
html body .frame svg #gear_front_two {
  transform-origin: 657.5px 657.5px;
  -webkit-animation: circle 60s linear infinite;
          animation: circle 60s linear infinite;
}
html body .frame svg #gear_front_small,
html body .frame svg #gear_six {
  transform-origin: 768px 732px;
  animation: circle 36s linear reverse infinite;
}
html body .frame svg #gear_one {
  transform-origin: 657.5px 657.5px;
  -webkit-animation: circle 30s linear infinite;
          animation: circle 30s linear infinite;
}
html body .frame svg #gear_two {
  transform-origin: 532.7px 585.5px;
  -webkit-animation: circle 5s steps(90) infinite;
          animation: circle 5s steps(90) infinite;
}
html body .frame svg #gear_three {
  transform-origin: 954.8px 955.5px;
  -webkit-animation: circle 7.5s linear infinite;
          animation: circle 7.5s linear infinite;
}
html body .frame svg #gear_four {
  transform-origin: 986px 629px;
  -webkit-animation: circle 7.5s linear infinite;
          animation: circle 7.5s linear infinite;
}
html body .frame svg #gear_five {
  transform-origin: 359px 955px;
  -webkit-animation: circle 15s linear infinite;
          animation: circle 15s linear infinite;
}
html body .frame svg #gear_seven {
  transform-origin: 359px 358px;
  animation: circle 7.5s steps(90) reverse infinite;
}
html body .frame svg #gear_eight {
  transform-origin: 533px 585.5px;
  -webkit-animation: circle 15s steps(90) infinite;
          animation: circle 15s steps(90) infinite;
}
html body .frame svg #gear_nine {
  transform-origin: 874px 444.5px;
  -webkit-animation: circle 10s steps(90) infinite;
          animation: circle 10s steps(90) infinite;
}
html body .frame svg #gear_ten {
  transform-origin: 328px 616.5px;
  -webkit-animation: circle 10s steps(90) infinite;
          animation: circle 10s steps(90) infinite;
}
html body .frame svg #gear_eleven {
  transform-origin: 533px 585.5px;
  animation: circle 10s steps(90) reverse infinite;
}
html body .frame svg #backdrop_glow {
  -webkit-animation: glow 15s linear infinite;
          animation: glow 15s linear infinite;
}
html body .frame svg [id$=nib] {
  -webkit-animation: hue 15s linear infinite;
          animation: hue 15s linear infinite;
}
html body .dust {
  z-index: 1;
  position: absolute;
  width: 120vmin;
  height: 120vmin;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
html body .dust .specs {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(2px 2px at 10% 10%, #b3ff66, rgba(179, 255, 102, 0)), radial-gradient(2px 2px at 20% 30%, #b366ff, rgba(179, 102, 255, 0)), radial-gradient(2px 2px at 40% 70%, #b3ff66, rgba(179, 255, 102, 0)), radial-gradient(2px 2px at 50% 60%, #b366ff, rgba(179, 102, 255, 0)), radial-gradient(2px 2px at 80% 40%, #b3ff66, rgba(179, 255, 102, 0)), radial-gradient(2px 2px at 90% 60%, #b366ff, rgba(179, 102, 255, 0)), radial-gradient(2px 2px at 75% 80%, #b3ff66, rgba(179, 255, 102, 0)), radial-gradient(2px 2px at 90% 80%, #b366ff, rgba(179, 102, 255, 0));
  background-repeat: repeat;
  background-size: 100px 100px;
  opacity: 0;
  -webkit-animation: dust 3s linear infinite;
          animation: dust 3s linear infinite;
}
html body .dust .specs:nth-child(1) {
  background-position: 50% 50%;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
html body .dust .specs:nth-child(2) {
  background-position: 20% 60%;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  animation-direction: reverse;
}
html body .dust .specs:nth-child(3) {
  background-position: -20% -30%;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
html body .dust .specs:nth-child(4) {
  background-position: 40% -80%;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  animation-direction: reverse;
}
html body .dust .specs:nth-child(5) {
  background-position: -20% 30%;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
html body .frame {
    position: relative;
    height: 50vmin;
    width: 50vmin;
    /* top: 50%; */
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin-top: 33vmin;
}