html {
- box-sizing: border-box;
- font-size: 16px;
+ box-sizing: border-box;
}
*, *:before, *:after {
- box-sizing: inherit;
+ box-sizing: inherit;
}
-body, h1, h2, h3, h4, h5, h6, p, ol, ul {
- margin: 0;
- padding: 0;
+a, .link { color: #2A5DB0; }
+a:link, a:visited, a:active, .link { text-decoration: none; }
+a:hover, .link:hover { text-decoration: underline; }
+
+body {
+ margin: 0;
+ font-family: sans-serif;
+ font-size: 12pt;
+ line-height: 150%;
}
-a:link { text-decoration: none; color: #104e8b; }
-a:visited { text-decoration: none; color: #104e8b; }
-a:active { text-decoration: none; color: #104e8b; }
-a:hover { text-decoration: underline; color: #104e8b; }
+input {
+ border: 1px solid #dbdbdb;
+ border-radius: 3px;
+ font-size: 1.0em;
+}
-.navbar {
- background-color: #f3f2ea;
- padding: 10px;
+input[type=text] {
+ width: 200px;
+}
+
+img {
+ vertical-align: middle;
+}
+
+table {
+ border-collapse: collapse;
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+tr:hover {
+ background-color: #f5f5f5;
+}
+
+nav {
border-bottom: 1px solid #ccc;
- font: 12pt sans-serif;
+ background-color: #f5f5f5;
+ padding: 10px;
+ padding-left: calc(max(50% - 400px, 0px) + 15px);
+ padding-right: calc(max(50% - 400px, 0px) + 15px);
+}
+
+nav a, nav .link {
+ margin-right: 10px;
+}
+
+nav img {
+ vertical-align: middle;
}
.page {
- font-size: 120%;
- margin: 20px;
- width: 800px;
- line-height: 125%;
+ max-width: 800px;
+ position: relative;
+ left: calc(max(-400px,-50%) + 50%);
+ padding: 15px;
+}
+
+.page img {
+ width: 16px;
+ height: 16px;
+}
+
+footer {
+ margin-top: 15px;
+ border-top: 1px dashed #ccc;
+ color: #666;
+ font-size: 10pt;
+}
+
+@media screen and (max-width: 480px) {
+
+ input {
+ font-size: smaller;
+ }
+
+ input[type=text] {
+ width: 100px;
+ }
+
+ 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;
+ }
}