Nested Links not working in Mozilla, IE, and Edge - html

Question

I am having a slight issue with my HTML due to improper nesting. When attempting to click my links in Chrome it properly anchors to a set point. However, in Internet Explorer, Mozilla Firefox, and Edge it does not. In fact it seems as if the link is disabled. How would I go about cleaning up my nesting to fix this issue?
body{
margin: 0;
font-family: 'Raleway', sans-serif;
background: #2e2e2e;
overflow-x: hidden;
}
*{
transition: .3s;
}
#abt{
width: 100%;
height: 100vh;
background-color: cyan;
}
#hero{
height: 50%;
min-height:400px;
width: 100vw;
background: url("imgs/space2.gif");
background-size: 11%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
transition: none;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
-moz-transform: skewY(-3deg);
-o-transform: skewY(-3deg);
transform: skewY(-3deg);
z-index: -1;
}
#hero h3 img{
height: 1em;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
transform: skewY(3deg);
}
#hero h1{
font-size: 3.5em;
color: rgb(245, 251, 255);
margin: 0;
margin-bottom: 1.5vh;
font-weight: 100;
text-shadow: 0 1px 0 #d1d1d1,
0 2px 0 #909090,
0 3px 0 #626161;
margin-left: 5vw;
margin-right: 5vw;
margin-top: 3vh;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-o-transform: skewY(3deg);
transform: skewY(3deg);
}
#hero h3{
font-size: 1.5em;
color: rgb(245, 251, 255);
margin: 0;
font-weight: 100;
text-shadow: 0 1px 0 #d1d1d1,
0 2px 0 #909090,
0 3px 0 #626161;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-o-transform: skewY(3deg);
transform: skewY(3deg);
}
#options{
margin-top: 5vh;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3vh;
margin-top: 3vh;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-o-transform: skewY(3deg);
transform: skewY(3deg);
}
#options button{
color: rgba(78, 78, 78, 0.92);
background: rgb(245, 251, 255);
border: none;
border-radius: 3px;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
font-size: 1.2em;
margin: 5px;
}
<div id="backdrop">
<div id="hero">
<h1>Haca</h1>
<h3>Student</h3>
<div id="options">
About Link
</div>
</div>
<div>
<div id="abt">About Section</div>
</div>
Thanks for your help.

Answer 1

For your z index in your #hero id, you need to change it to something other than -1. I just turned it off and it works. Let me know if that solves it for you. New CSS should look like this:
#hero{
height: 50%;
min-height:400px;
width: 100vw;
background: url("imgs/space2.gif");
background-size: 11%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
transition: none;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
-moz-transform: skewY(-3deg);
-o-transform: skewY(-3deg);
transform: skewY(-3deg);
}