body {
     background: linear-gradient(to right, #5d1589, #f09af5);
     height: 100vh;
     margin: 0;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .container {
     background: rgba(255, 255, 255, 0.5); 
     padding: 2rem;
     border-radius: 10px;
 }
 form {
     background: rgba(255, 255, 255, 0.5); 
     padding: 2rem;
     border-radius: 10px;
 }
 .form-control, .btn {
     background: rgba(255, 255, 255, 0.8); 
 }
 .line {
     border-bottom: 2px solid #5f309b;
     margin-bottom: 18px; 
 }
 .btn-style {
     border: 2px solid #5f309b;
     color: #5f309b;;
 }
 .btn-style:hover{
     background:#5f309b;
     border: 2px solid #5f309b;
 }
 h3{
     font-weight: lighter;
 }
 
/* Responsiveness */
/* Extra Small devices (less than 600px) */
@media only screen and (max-width: 599px) {
    .nameDiv{
        display: flex !important;
        flex-direction: column !important;
    }
    #firstName{
        margin-bottom:10px;
    }
  }
  
  /* Small devices (portrait tablets and large phones, 600px and up) */
  @media only screen and (min-width: 600px) and (max-width: 767px) {
    .nameDiv{
        display: flex !important;
        flex-direction: column !important;
    }
    #firstName{
        margin-bottom:10px;
    }
  }