Hey guys i need help thanks

i am trying to make it so when u hover on the buttons they are opacity 0.7 and curser pointer but it wont work it wont even work with the a element

my code so far:
style:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Website.com</title>
<style>
body {
  background-color: black;
  font-family: cursive;
  overflow: hidden;
}

.glow {
  text-align: center;
  color: white;
  width: 100%;
  height: 40px;  
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}

.navlinks {
    float: right;
}

.navlinks a{
    padding: 30px;
}

.navlinks a:hover {
    cursor: pointer;
}

button {
    background-color: black;
    border: 2px solid red;
}

button:hover {
    cursor: pointer;
    opacity: 0.7;
}
</style>
</head>

body:

<body>

<main>
    <div class="glow"> <!---->
    </div>
    <span class="navlinks">
        <a href="#">Home</a>
        <a href="#">About</a>
       <a href="#">Contact</a>
       <button>Sign Up</button>
       <button>Create An Account</button>
    </span>
</main>
     

</body>
</html> 

Add a background color to the .glow div and see if that helps you figure out why you can’t click on those links.

ok thanks i will try

ohh thanks so much i must have i must have some how moved the closing div