static/style.css

*{
  padding: 0%;
  margin: 0%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh; 
  background-color:#001C30;
         /* Add some margin around the body */
  }
  .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 */
    margin-bottom: 5px;
    border: none;
      /* Add space below labels */
  }
  .btn-primary {

  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 */
}

.btn-primary:hover {
  background-color: #045c91; /* Darker background color on hover */
  color: #ffffff;
  transform: scale(1.05);            /* Change text color to white on hover */
}
  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 */
  }