*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}
body
{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
 background: #000;
 
}
.wrapper
{
	position:relative;
	width:400px;
	height:500px;
	background:#000;
	box-shadow: 0 0 50px #0ef;
	border-radius:20px;
	border-style:solid;
	padding:40px;
	overflow:hidden;
}
.wrapper:hover{
	animation: animate 1s linear infinite;
}
/*
body:hover{
	animation: animate 1s linear infinite;
}*/

@keyframes animate{
	100%
	{
		filter: hue-rotate(360deg);
	}
}
.form-wrapper
{
	/*border-style:solid;*/
	display:flex;
	justify-content: center;
	align-items: center;
	width:100%;
	height:100%;
	transition: 1s ease-in-out;
	

}
.wrapper.active .form-wrapper.sign-in{
	transform: translateY(-450px);
}
.wrapper .form-wrapper.sign-up
{
	position: absolute;
	top:450px;
	left:0;

}
.wrapper.active .form-wrapper.sign-up{
	transform: translateY(-450px);
}
h2
{
	font-size: 30px;
	color:white;
	text-align: center;
}
.input-group
{
	/*border-style: solid;*/
	position: relative;
	margin:30px 0 ;
	border-bottom: 2px solid #fff;

}
.input-group label
{
	position: absolute;
	top:50%;
	left:5px;
	transform:translatey(-50%);
	font-size: 16px;
	color:white;
	pointer-events: none;
	transition: -5s;
}
.input-group input
{
width:320px;
height:40px;
font-size: 16px;
color:white;
padding: 0 5px;
background: transparent;
border: none;
outline: none;
}
.input-group input:focus~label,
.input-group input:valid~label{
	top:-5px;
}
.remainder
{
	margin: -5px 0 15px 5px;
	color:#fff;
	font-size: 14px;
}
.remainder label input-group{
	accent-color: #0ef;
}
button
{
	position: relative;
	width: 100%;
	height:40px;
	background: #0ef;
	box-shadow: 0 0 10px #0ef;
	font-size: 16px;
	color:#000;
	font-weight: 500;
	cursor: pointer;
	border-radius:30px;
	outline: none;
	border:none;
}
.signUp-link
{
	font-size: 14px;
	text-align: center;
	margin: 15px 0;
}
.signUp-link p
{
	color: white;

} 

.signUp-link p a
{
	color:#0ef;
	text-decoration: none;
	font-weight: 500;

}
.signUp-link p a :hover
{
	text-decoration: underline;

}
