/* Keep bouncing you magnificent shrimp */

:root {
  --speed-multiplier: 1;
  --w: 136px;
  --h: 136px;
  --duration-y: calc(3.5s * var(--speed-multiplier));
  --duration-x: calc(4.12s * var(--speed-multiplier));
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: lightblue;
  animation:
    colorX calc(var(--duration-x) * 5) step-start infinite,
    colorY calc(var(--duration-y) * 5) step-start infinite;

  --color: calc((var(--color-x) + var(--color-y)) * 36);
  background-color:oklch(0.3 0.15 var(--color));
}
main {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: auto;
}

.shrimp {
  position: absolute;
  width: var(--w);
  height: var(--h);
  animation:
    spin 4s linear infinite,
    x var(--duration-x) linear infinite alternate,
    y var(--duration-y) linear infinite alternate;
  & img {
    height: 144px;
    transform-origin: center;
    transform: translate(-152px, -12px);
    image-rendering: pixelated;
  }
}

@keyframes spin {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(-1turn);
  }
}

@keyframes x {
  from {
    left: 0;
  }
  to {
    left: calc(100% - var(--w));
  }
}

@keyframes y {
  from {
    top: 0;
  }
  to {
    top: calc(100% - var(--h));
  }
}

@keyframes colorX {
  from { --color-x: 5; }
  20% { --color-x: 1; }
  40% { --color-x: 2; }
  60% { --color-x: 3; }
  80% { --color-x: 4; }
  to { --color-x: 5; }
}

@keyframes colorY {
  from { --color-y: 10; }
  20% { --color-y: 6; }
  40% { --color-y: 7; }
  60% { --color-y: 8; }
  80% { --color-y: 9; }
  to { --color-y: 10; }
}
