Trilha da morte (css no fim da tag HTML) nivel hard

<!DOCTYPE html>
<html>
<head>
    <title>Trilha da Morte!</title>
    <script>
        function saiuDaTrilha(){
            alert("Sai fora da trilha Tente Denovo!");
        }
    </script>
<link rel="stylesheet" type="text/css" href="gameestilo.css">
</head>
<body>
<footer id="partida">
<h1>Partida Lets's GO.. Men\Girl</h1>
<h2>O objetivo e chegar na chegada com menor numero de tentativas Boa Sorte!</h2>
<h1>INICIO</h1>
</footer>
<section id="corpo">
<article id="elemento1" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento2" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento3" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento4" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento5" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento6" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento7" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento8" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento9" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento10" onmousemove="saiuDaTrilha()">
</article>
</article>
<article id="elemento11" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento12" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento13" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento14" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento15" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento16" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento17" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento18" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento19" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento20" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento21" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento22" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento23" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento24" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento25" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento26" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento27" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento28" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento29" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento30" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento31" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento32" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento33" onmousemove="saiuDaTrilha()">
</article>
<article id="elemento34" onmousemove="saiuDaTrilha()">
    <h1>Chegada</h1>
</article>

</section>
</body>
</html>
//arquivo css//
@import url('https://fonts.googleapis.com/css?family=Lobster');
* {
padding:0;
margin:0;
vertical-align:baseline;
list-style:none;
border:0
}
body{
    background-color: #000000;
}
footer#partida{
    width: 1000px;
    height: 150px;
    margin: 0 auto;
}
footer#partida h1{
    font-family: 'Lobster', cursive;
    color: red;
    text-align: center;
    text-shadow: 5px 5px 20px #ffffff;
}
footer#partida h2{
    font-family: 'Lobster', cursive;
    color: #ffffff;
    text-align: center;
}
section#corpo{
    width: 1000px;
    height: 800px;
    margin: 0 auto;
    background-color: yellow;
    border: 1px solid #000000;
}
article#elemento1{
    width: 490px;
    height: 60px;
    float: left;
    background: #000000;
}
article#elemento2{
    width: 490px;
    height: 60px;
    float: right;
    background: #000000;
}
article#elemento3{
    width: 300px;
    height: 70px;
    background-color: #000000;
    float: left;
    margin-top: 6px;
}
article#elemento4{
    width: 350px;
    height: 70px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
}
article#elemento5{
    width: 339px;
    height: 70px;
    background-color: #000000;
    margin-left: 306px;
    margin-top: 66px;
}
article#elemento6{
    width:100px;
    height: 70px;
    background-color: #000000;
    float: left;
    margin-top: 6px;
}
article#elemento7{
    width:100px;
    height: 70px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
}
article#elemento8{
    width:786px;
    height: 70px;
    background-color: #000000;
    margin-left: 106px;
    margin-top: 6px;
}
article#elemento9{
    width: 497px;
    height: 70px;
    background-color: #000000;
    float: left;
    margin-top: 6px;
}
article#elemento10{
    width: 497px;
    height: 70px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
}
article#elemento11{
    width: 300px;
    height: 50px;
    background-color: #000000;
    float: left;
    margin-top: 6px;
}
article#elemento12{
    width: 300px;
    height: 50px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
}
article#elemento13{
    width: 387px;
    height: 50px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
    margin-right: 6px;
}
article#elemento14{
    width: 50px;
    height: 50px;
    background-color: #000000;
    float: left;
    margin-top: 6px;
}
article#elemento15{
    width: 50px;
    height: 50px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
}
article#elemento16{
    width: 890px;
    height: 50px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
    margin-right: 6px;
}
article#elemento17{
    width: 497px;
    height: 50px;
    background-color: #000000;
    float: left;
    margin-top: 6px;
}
article#elemento18{
    width: 497px;
    height: 50px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
}
article#elemento19{
    width: 390px;
    height: 50px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
}
article#elemento20{
    width: 300px;
    height: 50px;
    background-color: #000000;
    float: left;
    margin-top: 6px;
}
article#elemento21{
    width: 300px;
    height: 50px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
    margin-right: 6px;
}
article#elemento22{
    width: 450px;
    height: 50px;
    background-color: #000000;
    float: left;
    margin-top: 6px;
}
article#elemento23{
    width: 543px;
    height: 50px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
}
article#elemento24{
    width: 30px;
    height: 50px;
    background-color: #000000;
    float: left;
    margin-top: 6px;
}
article#elemento25{
    width: 190px;
    height: 50px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
}
article#elemento26{
    width: 768px;
    height: 50px;
    background-color: #000000;
    margin-top: 6px;
    margin-right: 6px;
    float: right;
}
article#elemento27{
    width: 497px;
    height: 40px;
    background-color: #000000;
    float: left;
    margin-top: 6px;
}
article#elemento28{
    width: 497px;
    height: 40px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
}
article#elemento29{
    width: 250px;
    height: 40px;
    background-color: #000000;
    float: left;
    margin-top: 6px;
}
article#elemento30{
    width: 250px;
    height: 40px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
}
article#elemento31{
    width: 488px;
    height: 40px;
    background-color: #000000;
    float: right;
    margin-right: 6px;
    margin-top: 6px;
}
article#elemento32{
    width: 490px;
    height: 40px;
    background-color: #000000;
    float: left;
    margin-top: 6px;
}
article#elemento33{
    width: 490px;
    height: 40px;
    background-color: #000000;
    float: right;
    margin-top: 6px;
}
article#elemento34{
    width: 1000px;
    height: 50px;
    float: right;
    background-color: yellow;
}
article#elemento34 h1{
    font-size: 30pt;
    color: red;
    text-align: center;
    font-family: 'Lobster', cursive;
}