Input "submit" inside textarea not clickable in Firefox - html

Question

I have a simple form that allows users to send mails to the site's owner. I wouldn't like to change it totally, because I've got already written PHP script for this, and this solution worked fine before I tried to add some styles to it...
The problem is, "Wyślij >" (submit) inside the textarea does not work ONLY in firefox. I can't click it, like the button is somewhere underneath. In Opera, Chrome, Edge, IE - it works just fine. I'm starting to giving up on this. I would appreciate any help, I don't know what's causing this.
JSFiddle: http://jsfiddle.net/c0vz64m1/
HTML code:
<form method="post" action="kontakt.php" id="contactform" style="margin-left:35vw; margin-top:20px;">
<label for="name">Imię<font color="white">*</font>:</label><br>
<input type="text" name="name" id="name" placeholder=" Twoje imię (wymagane)" required /><br>
<label for="email">Email<font color="white">*</font>:</label><br>
<input type="text" name="email" id="email" placeholder=" Twój email (wymagane)" required />
<div id="text-area">
<label for="message">Wiadomość<font color="white">*</font>:</label><br>
<textarea name="message" rows="9" cols="50" id="message" placeholder=" Twoja wiadomość (wymagane)" equired></textarea>
<input type="submit" name="submit" value="Wyślij »" class="submit-button"/></div>
</form>
CSS:
input#name,input#email {
box-shadow:0px 0px 10px skyblue;
border:2px solid skyblue;
border-radius:7px;
padding-left:5px;
transition:all .2s ease-in-out;
}
input#name:focus,input#email:focus {
box-shadow:0px 0px 20px skyblue;
transition:all .2s ease-in-out;
}
input#name:hover,input#email:hover {
box-shadow:0px 0px 20px skyblue;
}
.submit-button {
width:75px;
height:36px;
margin-left:380px;
display:block;
margin-top:-41px;
border-top:2px solid blue;
z-index:5000;
font-size:14pt;
color:skyblue;
font-family:Andada;
}
textarea {
box-shadow:0px 0px 10px skyblue;
border:2px solid skyblue;
border-radius:10px;
resize:none;
height:150px;
width:375px;
z-index:1;
padding-right:75px;
transition:all .2s ease-in-out;
}
textarea:focus {
box-shadow:0px 0px 20px skyblue;
transition:all .2s ease-in-out;
}
textarea:hover {
box-shadow:0px 0px 20px skyblue;
}

Answer 1

Use absolute positioning to put the button over the textarea and it will work.
Remove from class .submit-button these things:
margin-left:380px;
margin-top:-41px;
and add these:
position:absolute;
right: 0;
bottom: 30px;
Then add position:relative to #text-area .

Answer 2

Please see updated fiddle: http://jsfiddle.net/w86o8hhh/ which adds:
z-index:10;
to the CSS, and:
id="submit"
to the submit button