Untitled

<!DOCTYPE html>
<html>
<head>
<title> Log In </title>
<style>

@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
	background-color: #bcbcbc;
}

.title {

	text-align: center;
	font-family:'Roboto', sans-serif;
	font-size: 5em;
	font-weight: bold;
	color: #ffffff;
}

.loginContainer {

	width: 400px;
	height: 300px;
	margin: auto;
	padding: 20px;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 1px 1px 15px #666666;
	border: 2px solid black;
   	outline-color: black;
   	border-radius: 20px;
   	font-size: 1.75em;
    font-family:'Roboto', sans-serif;;

}

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=password], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #8080ff;
    color: white;
    padding: 14px 20px;
    margin: 20px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #bcbcbc;
}

</style>
</head>
<body>

<div class="title">
<p>LOGIN</p>
</div>

<div class="loginContainer">
<form action="login.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="checkbox" name="spass" value="spass">Save Details?<br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>