html, body { 
  min-height: 300px;
}

/*******************************/

body {
  background: #eef;
  color: #8591cc;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
}

a, a:visited, a:hover { color: #4758b1; }

.desc {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
  transform-style: preserve-3d;
  transform: translate(-20px, 0) perspective(340px) rotateX(12deg) translate(-50%, -50%);
}

.tinykud {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -32px 0 0 -36px;
  pointer-events: none;
}

/*******************************/

.tinykud {
  display: block;
  width: 64px;
  height: 72px;
  background: url('./kud_s.png');
  z-index: 2;
  filter: drop-shadow(0 0 1px #0008);
}

.tinykud::before {
  content: '';
  display: block;
  position: absolute;
  width: 64px;
  height: 24px;
  top: 57px;
  background: radial-gradient(#0005 0% 10%, #0000 45% 100%);
  z-index: 1;
}

.tinykud.running-in-a-circle {
  --a: 110;
  --h: calc(var(--a) / 2);
  --sqrt2: 1.4142135623730950488016887242097;
  --r: calc(var(--h) + (var(--a) / var(--sqrt2)));
  --aspect: 0.577;
  --t-rate: 0.2s;
  --t-cycle: 4s;
  --t0: 0.3;
  animation: 
    tinykud-running-in-a-circle-tmx var(--t-cycle) linear   infinite,
    tinykud-running-in-a-circle-bgx var(--t-cycle) steps(8) infinite, 
    tinykud-running-in-a-circle-bgy var(--t-rate)  steps(4) infinite;
  animation-delay: calc(var(--t-cycle) * var(--t0) * -1);
  image-rendering: pixelated;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
}

@keyframes tinykud-running-in-a-circle-bgx { from { background-position-x: -256px; } to { background-position-x: -768px; } }
@keyframes tinykud-running-in-a-circle-bgy { from { background-position-y: -0px;   } to { background-position-y: -288px; } }
@keyframes tinykud-running-in-a-circle-tmx { 
  0%    { transform: translateX(calc(var(--r) * -1px)) translateY(calc(var(--h) * var(--aspect) * +1px)); } 
  12.5% { transform: translateX(calc(var(--r) * -1px)) translateY(calc(var(--h) * var(--aspect) * -1px)); } 
  25%   { transform: translateX(calc(var(--h) * -1px)) translateY(calc(var(--r) * var(--aspect) * -1px)); } 
  37.5% { transform: translateX(calc(var(--h) * +1px)) translateY(calc(var(--r) * var(--aspect) * -1px)); } 
  50%   { transform: translateX(calc(var(--r) * +1px)) translateY(calc(var(--h) * var(--aspect) * -1px)); } 
  62.5% { transform: translateX(calc(var(--r) * +1px)) translateY(calc(var(--h) * var(--aspect) * +1px)); } 
  75%   { transform: translateX(calc(var(--h) * +1px)) translateY(calc(var(--r) * var(--aspect) * +1px)); } 
  87.5% { transform: translateX(calc(var(--h) * -1px)) translateY(calc(var(--r) * var(--aspect) * +1px)); } 
  100%  { transform: translateX(calc(var(--r) * -1px)) translateY(calc(var(--h) * var(--aspect) * +1px)); } 
}