How can I stop my parallax overlay from interfering with my form and link fields?

I have implemented simple parallax images into my index page of my PHP site. For some reason the login form is misbehaving as a result of the parallax header I have implemented. On that photo there is an image overlay placed by a div which I have named logo. I can be sure it is the culprit because when I comment it out the the form fields and links work. The site is at http://www.mattmacy.com/greenia/ . Please see that the form fields are not working. I have included my css for my 3 images and the logo class. Any help would be greatly appreciated.

<!DOCTYPE html>
<html>
<head>
<title>FORUM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body style="background-color: maroon";>
<div style= "background-color: gold; border-style: solid;">

//This "logo" div stops my form and link fields from working  
<div class="pimg1">
<div class="logo"></div>
</div>

<div style="background-color: gold; border-style: solid;">
<h1>Matt Macy's Forum</h1>

<?php
session_start();
if (!isset($_SESSION['uid'])){
echo "<form action='login_parse.php' method='post'>
Username: <input type='text' name='username' />&nbsp;
Password: <input type='password' name='password' />&nbsp;
<input type='submit' name='submit' value='Log In'/></form>";
echo "You can joing this site with Admin approval <a 
href='register.php' class='Links'>Register</a>";
}else {
    echo "You are logged in as ". $_SESSION['username']. "with a level 
of " . $_SESSION['level']."<a href='logout_parse.php' 
class='Links'>Logout</a>";
}   if (isset($_SESSION['level']) && ($_SESSION['level'] == 'Admin')){
        echo "<a href='authenticate.php' 
class='authenticate'>Authenticate</a>";
        echo "<a href='postAudiowithPayPal.php' 
class='postAudiowithPayPal'>Post audio with PayPal</a>";

}
echo"</div><br>";
//This is my second parallax image that doesn't cause difficulty
echo"<div class='pimg2'><span class='border'></span></div>";

This is from my style.css file. I am not sure if I will need to style my Links class which I have designated for my links.

.pimg1{
background-image:url('pimg1.jpg');
min-height:100%;
height:600px;
}

.pimg2{
background-image:url('pimg2.jpg');
min-height:100%;
height:500px;
}
.pimg3{
background-image:url('pimg3.jpg');
min-height:100%;
height:500px;
}

@media(max-width:568px){
.pimg1, .pimg2, .pimg3{
    background-attachment: scroll;
}
}

.logo{
height: 100%;
width: 100%;
background-image:url('SpiritualAutomaton2.png');
position: center;
background-repeat: no-repeat;
position: absolute;
top:50%;
margin-top:-50px;
margin-left:130px;


}
.Links{
      ?
}

Solution

The problem is your .logo height. Try using the same size as the image you are using as the background. You can see in this image and by placing your mouse over the left-most input and moving to the right that the logo div is blocking the elements below. Another option is to set pointer-events:none; on the .logo element but that's a bit hacky in this case.