diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css
index 9420e4f..465c6b0 100644
--- a/frontend/assets/css/tailwind.css
+++ b/frontend/assets/css/tailwind.css
@@ -9,10 +9,12 @@
 @import "./fonts/morabba.css";
 @import "./fonts/yekan-bakh.css";
 
-@theme {
+:root {
     /* CONTAINER */
-
     --app-container-padding: 1rem;
+}
+
+@theme {
 
     /* COLORS */
     --color-slate-50: hsl(210, 40%, 98%);
@@ -120,7 +122,6 @@
     --font-morabba: "Morabba", "sans-serif";
 
     /* BREAKPOINTS */
-    --breakpoint-3xl: 1700px;
     --breakpoint-2xs: 400px;
     --breakpoint-xs: 480px;
     --breakpoint-sm: 640px;
@@ -128,6 +129,7 @@
     --breakpoint-lg: 1024px;
     --breakpoint-xl: 1280px;
     --breakpoint-2xl: 1536px;
+    --breakpoint-3xl: 1700px;
 
     /* ANIMATIONS */
     --animate-marquee: marquee 20s linear infinite;