From 2626994bed91324275bc27e85fdbb3feebc67f74 Mon Sep 17 00:00:00 2001
From: Kamil Dzieniszewski <kamil.d@playsmart.io>
Date: Tue, 27 Jan 2026 12:22:32 +0100
Subject: [PATCH] feat: Apply floating animation and adjust vertical
 positioning to the monitor component.

---
 src/components/monitor.tsx | 2 +-
 src/index.css              | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/monitor.tsx b/src/components/monitor.tsx
index 2a646229..2cc77398 100644
--- a/src/components/monitor.tsx
+++ b/src/components/monitor.tsx
@@ -12,7 +12,7 @@ export const Monitor = () => {
 			<img
 				src={monitorImage}
 				alt=""
-				className="relative z-30 hidden w-full md:absolute md:-top-24 md:right-12 md:block md:h-auto md:w-auto"
+				className="relative z-30 hidden w-full md:absolute md:-top-24 md:right-12 md:block md:h-auto md:w-auto md:animate-float"
 			/>
 		</>
 	);
diff --git a/src/index.css b/src/index.css
index cd8d0976..bc19ad54 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 
+/* stylelint-disable-next-line */
 @theme {
   --font-montserrat: 'Montserrat', sans-serif;
 
@@ -15,6 +16,8 @@
   --color-aidevs-white: #F6F6FF;
 
   --color-accent: #EE196E;
+
+  --animate-float: float 3s ease-in-out infinite;
 }
 
 html,
@@ -27,7 +30,7 @@ body {
   background-color: var(--color-black);
 }
 
-/* Floating animation for charity badge */
+/* Floating animation for monitor and charity badge */
 @keyframes float {
   0%, 100% {
     transform: translateY(0px);