in the following code, the problem i'm having is that the '.sect' elements are rendering 'below' the '.game' elements in regards to z-index... what I am doing wrong?

<!DOCTYPE html>

<html>
<head>
<title>Page Title</title>
<script></script>
<style>
body {}
#main, #yoursite, .nav, #content, .sect, .game{position:absolute;}
#main {width:100%; height:200%; top:150px; left:0px; background:#f48f59; z-index:0;
border-top-left-radius:700px 300px; border-top-right-radius:700px 300px;
box-shadow:-100px -20px 50px #f48f59, 100px -20px 50px #f48f59;}
.nav {font-size:30px; font-family:Tahoma, Geneva; text-decoration:none;
color:white; padding:10px; border-top-left-radius:80px 35px; border-top-right-radius:80px 35px;
border-bottom-left-radius:80px 35px; border-bottom-right-radius:80px 35px;}
#news:hover {text-shadow:1px 1px #f4c259; background:#e0cf72; box-shadow: 2px 2px 2px black inset;}
#games:hover {text-shadow:1px 1px #f4c259; background:#ff6a55; box-shadow: 2px 2px 2px black inset;}
#projects:hover {text-shadow:1px 1px #f4c259; background:#665afa; box-shadow: 2px 2px 2px black inset;}
#contests:hover {text-shadow:1px 1px #f4c259; background:#217405; box-shadow: 2px 2px 2px black inset;}
#yoursite {font-size:35px; left:50%; margin-left:-124px; font-family:Tahoma, Geneva;
text-shadow:1px 1px 1px black, -1px -1px 1px #f48f59;}
#news {left:8%; top:4%; transform: rotate(-20deg);
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari and Chrome */}
#games {left:30%; top:0%; transform: rotate(-5deg);
-ms-transform: rotate(-5deg); /* IE 9 */
-webkit-transform: rotate(-5deg); /* Safari and Chrome */}
#projects {right:30%; top:0%; transform: rotate(5deg);
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);}
#contests {right:8%; top:4%; transform: rotate(20deg);
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);}
#content {top:140px; left:0%; width:100%; height:80%;}
.sect {box-shadow:0px -8px 10px black; z-index:2;}
#sect1 {top:400px; left:100px; width:300px; height:200px;}
#sect2 {top:400px; left:50%; margin-left:-150px; width:300px; height:200px;}
#sect3 {top:400px; right:100px; width:300px; height:200px;}
.game {z-index:1;}
#game1 {top:370px; left:110px; width:280px; height:180px; background:blue;}
#game2 {top:370px; left:50%; margin-left:-140px; width:280px; height:180px; background:blue;}
#game3 {top:370px; right:110px; width:280px; height:180px; background:blue;}
</style>
</head>

<body>
<font id='yoursite'>YOUR WEBSITE</font>
<div id='main'>
<a href='' id='news' class='nav'>NEWS</a>
<a href='' id='games' class='nav'>GAMES</a>
<a href='' id='projects' class='nav'>PROJECTS</a>
<a href='' id='contests' class='nav'>CONTESTS</a>
</div>

<div id='sect1' class='sect'></div>
<div id='sect2' class='sect'></div>
<div id='sect3' class='sect'></div>
<div id='game1' class='game'></div>
<div id='game2' class='game'></div>
<div id='game3' class='game'></div>




</body>
</html>