Improved doctest css.

css/doctest.css

@@ -1,15 +1,47 @@
+:root {
+    --white: rgb(250, 250, 250);
+    --light-gray: rgb(219, 219, 219);
+    --gray: rgb(66, 66, 66);
+    --black: rgb(20, 20, 20);
+    --dark-background: rgb(50, 50, 50);
+
+    --border-radius: 5px;
+}
+
 html {
     padding: 0;
     font-size: 16px;
-    background: white;
-    color: #000;
+    background: var(--white);
+    color: var(--black);
     font-family: 'Open Sans', Arial, sans-serif;
     max-width: 1200px;
     margin: 0 auto;
 }
 
+.dark-mode nav{
+    border-color: var(--white);
+}
+
+nav {
+    margin-top: 50px;
+    min-width: 30%;
+    border-radius: var(--border-radius);
+    display: inline-block;
+    padding: 20px 30px;
+    /* background-color: var(--light-gray); */
+    border: 1px solid var(--black);
+}
+
+nav > h3 {
+    margin: 0;
+}
+
+nav > ol a {
+    font-weight: bold;
+}
+
 html.dark-mode {
-    background: rgb(51, 51, 51);
+    background: var(--dark-background);
     color: #ccc;
 }
 
@@ -22,8 +54,8 @@ html.dark-mode {
     color: white;
 }
 
-.dark-mode a{
-    color: #569CD6;
+a {
+    color: #569cd6;
     font-weight: bold;
 }
 
@@ -31,6 +63,92 @@ html.dark-mode {
     color: white;
 }
 
+.dark-mode button {
+    border: 1px solid rgb(211, 211, 211);
+    color: rgb(211, 211, 211);
+    background: linear-gradient(to top, rgb(53, 53, 53), rgb(73, 73, 73));
+}
+
+button {
+    background-color: var(--white);
+    border: 1px solid var(--gray);
+    color: var(--gray);
+    padding: 10px 20px;
+    border-radius: 5px;
+    transition: transform 0.2s;
+}
+
+label {
+    display: flex;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+}
+
+input[type='checkbox'] {
+    display: none;
+}
+input[type='checkbox'] + .checkbox {
+    position: relative;
+    margin-right: 10px;
+    width: 32px;
+    height: 32px;
+}
+
+.controls {
+    display: flex;
+}
+
+.controls > * {
+    margin-right: 1em;
+}
+
+.dark-mode .checkbox {
+    background-color: var(--gray);
+    border: 1px solid var(--white);
+}
+
+.checkbox {
+    display: inline-block;
+    border-radius: 3px;
+    background-color: var(--white);
+    border: 1px solid var(--black);
+}
+
+.checkbox:after {
+    content: '';
+    position: absolute;
+}
+
+input[type='checkbox']:checked + .checkbox {
+    background-color: rgb(174, 238, 78);
+}
+
+input[type='checkbox']:checked + .checkbox:after {
+    left: 11px;
+    top: 6px;
+    width: 5px;
+    height: 12px;
+    border: solid var(--white);
+    border-width: 0 4px 4px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+button:active {
+    transform: scale(0.98);
+}
+
+button:hover {
+    filter: brightness(0.95);
+}
+
+button:focus {
+    box-shadow: 0 0 3px 1px #569cd6;
+    outline: none;
+}
+
 a {
     text-decoration: none;
 }
@@ -71,7 +189,7 @@ a{
     margin-bottom: 1em;
 }
 
-.doctest-collapsible-toggle {
+.doctest-titlebar {
     display: flex;
     align-items: center;
     color: whitesmoke;