Update static/style.css

static/style.css

@@ -1,89 +1,63 @@
-*{
-  padding: 0%;
-  margin: 0%;
-}
+/* General Styles */
 body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 50vh; 
-  background-color:#001C30;
-         /* Add some margin around the body */
-  }
-  .all {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #001C30; 
+}
+
+.all {
     background-color: #6bb1e0;
-    border-radius: 20px;
-    border: none;
-  }
-  
-  h1 {
-    background-color: #127dc4; /* Scale up slightly on hover */
-    color: #e5e8eb;            /* Dark text color for readability */
-    padding: 40px;             /* Increased padding for better spacing */
-    border-radius: 30px;        /* Rounded corners */
-    margin: 5px;              /* Margin around the heading */
-    text-align: center;        /* Center align text */
-    box-shadow: 0 4px 8px rgba(231, 222, 222, 0.1); /* Subtle shadow for depth */
-  
-    /* Animation for hover effect */
-    transition: transform 0.3s ease-in-out;
-  }
-  
-  h1:hover {
-    transform: scale(1.05);
-    background-color: #020f1a; /* Scale up slightly on hover */
-  }
-  .login {
-    border: none; /* Add a border to the login form */
-    padding: 10px;         /* Add some padding inside the form */
-    border-radius: 3px;    /* Add rounded corners to the form */
-  }
-  
-  .mb-3 {
-    margin-bottom: 1rem;  /* Class for spacing between form elements */
-  }
-  
-  .form-label {
-    display: flex;        /* Make labels appear on separate lines */
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
+    border-radius: 8px;       
+    padding: 20px;
+    width: 550px; /* Increased width */
+    max-width: 90%; /* Ensures it fits on smaller screens */
+    color: #393737;
+}
+
+h1 {
+    text-align: center;
+    color: #001C30;
+    margin-bottom: 15px;
+    font-size: 1.5rem;
+}
+
+/* Form Styles */
+.form-label {
+    display: block;
     margin-bottom: 5px;
-    border: none;
-      /* Add space below labels */
-  }
-  .btn-primary {
+    font-weight: bold;
+}
 
-  background-color: #0c010c; /* Updated background color for button */
-  color: #ffffff;            /* Updated text color to white */
-  padding: 8px 20px;        /* Slightly increased padding for better spacing */
-  border-radius: 5px;        /* Rounded corners */
-  display: inline-block;     /* Changed display to inline-block for better alignment */
-  text-align: center;        /* Center-align text */
-  text-decoration: none;     /* Remove underline by default */
-  font-size: 16px;           /* Adjust font size */
-  cursor: pointer;           /* Cursor style on hover */
-  transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Smooth transition on hover */
+.form-control, select {
+    width: 100%;
+    padding: 8px; /* Reduced padding */
+    margin-bottom: 12px; /* Reduced margin */
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+.btn-primary {
+    background-color: #0c010c;
+    color: #ffffff;
+    padding: 8px 12px; /* Reduced padding */
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
 }
 
 .btn-primary:hover {
-  background-color: #045c91; /* Darker background color on hover */
-  color: #ffffff;
-  transform: scale(1.05);            /* Change text color to white on hover */
+    background-color: #045c91;
 }
-  select {
-    width: 100%;  /* Make select boxes fill full width */
-  }
-  
-  input[type="number"] {
-    width: 50%;  /* Set width for number input fields */
-  }
-  h2 {
-    display: flex;
-    justify-content: center;
-    text-align: center;  /* Center align the prediction result */
-    color: #001C30;       /* Set green color for the prediction */
-  }
-  legend {
-    font-size: 1.5rem;  /* Adjust font size as needed */
-    padding: 5px;        /* Adjust padding for spacing */
-  }      
 
-  
+/* Prediction Result */
+h2 {
+    text-align: center;
+    color: #001C30; 
+    margin-top: 20px;
+}