feat: animate cat pics!!

web/script.js

@@ -1,4 +1,5 @@
 const playBtn = document.getElementById("play-btn");
+const catImg = document.getElementsByClassName("cat")[0];
 
 const CROSSFADE_DURATION_MS = 5000;
 const CROSSFADE_INTERVAL_MS = 20;
@@ -68,6 +69,18 @@ function fadeOut() {
 	}, CROSSFADE_INTERVAL_MS);
 }
 
+function animateCat() {
+	let current = 0;
+	setInterval(() => {
+		if (current === 3) {
+			current = 0;
+		} else {
+			current += 1;
+		}
+		catImg.src = `/images/cat-${current}.png`;
+	}, 500);
+}
+
 playBtn.onclick = () => {
 	if (isPlaying) {
 		pauseAudio();
@@ -75,3 +88,5 @@ playBtn.onclick = () => {
 		playAudio();
 	}
 };
+
+animateCat();

web/style.css

@@ -47,7 +47,12 @@ main {
   display: flex;
   flex-direction: column;
   align-items: start;
-  margin: 4rem;
+  margin: 2rem;
+}
+@media (min-width: 1024px) {
+  main {
+    margin: 4rem;
+  }
 }
 
 .container {
@@ -69,10 +74,15 @@ main {
 .cat {
   position: absolute;
   bottom: 0px;
-  right: 10%;
+  right: 2rem;
   image-rendering: pixelated;
   height: 30px;
 }
+@media (min-width: 1024px) {
+  .cat {
+    right: 4rem;
+  }
+}
 
 .eeping-cat {
   position: absolute;