.login{
  display:flex;
  align-items: center;
  flex-direction: column;
  padding-top:15vmin;
  background-image:url('../Images/login/bg.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

.login_logo{
  align-self: center;
  width:50vmin;
  margin-top:15vmin;
}

.login_content{
width:80vmin;
display:flex;
flex-direction: column;
align-items: center;
padding:10vmin;
}

.login_input_container{
  position:relative;
  margin:5vmin 0;
  border-bottom: 2px solid grey;
  transition: 0.3s;
}

.login_input{
  border:none;
  padding:2vmin 2vmin 2vmin 12vmin;
  width:100%;
  background: rgba(0,0,0,0);
  color:white;
  transition: 0.3s;
}

.login_input_icon{
  position:absolute;
  top:50%;
  left:2vmin;
  transform:translateY(-50%);
  width:4vmin;
  transition: 0.3s;
}

.input_placeholder{
  position:absolute;
  top:50%;
  left:10vmin;
  transform:translateY(-50%);
  color:grey;
  font-size: 4vmin;
  transition: 0.3s;
  opacity: 0;
}

.login_input:focus{
  background: white;
  color:black;
  outline: none;
}

.login_input:focus + .input_placeholder {
  top:-70%;
  left:0;
  transform:none;
  opacity: 1;
}

.login_input:focus ~ .login_input_icon {
  -webkit-filter:brightness(0);
  filter:brightness(0);
}


.login_content .login_btn{
  background: var(--gradient1);
  border:none;
  width:100%;
  padding:2vmin 2vmin;
  font-size: 4vmin;
  font-weight: bold;
  font-family: 'Roboto Condensed', sans-serif;
  border-radius: 1vmin;
}

.login_input:focus::placeholder {
  opacity: 0;
}

.remember{
  align-self: flex-start;
  display:flex;
  align-items: center;
  margin-bottom: 5vmin;
}

.remember span{
  color:grey;
  font-size: 3vmin;
}

.forgot_pw_btn{
  color:var(--color2);
  margin:5vmin 0 3vmin 0;
  font-size: 4vmin;
}

.register_link{
  width:100%;
  text-align: center;
  background: #14100a;
  font-size: 4vmin;
  padding:3vmin 0;
  color:white;
  text-decoration: none;
}