html, body {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    width: 100%;
    background-color: #3cad7e;
    font-family: 'Arial', sans-serif;
  }
  
body{
	background: skyblue;;
}


.container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:20rem;
	min-height:30rem;
  max-height: 30rem;
	margin:6rem auto;
	position: relative;
  backface-visibility:hidden;
}

form{
    display:flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
	background: rgb(228, 226, 226);
	padding: .1rem 2rem 1rem 2rem;
	transition:transform 1s linear;
     border-radius:30px; 
     height: 250px;

}

.form-heading{
    font-family:Arial;
	text-align:center;
    font-size:30px;
    margin:0 auto;
	margin-bottom:.7rem;
}

h5 {
    text-align: center;
    font-size:1.05rem;
    color:grey;
    margin: 0 auto 1rem auto;
}

.user {
     width: 50px;
    height: 50px;
    margin:0 auto;
    display: block;
    margin-bottom: 10px;
    border-radius: 50%;
}
  
  .input-field {
    margin:  1rem auto;
    position: relative;
    height: 40px;
    width: 100%;
  }

.input-field input{
  position: relative;
 height: 100%;
  width: 80%;
  border: 1px solid silver;
  padding-left: 15px;
  outline: none;
  border-radius: 1.7rem;
  font-size: 19px;
  transition: .4s;
}
input:focus{
  border: 1px solid #1DA1F2;
}

.imgg {
    position: absolute;
    width: 22px;
    height: 22px;
    top:30%;
    left:75%;
}
.i3 {
  position: absolute;
  width: 20px;
  height: 20px;
    font-size: 20px;
    stroke:blue;
    stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
    
   }


.input-field label {
    left: 15px;
    pointer-events: none;
    color: grey;
    font-size: 18px;
    transition: .4s;
    position: absolute;
    top: 50%;
    z-index: 999;
    transform: translateY(-50%);
}

input:focus ~ label,
input:valid ~ label{
  transform: translateY(-47px);
  font-size: 16px;
  color: #1DA1F2;
}



.button:hover .inner{
  left: 0;
}

button{
	display:block;
	width:100%;
	margin:1rem auto;
	padding:.5rem;
	border:5px solid white;
	font-size:1.3rem;
	/*background:linear-gradient(to right,blue,skyblue);
  background:linear-gradient(to right,blue,skyblue); */
	border-radius:40px;
	color:#fff;
	cursor:pointer;
background-color: #fbb034;
background-image: linear-gradient(315deg, #fbb034 0%, #ffdd00 74%);

}

form.signup-form{
    height: 500px;
    backface-visibility:hidden;
    


}

form.login-form{
	position: absolute;

	height:500px;
	
	backface-visibility:hidden;
	transform:rotateY(180deg);
}

.flipped form.signup-form{
	transform:rotateY(180deg);
}

.flipped form.login-form{
	transform:rotateY(0deg);
}