From c26412319c04b523f5cae7b515618cab1d62b672 Mon Sep 17 00:00:00 2001
From: sakshipal80 <sakshipal8009@gmail.com>
Date: Fri, 1 Aug 2025 11:07:33 +0530
Subject: [PATCH 1/5] make form elements responsive to prevent overflow on
 mobile

---
 style.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/style.css b/style.css
index 4ada5d8..3f7cc5f 100644
--- a/style.css
+++ b/style.css
@@ -34,6 +34,11 @@ body {
   gap: 1.5rem;
   max-width: 1100px;
   margin: 0 auto;
+
+
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
 .form-section, .preview-section {
@@ -43,6 +48,10 @@ body {
   box-shadow: 0 2px 8px rgba(0,0,0,0.07);
   padding: 1.5rem;
   min-width: 320px;
+
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .form-section {

From da71057f5888b3354ee7537574a06c774b18bd74 Mon Sep 17 00:00:00 2001
From: sakshipal80 <sakshipal8009@gmail.com>
Date: Fri, 1 Aug 2025 11:13:41 +0530
Subject: [PATCH 2/5] recover

---
 style.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/style.css b/style.css
index 3f7cc5f..a568b44 100644
--- a/style.css
+++ b/style.css
@@ -36,9 +36,9 @@ body {
   margin: 0 auto;
 
 
-  width: 100%;
+  /* width: 100%;
   max-width: 100%;
-  overflow-x: hidden;
+  overflow-x: hidden; */
 }
 
 .form-section, .preview-section {
@@ -49,9 +49,9 @@ body {
   padding: 1.5rem;
   min-width: 320px;
 
-  width: 100%;
+  /* width: 100%;
   max-width: 100%;
-  box-sizing: border-box;
+  box-sizing: border-box; */
 }
 
 .form-section {

From 2892b03472007da634c9dd49b2e747d049337f44 Mon Sep 17 00:00:00 2001
From: sakshipal80 <sakshipal8009@gmail.com>
Date: Fri, 1 Aug 2025 11:25:07 +0530
Subject: [PATCH 3/5] media query applies

---
 style.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/style.css b/style.css
index a568b44..9396e2c 100644
--- a/style.css
+++ b/style.css
@@ -408,3 +408,22 @@ margin-top: auto;
 .section {
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
+
+
+
+@media (max-width: 480px) {
+  input,
+  textarea {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    word-break: break-word;
+    overflow-wrap: break-word;
+  }
+
+  .form-section,
+  .preview-section {
+    overflow-x: hidden;
+  }
+}
+

From bda2e06cf8413db33efb42e22193f2cc201d5f37 Mon Sep 17 00:00:00 2001
From: sakshipal80 <sakshipal8009@gmail.com>
Date: Fri, 1 Aug 2025 11:27:02 +0530
Subject: [PATCH 4/5] recover

---
 style.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/style.css b/style.css
index 9396e2c..ea6e967 100644
--- a/style.css
+++ b/style.css
@@ -411,7 +411,7 @@ margin-top: auto;
 
 
 
-@media (max-width: 480px) {
+/* @media (max-width: 480px) {
   input,
   textarea {
     width: 100%;
@@ -425,5 +425,5 @@ margin-top: auto;
   .preview-section {
     overflow-x: hidden;
   }
-}
+} */
 

From 963d01a8b3742912b108e4565363268af9f044c7 Mon Sep 17 00:00:00 2001
From: sakshipal80 <sakshipal8009@gmail.com>
Date: Fri, 1 Aug 2025 16:21:46 +0530
Subject: [PATCH 5/5]  Improve layout responsiveness

---
 index.html |  15 +--
 style.css  | 319 ++++++++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 263 insertions(+), 71 deletions(-)

diff --git a/index.html b/index.html
index 1d0dcfa..bd8b441 100644
--- a/index.html
+++ b/index.html
@@ -240,15 +240,12 @@ <h2>Projects</h2>
           </ul>
         </div>
 
-        
-      </div> <!-- /resume-sections -->
-      <div class="footer-actions no-print">
-          <button class="btn-refresh" onclick="window.location.reload();">🔄 Refresh Resume</button>
-          <br />
-          <button class="btn-autofill" onclick="autofillResume()">✍️ Autofill Resume</button>
-        </div>
-    </div> <!-- /preview-section -->
-  </div> <!-- /main-container -->
+       
+
+  <div class="resume-actions">
+  <button class="btn-refresh" onclick="window.location.reload();">🔄 Refresh Resume</button>
+  <button class="btn-autofill" onclick="autofillResume()">✍️ Autofill Resume</button>
+</div>
 
   <footer>
     <div class="footer-left">
diff --git a/style.css b/style.css
index ea6e967..0bd2d80 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,39 @@
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+.container,
+.main,
+.section,
+.wrapper {
+  max-width: 100%;
+  overflow-x: hidden;
+
+
+}
+
+html, body {
+  width: 100%;
+  overflow-x: hidden;
+}
+
+img, table, pre, code, iframe {
+  max-width: 100%;
+  overflow-x: auto;
+  display: block;
+}
+
+
+
 :root {
   --primary: #2563eb;
   --primary-hover: #1d4ed8;
@@ -24,8 +60,11 @@ body {
   color: var(--text);
   background-color: var(--bg);
   margin: 0;
-  padding: 1rem;
+  
   transition: background-color 0.3s ease, color 0.3s ease;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
 }
 
 .main-container {
@@ -34,24 +73,23 @@ body {
   gap: 1.5rem;
   max-width: 1100px;
   margin: 0 auto;
+  width: 100%;
 
 
-  /* width: 100%;
-  max-width: 100%;
-  overflow-x: hidden; */
 }
 
 .form-section, .preview-section {
-  background-color: var(--input-bg);
-  color: var(--text);
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
-  padding: 1.5rem;
-  min-width: 320px;
 
-  /* width: 100%;
+
+  flex: 1 1 400px; 
+  min-width: 300px; 
+  padding: 1rem;
   max-width: 100%;
-  box-sizing: border-box; */
+  overflow-wrap: break-word;
+  word-break: break-word;
+
+
+  
 }
 
 .form-section {
@@ -77,7 +115,7 @@ label {
 }
 
 input, textarea {
-  width: 90%;
+  /* width: 90%; */
   padding: 0.5rem 0.7rem;
   border: 1px solid var(--border);
   border-radius: 6px;
@@ -86,6 +124,9 @@ input, textarea {
   background-color: var(--input-bg);
   color: var(--text);
   transition: border 0.2s ease;
+   width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 input:focus, textarea:focus {
@@ -237,18 +278,64 @@ ul li::before {
   }
 }
 
+
 .footer-actions {
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.2rem;
+  padding: 2rem 1rem;
+  background: #f9f9f9;
+  color: #333;
+  font-size: 0.95rem;
+  border-top: 1px solid #ddd;
+  margin-top: 2rem;
+}
+
+.footer-actions .footer-buttons {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
   justify-content: center;
-  gap: 16px;
-  padding: 16px;
-  border-top: 1px solid var(--border);
-  background-color: var(--input-bg);
-  position: absolute;
-  bottom: 0;
-  z-index: 100;
 }
 
+.footer-actions button {
+  padding: 12px 24px;
+  font-size: 1rem;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  /* background-color: white;  */
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.footer-actions button:hover {
+  /* background-color: #f0f0f0; */
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.footer-info {
+  text-align: center;
+}
+
+.footer-links {
+  margin-top: 0.5rem;
+}
+
+.footer-links a {
+  margin: 0 0.5rem;
+  text-decoration: none;
+  color: #0073e6;
+  font-weight: 500;
+}
+
+.footer-links a:hover {
+  text-decoration: underline;
+}
+
+
+
+
 .btn-refresh,
 .btn-autofill {
   background-color: var(--bg);
@@ -313,52 +400,73 @@ main {
   flex-direction: column;
 }
 
-/* Responsive Footer */
 
-footer{
-  background: linear-gradient(to bottom right, #007cf0, #00dfd8);
-  color:white;
-  padding:1.5rem 2.5rem;
-  display:flex;
-  flex-direction: row;
-  justify-content:space-between;
-  align-items: center;
-  font-size: 1rem;
-  flex-wrap: wrap;
-   border: 1.3px solid #ccc; 
-  border-radius: 10px; 
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-margin-top: auto;
+
+
+/* Resume action buttons container */
+.resume-actions {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin: 20px 0;
 }
 
-.footer-right a{
-  text-decoration: none;
-  color:white;
+/* Resume action buttons */
+.btn-refresh,
+.btn-autofill {
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 6px;
+  border: none;
+  background-color: #007bff;
+  color: white;
+  transition: background-color 0.3s ease;
 }
 
-.footer-right{
-  display:flex;
-  flex-wrap: wrap;
-  align-items:center;
-  margin-right:2rem;
-  gap:1.2rem;
+.btn-refresh:hover,
+.btn-autofill:hover {
+  background-color: #0056b3;
 }
 
+/* Footer actions styled as normal div */
+.footer-actions {
+  background-color: #f1f1f1;
+  padding: 20px;
+  text-align: center;
+  margin-top: 30px;
+  border-top: 1px solid #ccc;
+}
 
-.footer-right i:hover{
-  color:#1a1a1a;
-  transform:translateY(-2px) scale(1);
+/* Footer links */
+.footer-links {
+  margin-top: 10px;
 }
 
-.footer-right a:hover{
-   color:#1a1a1a;
-   transform:translateY(-2px);
+.footer-links a {
+  margin: 0 10px;
+  text-decoration: none;
+  color: #333;
+  font-weight: bold;
+  transition: color 0.3s ease;
 }
 
-.footer-right a, .footer-right i {
-  transition: all 0.3s ease;
+.footer-links a:hover {
+  color: #007bff;
 }
 
+/* Hide footer area in print mode */
+.no-print {
+  display: block;
+}
+
+@media print {
+  .no-print {
+    display: none;
+  }
+}
+
+
 
 @media(max-width:768px){
   footer{
@@ -411,19 +519,106 @@ margin-top: auto;
 
 
 
-/* @media (max-width: 480px) {
-  input,
-  textarea {
-    width: 100%;
-    max-width: 100%;
+
+
+@media (width<=40rem){
+  #themeToggle{
+    font-size: 20px; 
+  padding: 4px;
+  
+  }
+}
+
+
+
+@media (max-width: 640px) {
+  * {
     box-sizing: border-box;
-    word-break: break-word;
-    overflow-wrap: break-word;
   }
 
-  .form-section,
-  .preview-section {
+  body {
+    font-size: 14.5px;
+    padding: 1rem;
+    margin: 0;
     overflow-x: hidden;
   }
-} */
+
+  .form-section,
+  .preview-section,
+  .main-container {
+    padding: 1rem;
+    margin: 0 auto;
+    gap: 1rem;
+  }
+
+  .header h1 {
+    font-size: 1.3rem;
+    margin-bottom: 0.6rem;
+  }
+
+  .section h2 {
+    font-size: 1rem;
+  }
+
+  .skills-grid {
+    grid-template-columns: 1fr;
+    gap: 0.6rem;
+  }
+
+  footer {
+    padding: 1rem 1.2rem;
+    font-size: 1rem;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.2rem;
+  }
+
+  .footer-right {
+    margin-right: 0;
+    justify-content: center;
+    gap: 1rem;
+  }
+
+  .btn-refresh,
+  .btn-autofill {
+    padding: 12px 20px;
+    font-size: 15px;
+    border-radius: 8px;
+  }
+}
+@media screen and (max-width: 480px) {
+  .footer-actions {
+    padding: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .footer-actions button {
+    font-size: 14px;
+    padding: 8px 16px;
+    margin: 6px 0;
+    width: 80%;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+