body {
margin:0;
padding:0;
background: url("http://www.sandycreekwv.com/sandycreekbackdrop.jpg");
background-size: fill;
background-position: center;
}

.loginarea{
width: 350px;
height: 470px;
background: #000;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
border-radius: 10px;
opacity: .9;
font-family: Elephant;
}

h1 {
margin: 0;
padding:0 0 20px;
text-align: center;
font-size: 34px;
}

.loginarea p{
margin: 0;
padding: 0:
text-align:;
font-size:;
}

.loginarea input{
width: 100%;
margin-bottom: 20px;
}

.loginarea input[type="text"], input[type="password"] {
border:  none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginarea input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: deepskyblue;
color: #fff;
font-size: 18px;
border-radius: 20px;
opacity: .9;
font-family: elephant;
}

.loginarea input[type="submit"]:hover {
cursor: pointer;
background: lightcoral;
}

.loginarea a{
text-decoration: none;
font-size: 20px;
line-height: 20px;
color: deepskyblue;
}

.loginarea a:hover {
color: lightcoral;
}

.invalid {
align-content: center;
width: fit-content;
height: fit-content;
background: #000;
color: #fff;
top: 15%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
border-radius: 10px;
opacity: .9;
}

.invalid p {
margin: 0;
padding: 0;
border: none;
outline: none;
height: fit-content;
background: deepskyblue;
width: fit-content;
color: #fff;
font-size: 30px;
border-radius: 20px;
opacity: .9;
font-family: elephant;
}