skärmen vid minskning funkar underbart men inte med hela skärmen

body{
	padding: 0;
	margin: 0;


}

.login{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	background-image: linear-gradient(to left, #00334D 0%, #40004D 33%, #00334D 67%, black 100%);
	position: relative;
	top: 200px;
	width: 30%;
	height: 60vh;
	border-radius: 10px;
	padding-top: 30px;
	box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, 
	rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09)
	 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

}

.login:hover{
	transform: scale(1) translateX(-50%);
	left: 50%;
	transition: 0.7s;


}

.login form{
	padding: 20px 0;
	padding-top: 40px;
	


}
.login form:hover{
	




}

.login form h1{
	color: silver;
}

.login form input{
	padding: 5px 10px;
	font-size: 16px;
	padding-left: 10px;
	margin: 10px 0	;
	width: 230px;
}

.login form button{
	padding: 6px 15px;
	border-radius: 0px;
	margin-top: 20px;
	position: relative;
	overflow: hidden;
	color: black;
	font-size: 18px;
}



.login button::after{
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
	transform: scale(0);
	background: black;
	transition: 0.5s;
	transform-origin: left;
	color: black;
	opacity: 0.6;


}

.login button:hover::after{
	transform: scale(1);
	color: black;

	


}




.loginIcon{
	position: absolute;
	bottom: 100px;
	left: 50%;
	transform: translateX(-50%);

}

.loginIcon i{
	transform: scale(2);
	background: white;
	width: 10px;
	padding: 2px 5px;
	margin: 0 20px;
	border-radius: 5px;
}

.loginIcon i:hover{
	transform: rotate(-45deg) scale(2);
	transition: 0.5s;
}

.fa-google, .fa-facebook-f, .fa-github{
	transform: rotate(0deg);
}

.fa-google:hover{
	background-image: linear-gradient(to left, yellow 0%, orange 33%, green 67%, black 100%) ;
	color: yellow;

}
.fa-facebook-f:hover{
	background-image: linear-gradient(to left, white 0%, blue 33%, blue 67%, black 100%) ;
	color: white;

}
.fa-apple:hover{
	background-image: linear-gradient(to left, white 0%, brown 33%, black 67%, black 100%) ;
	color: silver;

}

.toggle{
	position: relative;
}

#eyeIkon{
	position: absolute;
	transform: translateY(18px);
	color: red;



}

#register{
	position: absolute;
	bottom: 20px;
	color: black;
	background: yellow;
	text-decoration: none;
	padding: 5px 20px;
	border-radius: 20px;
	left: 50%;
	transform: translateX(-50%);

}
#register:hover{
	background-image: linear-gradient(to left, #00334D 0%, #40004D 33%, #00334D 67%, black 100%) ;
	color: yellow;
	transition: 0.5s;
	box-shadow: 3px 3px 3px gray;
	
}


@media (min-width: 380px){

	body{
		background: black;
	}

	.login{
		text-align: center;
		background-image: linear-gradient(to left, #00334D 0%, #40004D 33%, #00334D 67%, black 100%) ;
		display: inline-block;
		position: relative;
		left: 50%;
		top: 100px;
		width: 90%;
		height: 60vh;
		transform: translateX(-50%);
		border-radius: 10px;
		padding-top: 30px;

	}

	.login:hover{
		transform: scale(1) translateX(-50%);
		left: 50%;
		transition: 0.7s;
		height: 60vh;


	}

	.loginIcon{
		width: 100%;
		position: absolute;
		bottom: 100px;
		left: 50%;
		transform: translateX(-50%);
		align-items: center;

	}

	.loginIcon i{
		transform: scale(1.5) rotate(-20deg);
		background: white;
		width: 10px;
		padding: 2px 5px;
		margin: 0 20px;
		border-radius: 5px;
		
	}


	.loginIcon i:hover{
		transform: scale(1.5) rotate(-20deg);
		transition: 0.5s;
	}

	.loginIcon .fa-google{
		background-image: linear-gradient(to left, yellow 0%, orange 33%, green 67%, black 100%);


	}

	.loginIcon .fa-facebook-f{
		background-image: linear-gradient(to left, white 0%, blue 33%, blue 67%, black 100%) ;
		color: white;
	}
	.loginIcon .fa-github{
		background-image: linear-gradient(to left, white 0%, brown 33%, black 67%, black 100%) ;
		color: white;
	}


	

	#eyeIkon{
		position: absolute;
		right: 80px;
		transform: translateY(18px);



	}


}