Restyle mobile nav/burger menu

To make it more usable, look nicer, and not
requiring being at the top of the page to access nav.

main.css

@@ -4,11 +4,14 @@ header{position:relative}
 header hr{display:none}
 body{
 max-width:768px;
-padding:0 1rem;
+margin:auto;padding:0 1.24rem;
 font:1.2rem/1.62 sans-serif;color:#444;
 display:-webkit-flex;display:-ms-flexbox;display:flex;
 flex-direction:column}
 main{flex:1 0 auto}
+nav{
+box-sizing:border-box;
+z-index:9}
 nav>a{
 padding:.2rem 0;
 display:block;
@@ -51,7 +54,7 @@ clip:rect(1px,1px,1px,1px);
 height:1px;width:1px;
 padding:2px 8px;overflow:hidden;
 white-space:nowrap;
-background:#FFF}
+background:#FFF;z-index:10}
 .vh:focus{
 clip:auto;overflow:auto;
 height:auto;width:auto}
@@ -67,9 +70,13 @@ tbody tr:nth-child(odd){background:#EEE}
 tbody tr:hover{background:#DDD}
 
 .burger-container{
-position:absolute;height:21px;width:30px;
-cursor:pointer;top:34px;right:10px}
+position:absolute;height:34px;width:36px;
+cursor:pointer;top:25px;right:1.24rem;
+position:fixed;background:#FFF;
+border:2px solid #EEE;border-radius:6px;
+z-index:9}
 #burger-toggle,#burger-toggle~nav{display:none}
+.burger{left:3px;top:7px}
 .burger,.burger::after,.burger::before{
 position:absolute;background:#000;
 height:4px;width:30px;border-radius:2px;content:"";
@@ -90,6 +97,15 @@ transition:transform 300ms cubic-bezier(.4,1,.5,1)}
  .burger-container{display:none}
  #burger-toggle~nav,header hr{display:block}
 }
+@media(min-width:320px) and (max-width:719px){
+ nav{height:100%;
+ width:50%;min-width:250px;
+ position:fixed;
+ top:0;right:1.24rem;
+ padding:85px 1.24rem 1.24rem;
+ background:#FFF;border-left:1px solid #EEE;
+ z-index:8}
+}
 @media(max-width:320px){
  #burger-toggle~nav{display:block}
  .burger-container{display:none}
@@ -99,7 +115,9 @@ transition:transform 300ms cubic-bezier(.4,1,.5,1)}
  body{color:#CCC;background:#101}
  a:link,a:visited{color:#9CF}
  a:hover,a:visited:hover{color:#C34}
- nav>a{border-color:#EEE}
+ nav{background:#101;border-color:#555}
+ nav>a{border-color:#555}
+ .burger-container{border:2px solid #555;background:#555;}
  .burger,.burger::after,.burger::before{background:#EEE}
  h1{color:#FFF}h2{color:#EEE}
  h3,h4,h5,h6{color:#DDD}