Add burger styling

main.css

@@ -1,5 +1,7 @@
 html,body { height:100% }
 html { font-size:14px }
+header {position: relative}
+header hr {display:none}
 body {
 margin:.2rem;
 max-width:48rem;
@@ -14,7 +16,7 @@ border-top:1px dotted #000
 nav>a:first-child {border:none}
 
 h1,h2,h3,h4,h5,h6 { line-height:1 }
-header h1 { margin: 1.4rem auto 1.2rem }
+header h1 { margin: 1.4rem auto 1.2rem; margin-right: 60px }
 
 a { text-decoration:none }
 a:link,a:visited { color:#087CA7 }
@@ -48,6 +50,22 @@ tbody th{ background-color: #292929 }
 tr:nth-child(even){ background-color: #FEFEFE }
 tr:hover{ background-color: #DEDEDE }
 
+.burger-container {
+position: absolute;height: 24px;width: 30px;
+cursor: pointer;top: 34px;right: 10px}
+#burger-toggle {display: none}
+.burger,.burger::after,.burger::before {
+position: absolute;background-color: #000;
+height: 4px;width: 30px;border-radius: 2px;content:"";
+transition: transform 300ms cubic-bezier(0.4, 1, 0.5, 1)}
+.burger::before {margin-top: -8px}
+.burger::after {margin-top: 8px}
+#burger-toggle~nav {display:none;}
+#burger-toggle:checked~nav {display:block;}
+#burger-toggle:checked+.burger-container .burger::before{margin-top:0px;transform:rotate(45deg)}
+#burger-toggle:checked+.burger-container .burger::after{margin-top:0px;transform:rotate(-45deg)}
+#burger-toggle:checked+.burger-container .burger{background:rgba(255,255,255,0)}
+
 footer p { margin:0 }
 body {
 display:-webkit-flex;display:-ms-flexbox;display:flex;
@@ -56,18 +74,25 @@ flex-direction:column
 main { flex:1 0 auto }
 
 @media print {body {max-width:none}}
-
 @media (min-width: 600px) {
-body { margin:.2rem auto; }
-nav>a { margin-left:2rem; padding: auto; display: inline; border: none }
-nav>a:first-child { padding:1rem 0; padding-left:0; margin-left:0 }
-ul li{ margin: auto }
+ body { margin:.2rem auto; }
+ nav>a { margin-left:2rem; padding: auto; display: inline; border: none }
+ nav>a:first-child { padding:1rem 0; padding-left:0; margin-left:0 }
+ ul li{ margin: auto }
+ .burger-container {display: none}
+ #burger-toggle~nav {display: block}
+ header hr {display: block}
+}
+@media (max-width:320px) {
+ #burger-toggle~nav{display:block}
+ .burger-container{display:none}
 }
 @media (prefers-color-scheme: dark) {
-body { color:#FFF; background:#191919 }
-a:link,a:visited {color:#9CF}
-a:hover,a:visited:hover {color:#DA4167}
-nav>a { border-color:#FFF }
-.tag {background-color:#FFF;color:#000}
+ body { color:#FFF; background:#191919 }
+ a:link,a:visited {color:#9CF}
+ a:hover,a:visited:hover {color:#DA4167}
+ nav>a { border-color:#FFF }
+ .tag {background-color:#FFF;color:#000}
+ .burger,.burger::after,.burger::before {background:#FFF}
 }