some more changes in the css

some more changes in the css

Author: himasnhu018

screenshots/himasnhu018.png

@@ -1,8 +1,9 @@
-*{
+* {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  }
+    box-sizing: border-box;
+}
+
 body {
-    
     background-color: #f4f4f9;
     color: #333;
     margin: 0;
@@ -17,23 +18,24 @@ body {
     min-height: 41vh !important;
 }
 
-#result-container{
+#result-container {
     margin-top: 20px;
     height: 400px;
 }
 
-h1 {
+h1, h2 {
     text-align: center;
     color: #333;
-    margin-bottom: 20px;
 }
-h2{
-    text-align: center;
-    color: #333;
+
+h1 {
+    margin-bottom: 20px;
 }
-label{
+
+label {
     font-size: 20px;
 }
+
 .form-group {
     margin-bottom: 15px;
 }
@@ -55,7 +57,7 @@ label{
 .button {
     display: block;
     width: 100%;
-    padding: 10px;
+    padding: 12px;
     background-color: #4CAF50;
     color: white;
     border: none;
@@ -73,11 +75,6 @@ label{
     margin-top: 20px;
 }
 
-.comparison h2 {
-    text-align: center;
-    margin-bottom: 15px;
-}
-
 table {
     width: 100%;
     border-collapse: collapse;
@@ -98,72 +95,107 @@ th {
 tr:nth-child(even) {
     background-color: #f9f9f9;
 }
+
 .dark-mode tr:nth-child(even) {
     background-color: #1a1717;
 }
-.hidden {
-    display: none;
-}
 
 /* Responsive Design */
+@media (max-width: 1024px) {
+    .container {
+        padding: 15px;
+    }
+
+    .button {
+        font-size: 14px;
+        padding: 10px;
+    }
+
+    select, .select {
+        font-size: 16px;
+    }
+
+    #result-container {
+        height: 350px;
+    }
+}
+
 @media (max-width: 768px) {
     .container {
         padding: 10px;
     }
 
     .button {
         font-size: 14px;
+        padding: 8px;
     }
-    
-    #result-container{
+
+    #result-container {
         height: 300px;
     }
+
+    th, td {
+        padding: 8px;
+        font-size: 14px;
+    }
+
+    select, .select {
+        font-size: 14px;
+    }
 }
-select{
-    background: transparent;
-  outline: none;
-  border: none;
-  border: solid 1px gray;
-  padding: 10px;
-  font-size: 20px;
-}
-.dark-mode select{
-    color: white;
-    background-color: black;
+
+@media (max-width: 480px) {
+    h1, h2 {
+        font-size: 22px;
+    }
+
+    label {
+        font-size: 18px;
+    }
+
+    select, .select {
+        font-size: 12px;
+        padding: 8px;
+    }
+
+    .button {
+        font-size: 12px;
+        padding: 6px;
+    }
+
+    th, td {
+        padding: 6px;
+        font-size: 12px;
+    }
+
+    #result-container {
+        height: 250px;
+    }
 }
-#avatarImg1{
+
+/* Avatar Styles */
+#avatarImg1, #avatarImg2 {
     --s: 10px;
     padding: var(--s);
-    border: calc(2*var(--s)) solid #ffffff00;
+    border: calc(2 * var(--s)) solid #ffffff00;
     outline: 1px solid #ffffff;
-    outline-offset: calc(-1*var(--s));
+    outline-offset: calc(-1 * var(--s));
     background: conic-gradient(from 90deg at 1px 1px, #ffffff00 25%, #ffffff 0);
-    /* border-radius: 50%; */
     -webkit-user-drag: none;
-    -moz-user-drag: none;
-    -o-user-drag: none;
-    user-drag: none; 
+    user-drag: none;
     width: 200px;
     height: 200px;
+    margin: 0 auto;
 }
 
-#avatarImg2{
-    --s: 10px;
-    padding: var(--s);
-    border: calc(2*var(--s)) solid #ffffff00;
-    outline: 1px solid #ffffff;
-    outline-offset: calc(-1*var(--s));
-    background: conic-gradient(from 90deg at 1px 1px, #ffffff00 25%, #ffffff 0);
-    /* border-radius: 50%; */
-    -webkit-user-drag: none;
-    -moz-user-drag: none;
-    -o-user-drag: none;
-    user-drag: none; 
-    width: 200px;
-    height: 200px;
+@media (max-width: 768px) {
+    #avatarImg1, #avatarImg2 {
+        width: 150px;
+        height: 150px;
+    }
 }
 
-/* CSS for spinner */
+/* Spinner Styles */
 .spinner {
     border: 4px solid rgba(0, 0, 0, 0.1);
     border-radius: 50%;
@@ -172,26 +204,23 @@ select{
     height: 40px;
     animation: spin 1s linear infinite;
     margin: 10px auto;
-  }
-  
-  @keyframes spin {
+}
+
+@keyframes spin {
     0% {
-      transform: rotate(0deg);
+        transform: rotate(0deg);
     }
     100% {
-      transform: rotate(360deg);
+        transform: rotate(360deg);
     }
-  }
-  
-  .hidden {
-    display: none;
-  }
-  
-  #progressBarContainer {
+}
 
+.hidden {
+    display: none;
+}
 
+/* Progress Bar */
 #progressBarContainer {
-
     position: fixed;
     top: 0;
     left: 0;
@@ -206,6 +235,10 @@ select{
     width: 0%;
     background: white;
     transition: width 0.2s ease;
-
 }
 
+/* Dark Mode */
+.dark-mode select {
+    color: white;
+    background-color: black;
+}

styles/compare.css

@@ -1,44 +1,68 @@
-*{
+* {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
+
+body {
+  background-color: #f4f4f9;
+  color: #333;
+  margin: 0;
+  padding: 0;
+}
+
 .fixed-heading {
-  font-size: 6rem; /* Big heading size */
-  color: #242322; /* Orange color */
-  position: fixed; /* Fixed position */
-  top:30vh;
+  font-size: 6rem; /* Large heading size */
+  color: #242322; /* Dark color for text */
+  position: fixed; /* Keep heading fixed */
+  top: 30vh; /* Adjusted height for better centering */
   text-align: center;
-   animation: fadeIn 3s ease-in-out infinite alternate; 
-  z-index: 5; /* Animation */
+  animation: fadeIn 3s ease-in-out infinite alternate; /* Smooth animation */
+  z-index: 5; /* Ensure visibility */
 }
-.fixed-div{
+
+.fixed-div {
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100vh; /* Full-height to vertically center content */
+  width: 100vw; /* Full-width container */
 }
-/* Animation keyframes */
+
+/* Fade-in animation */
 @keyframes fadeIn {
   0% {
-      opacity: 0;
-      transform: translateY(-20px);
+    opacity: 0;
+    transform: translateY(-20px);
   }
   50% {
-      opacity: 1;
-      transform: translateY(0);
+    opacity: 1;
+    transform: translateY(0);
   }
   100% {
-      opacity: 0;
-      transform: translateY(20px);
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .fixed-heading {
+    font-size: 4rem; /* Responsive font size for tablet */
   }
 }
 
 @media (max-width: 600px) {
   .fixed-heading {
-      font-size: 8vw; /* Smaller font size for smaller screens */
+    font-size: 8vw; /* Adapt font size for small screens */
+    top: 25vh; /* Adjust top for smaller screens */
   }
 }
 
 @media (max-width: 400px) {
   .fixed-heading {
-      font-size: 6vw; /* Even smaller font size for very small screens */
+    font-size: 6vw; /* Further adjustment for very small screens */
+    top: 20vh; /* Adjust top for better centering */
   }
 }