body, html{
	height: 100%;
	font-family: sans-serif;
}
body{
	background-color: #004159;
	display: flex;
	align-items: center;
	justify-content: center;
}
form{
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px;
	width: 200px;
	border-radius: 10px;
}
form>*{
	margin: 10px;
}
div{
	position: relative;
}
input{
	background-color: transparent;
	font-size: 16px;
	outline: none;
	transition: border-color 0.3s;
	border: transparent;
    border-bottom: 1px solid black;
    margin-bottom: 1px;
    padding: 10px 0;
}
label{
	position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    padding: 0 5px;
    color: #666;
    pointer-events: none;
    transition: 0.3s ease all;
}
input:focus{
	outline: none;
    border-bottom-width: 2px;
    margin-bottom: 0px;
}
input:focus + label,
input:not(:placeholder-shown) + label {
	top: -10px;
    font-size: 12px;
    color: black;
    transform: translateY(0);
}
p{
	color: red;
	position: absolute;
	margin: 0px;
	font-size: 12px;
}
button{
	text-transform: uppercase;
	border: 1px solid transparent;
	cursor: pointer;
	user-select: none;
	text-align: center;
	border-radius: 10px;
	background-color: #3385A2;
	font-size: 16px;
	padding: 5px 10px;
	color: white;
}