style.css

  @import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Josefin+Sans&display=swap');

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      /* Ensure the body takes up the full viewport height */
      margin: 0;
      /* Remove default margin */
      background: #4f5bd5;
      /* Fallback color for older browsers */
      background: -webkit-linear-gradient(to right, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
      /* For Chrome 10-25 and Safari 5.1-6 */
      background: linear-gradient(to right, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);

  }

  #Forms {
      font-family: 'Josefin Sans', sans-serif;
      font-size: large;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 20px 25px rgba(2, 2, 2, 0.2);
      color: black;
      padding: 20px;
      width: 300px;
      height: 300px;
      border-radius: 34px;
      background: white;
  }

  .form-group {
      margin-bottom: 15px;
      /* Adjust the margin as needed for spacing */
  }

  #UserName,
  #Password {
      width: 100%;
      /* Make the input fields take up the full width of the container */
      padding: 10px;
      /* Add some padding for spacing inside the input fields */
      margin: 5px 0;
      /* Add some margin for spacing between the input fields */
      border: 1px solid #ccc;
      /* Add a border */
      border-radius: 10px;
      /* Add rounded corners */
      box-shadow: 7px 5px 2px rgba(2, 2, 2, 0.2);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }



  #UserName:hover,
  #Password:hover {
      transform: scale(1.05);
      /* Adjust the scaling factor as needed */
      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
      /* Adjust shadow properties as needed */
  }

  ::placeholder {
      font-family: 'Josefin Sans', sans-serif;
  }


  label {
      margin-bottom: 5px;
  }

  #btn {
      color: white;
      background: #6228d7;
      /* Fallback color for older browsers */
      background: -webkit-linear-gradient(to right, #f9ce34, #ee2a7b);
      /* For Chrome 10-25 and Safari 5.1-6 */
      background: linear-gradient(to right, #f9ce34, #ee2a7b);
      padding: 10px 20px;
      border-radius: 12px;
      margin-top: 3px;
      font-size: inherit;
      cursor: pointer;
      font-family: 'Josefin Sans', sans-serif;
      transition: transform 0.3s ease, box-shadow 0.3s ease;

  }

  #btn:hover {

      box-shadow: 8px 2px 15px rgba(0, 0, 0, 0.3);
      /* Adjust shadow properties as needed */
  }