Updates to CSS variables

for issue #32

dist/light.css

@@ -30,6 +30,9 @@
 
   --form-placeholder: #949494;
   --form-text: #000000;
+
+  --variable: #39a33c;
+  --highlight: #ffff00;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -56,6 +59,9 @@
 
   --form-placeholder: #a9a9a9;
   --form-text: #ffffff;
+
+  --variable: #d941e2;
+  --highlight: #efdb43;
 }
 }
 
@@ -117,7 +123,15 @@ th {
   font-weight: 600;
 }
 
-blockquote {
+q:before {
+   content: none;
+}
+
+q:after {
+   content: none;
+}
+
+blockquote , q{
   border-left: 4px solid var(--focus);
   margin: 1.5em 0em;
   padding: 0.5em 1em;
@@ -149,6 +163,13 @@ a[href^='sms']::before {
   content: '💬 ';
 }
 
+mark {
+  background-color: var(--highlight);
+  border-radius: 2px;
+  padding: 0px 2px 0px 2px;
+  color: #000000;
+}
+
 button,
 input[type='submit'],
 input[type='button'],
@@ -255,12 +276,12 @@ a:hover {
   text-decoration: underline;
 }
 
-code,
-kbd {
-  background: var(--background);
+code, samp, time {
+  background:  var(--background);
   color: var(--code);
   padding: 2.5px 5px;
   border-radius: 6px;
+  font-size: 1em;
 }
 
 pre > code {
@@ -269,6 +290,20 @@ pre > code {
   overflow-x: auto;
 }
 
+var {
+  color: var(--variable);
+  font-style: normal;
+  font-family: monospace;
+}
+
+kbd {
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--text-main);
+  padding: 2px 4px 2px 4px;
+}
+
 img {
   max-width: 100%;
   height: auto;