/*margin around, padding inside*/
/*top right bottom left*/
/*id >> class*/
/*id - 1 - #name*/
/*class - many - .name*/
/*101 forces scrollbars*/

html {height:101%;
}

body {font-family:sans-serif; background-color:#DDD; margin:0 auto;
}

main {margin-left:auto; margin-right:auto; background-color:#fafafa; max-width:720px; word-break: break-all;
}

/*headerimg { } */

header {padding:16px 12px 16px 12px; background-color:#36a4f7;
}

nav {margin:0 24px 0 12px; padding:24px 0 12px 0; white-space:nowrap; overflow:hidden; display: flex; justify-content: space-between;
}

section {margin:6px 24px 6px 12px; padding:12px 12px 6px 0px;
}

input[type=search] {margin:0px 0px 0px 18px; /*float:right;*/ box-sizing:border-box; min-width:5%; max-width: 30%; background-color:#fe7c00; border-radius:5px; flex: 1; justify-content: right;
}

input[type=text] {min-width: 120px; width: 45%; margin: 8px 0px 0px 0px; box-sizing: border-box; border-radius:5px; background-color: #EEE;
}

input[type=date] {min-width: 120px; width: 45%; margin: 8px 0px 0px 0px; box-sizing: border-box; border-radius:5px; background-color: #EEE;
}

.nav-text {justify-content: left; align-items: center;
}

.content {margin:0 24px 0 12px; padding:16px 12px 0 0; border-top-style:solid; border-width:thin; word-break: break-all;
}

.contentfeature {margin:0 24px 0 12px; padding:16px 12px 0 0; border-top-style:solid; border-width:thin; word-break: break-all;
}

.archive-form {margin:0px 12px 0px 12px; padding:12px 12px 16px 0px; border-top-style:solid; border-width:thin;
}

.entry {font-family: monospace; margin:0 24px 0 12px; padding:24px 12px 0 0; 
}

.entry-keywords {color: #555;
}

.entry-title {font-weight: bold; font-size:0.9em; font-family:sans-serif;
}

.entry-timestamp {color: #555; font-size:0.9em;
}

.entry-ext-url, .entry-int-url { word-break: break-all;
}

.external-link {color: #F00; text-decoration: none;
}

.internal-link {color: #0F0; text-decoration: none;
}

.external-link:hover, .internal-link:hover {text-decoration: underline;
}

::placeholder {color:#000; opacity:1;
}

button {text-align:center; border-radius:5px; cursor: pointer; background-color: #EEE; color: #333;
}

footer {margin:12px; padding:12px; text-align:center; font-size:0.8em; font-family:monospace; border-top-style:solid; border-width:thin;
}

h1 {font-size:1.2em; font-weight:700; hyphens:auto; /* overflow-wrap:break-all; word-wrap:break-all; */
}

h2 {font-size:1.2em; font-weight:600; hyphens:auto; /* overflow-wrap:break-all; word-wrap:break-all; */
}

h3 {font-size:1.1em; font-weight:600; hyphens:auto; /* overflow-wrap:break-all; word-wrap:break-all; */
}

h4 {font-size:1.1em; font-weight:500; hyphens:auto; /* overflow-wrap:break-all; word-wrap:break-all; */
}

p {margin-top:6px;
}

kbd {border:solid 1px #DDD; border-radius:5px; margin:2px 3px 2px 3px; padding:0; background-color:#DDD;
}

blockquote {background-color:#DDD; padding-left:3px; padding-right:20px; margin:3px 0 3px 0;
}

pre {white-space:pre; white-space:pre-wrap; background-color:#DDD; hyphens:auto; /* overflow-wrap:break-all; word-wrap:break-all; */
}

code {width:100%; margin:3px 0 3px 0; padding:3px; font-family:monospace;
}

table {font-family:monospace; display:block; max-width:-moz-fit-content; max-width:fit-content; margin:0; overflow-x:auto; white-space:nowrap; 
}

th {font-family:monospace; background-color:#AAA; padding:3px; font-size:0.9em;
}

td {font-family:monospace; padding:3px; font-size:0.9em;
}

tr:nth-child(even) {background-color:#DDD;
}

ul {padding-left:0; padding-right:20px; list-style-type:none; font-family:monospace; /* overflow-wrap:break-all; word-wrap:break-all; */
}

ol {margin-left:24px; padding-left:0; padding-right:20px; list-style-type:decimal-leading-zero; /*font-family:monospace;*/ /* overflow-wrap:break-all; word-wrap:break-all; */
}

li {/* overflow-wrap:break-all; word-wrap:break-all; */
}

dl {display:block; /*padding-left:24px;*/
}

dt {margin-left:12px;
}

dd {margin-left:20px; margin-bottom:8px; /*font-size:0.8em;*/
}

a:link {text-decoration:none; color:#0000EE;
}

a:visited {color:#800080;
}

a:hover, a:active {text-decoration:underline;
}

a:focus {
  outline:thin dotted;
}

/* Responsive for dark mode */
@media (prefers-color-scheme:dark) {
body {color:#fcfcfc; background-color:#222;
}

main {background-color:#222; color:#fcfcfc;
}

header {background-color:#114d9b;
}

nav {background-color:#222; color:#fcfcfc;
}

pre {background-color:#AAA;
}

kbd {border:#555; background-color:#AAA;
}

blockquote {background-color:#AAA;
}

content {color:#fcfcfc;
}

th {background-color:#555;
}

tr:nth-child(even) {background-color:#AAA;
}

tr:nth-child(odd) {background-color:#555;
}

a:link {color:#114d9b;
}

a:visited {color:#800080;
}

}

/*Responsive styles for mobile*/
@media (max-width:640px) {
main {font-size:14px;
}
}