Correct the selectable area of burger nav

Since negative margin was used that part of the burger icon wasn't
selectable. Changed so no negative margin, which makes it aesthetically
worse, but functionally better.

main.css

@@ -52,18 +52,18 @@ tbody tr:nth-child(odd){background:#EEE}
 tbody tr:hover{background:#DDD}
 
 .burger-container{
-position:absolute;height:24px;width:30px;
+position:absolute;height:21px;width:30px;
 cursor:pointer;top:34px;right:10px}
 #burger-toggle,#burger-toggle~nav{display:none}
 .burger,.burger::after,.burger::before{
 position:absolute;background:#000;
 height:4px;width:30px;border-radius:2px;content:"";
 transition:transform 300ms cubic-bezier(.4,1,.5,1)}
-.burger::before{margin-top:-8px}
-.burger::after{margin-top:8px}
+.burger::before{margin-top:8px}
+.burger::after{margin-top:16px}
 #burger-toggle:checked~nav{display:block}
-#burger-toggle:checked+.burger-container .burger::before{margin-top:0;transform:rotate(45deg)}
-#burger-toggle:checked+.burger-container .burger::after{margin-top:0;transform:rotate(-45deg)}
+#burger-toggle:checked+.burger-container .burger::before{margin-top:8px;transform:rotate(45deg)}
+#burger-toggle:checked+.burger-container .burger::after{margin-top:8px;transform:rotate(-45deg)}
 #burger-toggle:checked+.burger-container .burger{background:rgba(0,0,0,0)}
 
 @media print{body{max-width:none}}