Change colours of site elements

Make it a little better for the eyes, and add some visual hierarchy.
For both light/dark theme browsers.
Also changed 6 digit Hex codes to similar 3 digit codes for some savings

main.css

@@ -5,22 +5,24 @@ header hr{display:none}
 body{
 max-width:54rem;
 margin:.2rem;padding:0 .62rem;
-font:1.2rem/1.62 sans-serif;
+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>a{
 padding:.2rem 0;
 display:block;
-border-top:1px dotted #000}
+border-top:1px dotted #101}
 nav>a:first-child{border:none}
 
 h1,h2,h3,h4,h5,h6{line-height:1}
 header h1{margin:1.4rem 52px 1.2rem auto}
+h1{color:#000}h2{color:#111}h3{color:#222}
+h4,h5,h6{color:#333}
 
 a{text-decoration:none}
-a:link,a:visited{color:#087CA7}
-a:hover,a:visited:hover{color:#09B2DC}
+a:link,a:visited{color:#07C}
+a:hover,a:visited:hover{color:#1AE}
 
 ul{padding-left:0;margin-left:0;list-style:inside}
 ul li{margin:.35rem}
@@ -29,11 +31,11 @@ li>ul{margin-left:1em}
 .tag{
 font-size:.8rem;vertical-align:middle;
 padding:.2rem;border-radius:.33rem;
-background:#191919;color:#FFF}
+background:#777;color:#FFF}
 pre{
-background:#191919;color:#FFF;
+background:#EEE;padding:12px;
 white-space:pre-wrap;overflow-x:auto;
-padding:12px;border:1px solid #FFF}
+border:1px solid #DDD}
 .page-nav{
 float:right;
 padding:14px;border:1px solid;
@@ -41,12 +43,11 @@ margin:1.4rem;margin-right:auto}
 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:#FFF}
-thead th{background:#191919}
-tbody th{background:#292929}
-tr:nth-child(even){background:#FEFEFE}
-tr:hover{background:#DEDEDE}
+td,th{border:1px solid #CCC;padding:9px 6px}
+th{padding:12px}
+thead tr{background:#FFF}
+tbody tr:nth-child(odd){background:#EEE}
+tbody tr:hover{background:#DDD}
 
 .burger-container{
 position:absolute;height:24px;width:30px;
@@ -61,7 +62,7 @@ transition:transform 300ms cubic-bezier(.4,1,.5,1)}
 #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{background:rgba(255,255,255,0)}
+#burger-toggle:checked+.burger-container .burger{background:rgba(0,0,0,0)}
 
 @media print{body{max-width:none}}
 @media(min-width:720px){
@@ -78,11 +79,17 @@ transition:transform 300ms cubic-bezier(.4,1,.5,1)}
  header h1{margin-right:auto}
 }
 @media(prefers-color-scheme:dark){
- body{color:#FFF;background:#191919}
+ body{color:#CCC;background:#101}
  a:link,a:visited{color:#9CF}
- a:hover,a:visited:hover{color:#DA4167}
- nav>a{border-color:#FFF}
- .tag{background:#FFF;color:#000}
- .burger,.burger::after,.burger::before{background:#FFF}
+ a:hover,a:visited:hover{color:#C34}
+ nav>a{border-color:#EEE}
+ .burger,.burger::after,.burger::before{background:#EEE}
+ h1{color:#FFF}h2{color:#EEE}
+ h3,h4,h5,h6{color:#DDD}
+ td,th{border-color:#444}
+ thead tr{background:#101}
+ tbody tr:nth-child(odd){background:#222}
+ tbody tr:hover{background:#333}
+ pre{background:#333;color:#EEE;border-color:#555}
 }