make GPA responsive

Calculators/GPA-Calculator/style.css

@@ -11,13 +11,13 @@ body {
 }
 
 .calculator {
-    background-color: #4e5a68; /* Change to a blue color */
+    background-color: #4e5a68;
     width: 85%;
     padding: 20px;
-    border-radius: 16px; /* Increase border-radius for a smoother neomorphic effect */
-    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7), -10px -10px 20px rgba(255, 255, 255, 0.3); /* Add neomorphic box-shadow */
+    border-radius: 16px;
+    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7), -10px -10px 20px rgba(255, 255, 255, 0.3);
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: space-around;
     gap: 10%;
 }
@@ -38,7 +38,7 @@ td {
     border: 1px solid #00bcd4;
     padding: 8px;
     text-align: left;
-    background-color: #4e5a68; /* Change to a blue color */
+    background-color: #4e5a68;
     color: #fff;
 }
 
@@ -49,7 +49,7 @@ th {
 select {
     width: 100%;
     padding: 8px;
-    background-color: #57697a; /* Change to a darker blue color */
+    background-color: #57697a;
     color: #fff;
     border: 1px solid #00bcd4;
     border-radius: 4px;
@@ -65,10 +65,26 @@ button {
     cursor: pointer;
     font-weight: bold;
     box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5), -3px -3px 8px rgba(255, 255, 255, 0.1);
-    transition: background-color 0.3s ease; /* Add a smooth transition for the background color change */
-
+    transition: background-color 0.3s ease;
 }
 
 button:hover {
-    background-color: #008ba3; /* Change to a darker shade of blue on hover */
+    background-color: #008ba3;
+}
+
+/* Media query for responsiveness */
+@media only screen and (max-width: 768px) {
+    .calculator {
+        width: 90%;
+        gap: 5%;
+    }
+
+    table {
+        font-size: 14px;
+    }
+
+    input, select {
+        width: 100%;
+        font-size: 14px; /* Adjust font size for smaller screens */
+    }
 }