Metti semplicemente il CSS nello style all'interno del codice

codice:
<html>
	<head>
		<title>WiFi</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
		<style>
			body{
			    margin: 0;
			    padding: 0;
			    background: url(https://www.hotelexcelsiorbay.com/hotspot/sfondo.jpg);
			    background-size: cover;
			    background-position: center;
			    font-family: sans-serif;
			}


			.loginbox{
			    width: 300px;
			    height: 380px;
			    background: #fff;
			    color: #000;
			    top: 50%;
			    left: 50%;
			    position: absolute;
			    transform: translate(-50%,-50%);
			    border-radius: 15px;
			    box-sizing: border-box;
			    padding: 70px 30px;
			}


			.avatar{
			    width: 100px;
			    height: 100px;
			    border-radius: 50%;
			    position: absolute;
			    top: -50px;
			    left: calc(50% - 50px);
			}


			h1{
			    margin: 0;
			    padding: 0 0 20px;
			    text-align: center;
			    font-size: 22px;
				color: #00297a;
			}


			h2{
			    margin: 0;
			        text-align: center;
			    font-size: 10px;
			}


			.loginbox input{
			    width: 100%;
			    margin-bottom: 0px;


			}




			.loginbox input[type="submit"]
			{
			    border: none;
			    outline: none;
			    height: 40px;
			    background: #00297a ;
			    color: #fff;
			    font-size: 18px;
			  border-radius: 10px;
			}
		</style>
	</head>
	<body>    
		<div class="loginbox">    
			<img src="https://www.hotelexcelsiorbay.com/hotspot/avatar.png" class="avatar">        
			<h1>Hotel Excelsior Bay<br>Free WiFi<br><br><br><br><br><br><br></h1>        
			<form>        
				<input type="submit" name="" value="Connect">        
			</form>	 
			<h2><a href="https://www.hotelexcelsiorbay.com/privacy-policy/" target="_blank" >Privacy Policy</a></h2>           
		</div>
	</body>
</html>