<section class="container-fluid login-form">
  <div class="box-container">
    <div class="box-container2">

      <form action="#" class="row align-items-center content px-0 login" id="login">
        <h1 class="main-header px-0 login">Welcome</h1>
        <input placeholder="username" type="text" class="col px-0 login" id="username">
        <input placeholder="password" type="password" class="col px-0 login" id="password">
        <div class="row align-items-center content px-0 login-container login">
          <div class="col px-0 button">
            <a href="#" class="button">Login</a>
            <span class="signup">Need An Account?<a href="#" class="signup-link">Click Here</a></span>
          </div>
        </div>
      </form>
    </div>
  </div>
</section>

<!-- for bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

html{
  height: 100%;
}

body {
  font-family: "Quicksand", sans-serif;
  margin: 5rem 0rem;
  max-width: 100%;
  height: 100%;
  display: flex;
  align-content: center;
  background: linear-gradient(120deg, #ff86c8, #ffa3a5);
}

h1 {
  color: #c387e4;
  padding: 1rem 0rem;
  padding-top:3rem;
  margin-bottom: 0px;
  text-align: left;
  letter-spacing: 3px;
  font-weight: 900;
}

section {
  padding: 0rem 6rem;
  height: 100%;
}

form.login {
  margin: auto;
  width: 40%;
  display: block;
  text-align: left;
}

input {
  border: none;
  border-bottom: #c387e4 solid;
  background: none;
  color: #c387e4;
}

input:focus {
  outline: none;

  color: #c387e4;
}

::selection{
    background-color: #ffa3a5;
}

#username {
  margin-bottom: 1rem;
}

.box-container {
  background-color: #ffeef7;
  border-radius: 15px;
  box-shadow: 12px 12px 12px 1px #d486dc;
  width: 40%;
  height: auto;
  margin: auto;
}

.login-container {
  margin: 0px;
}

a.button {
  border: none;
  border-radius: 0px;
  font-weight: 600;
  font-size: larger;
  color: #c387e4;
  text-decoration: none;
}

a.button:hover {
  color: #d486dc;
}

div.button{
  padding-left: 0px;
  padding-top: 0px;
  margin-bottom: 3rem;
  margin-top: 1rem;
}

span.signup{
  padding-top: 0.5rem;
  display: block;
  font-size:.75rem;
  color:#A6A6A6;
}

a.signup-link{
  text-decoration: none;
  padding-left: 0.5rem;
  color:#c387e4;
}

a.signup-link:hover{
  color: #d486dc;
}

input::placeholder{
  color:#A6A6A6;
}