From 4923f4054392b286d4fcaa6e86c8b984116b3d3c Mon Sep 17 00:00:00 2001
From: Aryan Ramesh Jain <138214350+jainaryan04@users.noreply.github.com>
Date: Sat, 26 Oct 2024 22:00:00 +0530
Subject: [PATCH] fixes #325: width for mobile view

---
 src/App.css   | 25 ++++++++++++++++++++-----
 src/index.css | 33 ++++++++++++++++++++++++---------
 2 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/App.css b/src/App.css
index cef1426..eb4a623 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,10 +3,25 @@
 @import 'tailwindcss/utilities';
 
 @keyframes blob {
-  0% { transform: translate(0px, 0px) scale(1); }
-  33% { transform: translate(30px, -50px) scale(1.1); }
-  66% { transform: translate(-20px, 20px) scale(0.9); }
-  100% { transform: translate(0px, 0px) scale(1); }
+  0% {
+    transform: translate(0px, 0px) scale(1);
+  }
+  33% {
+    transform: translate(30px, -50px) scale(1.1);
+  }
+  66% {
+    transform: translate(-20px, 20px) scale(0.9);
+  }
+  100% {
+    transform: translate(0px, 0px) scale(1);
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  * {
+    width: 100vw;
+    box-sizing: border-box;
+  }
 }
 
 .animate-blob {
@@ -125,4 +140,4 @@
 
 .shine-effect:hover::before {
   opacity: 1;
-}
\ No newline at end of file
+}
diff --git a/src/index.css b/src/index.css
index ee7f1e6..4935494 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+@media only screen and (max-width: 768px) {
+  * {
+    width: 100vw;
+    box-sizing: border-box;
+  }
+}
+
 /*body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -16,8 +23,8 @@ body {
   margin: 0;
   padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-  sans-serif;
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -27,7 +34,6 @@ body {
   transition: background 0.5s ease-in-out;
 }
 
-
 /* Enhanced Background */
 .enhanced-bg {
   position: absolute;
@@ -37,13 +43,25 @@ body {
   height: 100%;
   overflow: hidden;
   z-index: 0;
-  background: radial-gradient(circle at center, #1b2735, #12122a, #2a2962, #4b2f6e);
+  background: radial-gradient(
+    circle at center,
+    #1b2735,
+    #12122a,
+    #2a2962,
+    #4b2f6e
+  );
   opacity: 0.95;
 }
 
 /* Light Theme Background */
 body.light-theme .enhanced-bg {
-  background: radial-gradient(circle at center, #f2f6ff, #dde7f0, #bcd0e0, #93b3cc);
+  background: radial-gradient(
+    circle at center,
+    #f2f6ff,
+    #dde7f0,
+    #bcd0e0,
+    #93b3cc
+  );
 }
 
 /* Floating Emojis */
@@ -60,8 +78,6 @@ body.light-theme .enhanced-bg {
   animation: float 10s ease-in-out infinite;
 }
 
-
-
 /* Floating Animation */
 @keyframes float {
   0% {
@@ -101,7 +117,6 @@ body.light-theme #theme-toggle {
   color: #fff;
 }
 
-
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
@@ -122,7 +137,7 @@ code {
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: rgb(95, 19, 166); 
+  background-color: rgb(95, 19, 166);
 }
 
 .glassmorphism {