:root {
  --container-w: 100;
  --container-h: 100;
  --container-w-px: calc(var(--container-w) * 1vw);
  --container-h-px: calc(var(--container-h) * 1vh);
  --duration-y: 25s;
  /* --aspect: calc(var(--container-w) / var(--container-h));
  --duration-x: calc(var(--duration-y) * var(--aspect)); */
  --duration-x: 23s;
  --window-w: 200px;
  --window-h: 80px;
}

body {
  background: linear-gradient(135deg, #74b9ff 10%, #0984e3 80%);
  background-size: 400% 400%;
}

.container {
  position: relative;
  width: var(--container-w-px);
  height: var(--container-h-px);
  border: 1px solid black;
  margin: auto;
  overflow: hidden;
}

.window.bounce {
  position: absolute;
  width: var(--window-w);
  height: var(--window-h);
  animation:
    x var(--duration-x) linear infinite alternate,
    y var(--duration-y) linear infinite alternate;
}

.highlight {
  animation: randomGradient 2s ease-in-out infinite;
}

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

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

@keyframes randomGradient {
  0% { background-position: 23% 67%; filter: hue-rotate(0deg) brightness(1); }
  25% { background-position: 78% 34%; filter: hue-rotate(5deg) brightness(1.10); }
  50% { background-position: 45% 89%; filter: hue-rotate(-3deg) brightness(0.98); }
  75% { background-position: 16% 76%; filter: hue-rotate(3deg) brightness(1.09); }
  100% { background-position: 23% 67%; filter: hue-rotate(0deg) brightness(1); }
}