Optimise CSS

Remove unneeded spaces, characters, and elements.
Change to shorthand where feasible. e.g. background-color
to background, and list-style-position to list-style

main.css

@@ -3,85 +3,70 @@ html { font-size:14px }
 header{position:relative}
 header hr{display:none}
 body{
-margin:.2rem;
 max-width:54rem;
-padding:0 .62rem;
+margin:.2rem;padding:0 .62rem;
-font:1.2rem/1.62 sans-serif
+font:1.2rem/1.62 sans-serif;
-}
+display:-webkit-flex;display:-ms-flexbox;display:flex;
+flex-direction:column}
+main{flex:1 0 auto}
 nav>a{
 padding:.2rem 0;
 display:block;
-border-top:1px dotted #000
+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; margin-right: 52px }
+header h1{margin:1.4rem 52px 1.2rem auto}
 
 a{text-decoration:none}
 a:link,a:visited{color:#087CA7}
 a:hover,a:visited:hover{color:#09B2DC}
 
-ul {
+ul{padding-left:0;margin-left:0;list-style:inside}
-padding-left:0; margin-left:0;
+ul li{margin:.35rem}
-list-style-position:inside
-}
-ul li{ margin: 0.35rem }
 li>ul{margin-left:1em}
 
 .tag{
-font-size:.8rem;
+font-size:.8rem;vertical-align:middle;
 padding:.2rem;border-radius:.33rem;
-background-color:#191919;color:#FFF;
+background:#191919;color:#FFF}
-vertical-align:middle
-}
-
 pre{
-background-color: #191919;color: #FFF;
+background:#191919;color:#FFF;
 white-space:pre-wrap;overflow-x:auto;
-padding: 12px; border: 1px solid #FFF;
+padding:12px;border:1px solid #FFF}
-}
+footer p{margin:0}
 
 table{text-align:left;width:100%;border-collapse:collapse}
 td,th{border:1px solid #222;padding:9px 6px}
-th{padding: 12px;color: white}
+th{padding:12px;color:#FFF}
-thead th{ background-color: #191919 }
+thead th{background:#191919}
-tbody th{ background-color: #292929 }
+tbody th{background:#292929}
-tr:nth-child(even){ background-color: #FEFEFE }
+tr:nth-child(even){background:#FEFEFE}
-tr:hover{ background-color: #DEDEDE }
+tr:hover{background:#DEDEDE}
 
 .burger-container{
 position:absolute;height:24px;width:30px;
 cursor:pointer;top:34px;right:10px}
-#burger-toggle {display: none}
+#burger-toggle,#burger-toggle~nav{display:none}
 .burger,.burger::after,.burger::before{
-position: absolute;background-color: #000;
+position:absolute;background:#000;
 height:4px;width:30px;border-radius:2px;content:"";
-transition: transform 300ms cubic-bezier(0.4, 1, 0.5, 1)}
+transition:transform 300ms cubic-bezier(.4,1,.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~nav {display:block;}
+#burger-toggle:checked+.burger-container .burger::before{margin-top:0;transform:rotate(45deg)}
-#burger-toggle:checked+.burger-container .burger::before{margin-top:0px;transform:rotate(45deg)}
+#burger-toggle:checked+.burger-container .burger::after{margin-top:0;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;
-flex-direction:column
-}
-main { flex:1 0 auto }
-
 @media print{body{max-width:none}}
 @media(min-width:720px){
- body { margin:.2rem 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 }
+ nav>a:first-child{padding:1rem 0;margin-left:0}
  ul li{margin:auto}
  .burger-container{display:none}
- #burger-toggle~nav {display: block}
+ #burger-toggle~nav,header hr{display:block}
- header hr {display: block}
 }
 @media(max-width:320px){
  #burger-toggle~nav{display:block}
@@ -93,7 +78,7 @@ main { flex:1 0 auto }
  a:link,a:visited{color:#9CF}
  a:hover,a:visited:hover{color:#DA4167}
  nav>a{border-color:#FFF}
- .tag {background-color:#FFF;color:#000}
+ .tag{background:#FFF;color:#000}
  .burger,.burger::after,.burger::before{background:#FFF}
 }