@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');

body{
  margin:0;
  padding:0;
  background-image:url("bacjk.png");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:fixed;
  font-family:"Nunito", sans-serif;
  overflow-x:hidden;
}

.login-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:60px;
  margin-top:150px;
  flex-wrap:wrap;
}
.logo-pic{
  max-width:400px;
  width:35%;
  position:relative;
  top:-250px; 

}
.form-container{
  position:relative;
  max-width:500px;
  width:40%;
}
.form-pic{
  width:100%;
  display:block;
  border-radius:0;
}

.username-overlay{
  position:absolute;
  top:31%;
  left:6%;
  width:88%;
  height:6%;
  background:transparent;
  border:none;
  outline:none;
  font-family:"Nunito", sans-serif;
  font-size:16px;
  color:#333;
  padding:0 7px;
  z-index:3;
}
.username-overlay.active{
  background:white; 
}

@keyframes fall{
  0%{transform:translateY(-10vh) translateX(0);}
  100%{transform:translateY(110vh) translateX(20px);}
}