HTMLify

body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	background-image: url(jhkjh.jpg);
	background-repeat: no-repeat;
	background-size: 1380px  660px;
}

.box{
	width: 300px;
	padding: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	color: white;
	transform: translate(-50%,-50%);
	background: #191919;
	text-align: center;
	border-radius: 14em;
	box-shadow: 5px 5px 50px 50px rgba(252, 5, 5, 0.699);
	animation: animateBg 5s linear infinite;
}

@keyframes animateBg{
	100%{
		filter: hue-rotate(360deg);

	}
}

.box input{
	border: 0;
	background: none;
	display: block;
	margin: 20px auto;
	text-align: center;
	border: 3px solid #0399fd;
	padding: 14px 10px;
	width: 200px;
	outline: none;
	color: white;
	border-radius: 24px;
	transition: 0.25s;
}

.box input[type = "text"]:focus,.box input[type = "password"]:focus{
	width: 280px;
	border-color: #04fb6b;
}

.box input[type = "submit"]{
	border: 0;
	background: none;
	display: block;
	margin: 20px auto;
	text-align: center;
	font-size: 100%;
	border: 3px solid #04fb6b;
	padding: 14px 40px;
	outline: none;
	color: white;
	border-radius: 24px;
	transition: 0.25s;
	cursor: pointer;
}

.box input[type = "submit"]:hover{
	background: #04fb6b;
}