.loginbox {
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    font-family: 'Poppins', sans-serif;
    background:#4f5dec;
  }
  .a{
    text-decoration:none;
    text-transform:capitalize;
    color:#4f5dec;
    font-size:.8rem;
  }
  .a:hover,a:focus {
    color:#9a9cff;
  }
  .container{
    margin:0;
    padding:0;
  }
  .login-form{
      display: block;
      margin-left: auto;
      margin-right: auto;
    width:430px;
    background:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1rem;
    padding:3rem;
    box-shadow:2px 7px 8px rgba(0,0,0,.3);
    border-radius:3px;
    color:#6b6a68;
    text-align:center;
  }
  .title{
    margin-bottom:1rem;
    color: #4f5dec;
  }
  .input-field {
    width:100%;
    padding:0;
    margin:0;
  }
  .input-field input {
    width:100%;
    background:transparent;
    border:none;
    outline:none;
    color: #7C848C;
    border-bottom:1px solid #4f5dec;
    padding:.6rem;
  }
  .input-field input:focus {
    border-color: #4f5dec;
  }
  
  .input {
    display:flex;
    justify-content:space-between;
    font-size:.9rem;
  }
  input[type="checkbox"]{
    background:transparent;
    padding:1rem;
   
  }
  .terms {
    font-size:.7rem;
    margin-top:1rem;
    padding: 0 3rem;
  }
  .terms strong{
    text-decoration:underline;
    cursor:pointer;
  }
  .btnnn {
    padding:.7rem;
    border:none;
    border-radius:3px;
    font-size:1rem;
    font-weight:bold;
    outline:none;
    cursor:pointer;
    text-transform:capitalize;
    transition:.2s ease-in-out;
    filter:brightness(1);
    margin-top: 30px;
    margin-bottom:30px;
  }
  .login {
    background:#4f5dec;
    color:#fff;
  }
  .create{
    width:100%;
    font-weight:normal;
  }
  .btnnn:hover {
    filter: brightness(.8);
    box-shadow: 2px 5px 8px rgba(0,0,0,.2);
    color: white;
  /*   color:#ccc; */
  }
  .new-user{
    margin-top:1rem;
  }
  .new-user p{
    padding-bottom:.5rem;
    font-size:.8rem;
  }
  
  @media screen and (max-width:500px){
    .login-form{
      width:calc(96% - 1rem);
      margin:1rem;
    }
    .terms{
      padding:0;
    }
  }
  @media screen and (max-width:350px){
    .login-form{
      width:calc(60% - 1rem);
      margin:1rem;
    }
    .terms{
      padding:0;
    }
  }
  
  .center-center{
      display: block;
      margin-left: auto;
      margin-right: auto;
  }