body {
margin: 0;
font-family: sans-serif;
+ font-size: 12pt;
line-height: 150%;
}
input {
- border: 1px solid #999999;
+ border: 1px solid #dbdbdb;
border-radius: 3px;
font-size: 1.0em;
}
background-color: #f5f5f5;
}
-.navbar {
+nav {
border-bottom: 1px solid #ccc;
background-color: #f5f5f5;
+ padding: 10px;
+ padding-left: calc(max(50% - 400px, 0px) + 15px);
+ padding-right: calc(max(50% - 400px, 0px) + 15px);
}
-.navrow {
- max-width: 800px;
- position: relative;
- left: calc(max(-400px,-50%) + 50%);
- margin: 0;
- padding: 10px 15px 10px 15px;
+nav a, nav .link {
+ margin-right: 10px;
}
-.navrow a {
- margin-right: 10px;
+nav img {
+ vertical-align: middle;
}
.page {
height: 16px;
}
-.footer {
+footer {
margin-top: 15px;
border-top: 1px dashed #ccc;
color: #666;
width: 100px;
}
- .navbar img {
+ nav img {
display: none;
}
}
@media screen and (max-width: 600px) {
}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #202124;
+ color: #bdc1c6;
+ }
+
+ a {
+ color: #8ab4f8;
+ }
+
+ nav {
+ background-color: #373e48;
+ border-bottom: 1px solid #666;
+ }
+
+ footer {
+ border-top: 1px dashed #666;
+ color: #999;
+ }
+
+ input {
+ border: 1px solid #666;
+ }
+
+ tr:hover {
+ background-color: #373e48;
+ }
+}