:root{
  --secondary-color:linear-gradient(45deg, #5b7cff, #a855f7);
  --btn-color:#222;
}

body{
  background:url('https://i.pinimg.com/736x/b4/ab/72/b4ab7222da63b12c06c8e3ba9290bd0b.jpg')no-repeat center center/ cover fixed;
  color:#fff;
  height:100vh;
}

/* left image area */
.login-image{
  display:flex;
  align-items:center;
  justify-content:center;
}

.login-image img{
  max-width:70%;
}

/* form */
.login-box{
  width:100%;
  max-width:520px;
 
}
.right-side-box{
  background:rgba(0,0,0,0.8);
  border-radius:10px;
}

.form-control{
  background:#1a2238;
  border:none;
  color:#fff;
  padding:18px;
  font-size:16px;
  border-radius:10px;
}

.form-control::placeholder{
  color:#aaa;
}

.login-box h2{
  font-size:33px;
  font-weight:700;
}

/* buttons */
.btn-primary {
  background: var(--secondary-color);
  color: #fff;
  padding: 16px;
  border-radius: 10px;
  font-weight: 600;
  border: none;
  width:100%;
  font-size:18px;
}

.btn-primary:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-3px);
}

.btn-second {
  background: var(--btn-color);
  color: #FFF;
  padding: 10px 20px;
  transition: 0.3s;
  border-radius:8px;
}

.btn-second:hover {
  background: var(--secondary-color);
  color: #FFF;
  transform: translateY(-2px);
}

.social-btn{
  width:70px;
}

.form-check-input{
  background-color:#1a2238;
  border:1px solid #444;
}

.form-check-input:checked{
  background-color:var(--secondary-color);
  border-color:var(--secondary-color);
}
.social-btn i{
  font-size:20px;
}

/* Mobile responsive fix */
@media (max-width: 768px) {

  .login-box{
    padding:30px 10px;
  }
  
  .login-box h2{
    margin-top: 25px;
    font-size:22px;
  }
  
  .form-control{
    padding:10px;
  }
  
  .btn-primary{
    padding:10px;
    font-size:16px;
    
  }
  .remember-text{
    font-size:13px;
  }
  
  .social-btn{
    width:55px;
    height:50px;
  }
  .brand-logo{
    width:150px;
  }
  
  }
/* image */
.login-image {
  animation: float 4s ease-in-out infinite;
}
.brand-logo{
  filter: invert(1);
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }

  100% {
    transform: translateY(0);
  }
}