input:focus{
background-color: #58ACFA;
color: #000000;
font-weight: bold;
}
body {
background-size: 100vw 100vh;
font-family: arial;
background-image: url("img/sea.jpeg");
background-attachment: fixed;
margin:0;
}
form {
width: 400px;
margin:auto;
padding: 10px 20px;
background: rgba(0,0,0,0.4);
box-sizing: border-box;
border-radius: 7px;
}
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
</header>
<form action="">
<h1> Registration Form </h1>
<p> The required fields are with * </p>
<fieldset>
<legend> Contact information </legend>
<label for="firstName">FirstName (*) </label><input type="text" id="firstName" required minlength="3" maxlength="40" >
<label for="lastName">LastName (*) </label><input type="text" id="lastName" required minlength="3" maxlength="40" >
<label for="email">Email (*) </label><input type="email" id="email" size="25" maxlength="100" required pattern="[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*@[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{1,5}">
</fieldset>
<br>
<fieldset>
<legend> Registration information</legend>
<div>
<label for="bday">Birthday</label>
<input type="date" id="bday" >
</div>
<fieldset>
<legend>Sports practice? </legend>
<label>
<input type="radio" name="yes" value="yes"> Yes</label>
<label>
<input type="radio" name="no" value="no"> No </label>
<label>
<input type="radio" name="sometimes" value="sometimes"> Sometimes</label>
</fieldset>