fix: make marquee loop infinitely

src/app/page.css

@@ -217,6 +217,9 @@ h1 {
 	background: var(--pink-accent);
 }
 
+/*
+	marquee stuff at the bottom
+*/
 .marquee {
 	width: 100%;
 	overflow: hidden;
@@ -233,19 +236,23 @@ h1 {
 	background: linear-gradient(to right, transparent, rgba(255, 214, 245, 0.3), transparent);
 }
 
-.marquee span {
-	display: inline-block;
-	padding-left: 100%;
-	animation: marquee 25s linear infinite;
+.marquee-track {
+	display: flex;
+	width: max-content;
+	animation: marquee-loop 10s linear infinite;
 }
 
-@keyframes marquee {
+.marquee-track span {
+	padding-right: 2rem;
+}
+
+@keyframes marquee-loop {
 	0% {
-		transform: translate(0, 0);
+		transform: translate3d(0, 0, 0);
 	}
 
 	100% {
-		transform: translate(-100%, 0);
+		transform: translate3d(-50%, 0, 0);
 	}
 }