style.css

/* Base */

:root {
    --light-links: #1B597B;
    --dark-links: #FFB029;
    --grey-2: #222222;
    --grey-3: #333333;
    --grey-5: #555555;
    --grey-6: #666666;
    --grey-7: #777777;
    --grey-8: #888888;
    --grey-9: #999999;
    --grey-a: #AAAAAA;
    --grey-b: #BBBBBB;
    --grey-c: #CCCCCC;
    --grey-d: #DDDDDD;
    --grey-e: #EEEEEE;
    --grey-e8: #E8E8E8;
}

body {
	height: 100%;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	font-size: 16px;
	font-family: sans-serif;
	color: var(--grey-3);
	max-width: 660px;
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-family: sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	margin-block-end: 10px;
}

h2, h3 {
    font-size: 1em;
}

h2 {
	margin-block-start: 0;
}

#toggle img, #toggle picture {
	position: fixed;
	top: 22px;
	right: calc(50vw - 306px);
	cursor: pointer;
	color: #333;
	z-index: 100;
	width: 23px;
}

.pointer {
	cursor: pointer;
}

.clear {
	clear: both;
}


/* Images */

.i50 {
	width: 50%;
	clear: both;
	text-align: center;
	display: block;
	margin: 1em auto 0.25em;
}

.i60 {
	width: 60%;
	clear: both;
	text-align: center;
	display: block;
	margin: 1em auto 0.25em;
}

.i75 {
	width: 75%;
	clear: both;
	text-align: center;
	display: block;
	margin: 1em auto 0.25em;
}

.i80 {
	width: 80%;
	clear: both;
	text-align: center;
	display: block;
	margin: 1em auto 0.25em;
}

.i90 {
	width: 90%;
	clear: both;
	text-align: center;
	display: block;
	margin: 1em auto 0.25em;
}

.i100 {
	width: 100%;
	clear: both;
	text-align: center;
	display: block;
	margin: 1em auto 0.25em;
}

.noradius {
	border-radius: 0 !important;
}

.center, .aligncenter {
	clear: both;
	text-align: center;
	display: block;
	margin: 0.75em auto 1.25em;
	width: auto;
}

.alignleft {
	display: inline;
	float: left;	
	margin-right: 1.5em;
	margin-top: .75em;
	margin-bottom: .75em;
}

.alignright {
	display: inline;
	float: right;	
	margin-left: 1.5em;
	margin-top: .75em;
	margin-bottom: .75em;
}


/* Login page */

body.login {
	background-color: var(--grey-f);
}

.adminwrapper {
	width: 350px;
	padding: 20px;
	margin: 75px auto 25px;
	border: 1px solid #999;
	border-radius: 8px;
	background-color: #ffffff;
}

a.admin {
	float: left;
	margin-top: 7px;
	color: var(--light-links);
	text-decoration: none;
	font-weight: bold;
}

a.back {
	margin-top: 7px;
	color: var(--light-links);
	text-decoration: none;
	font-weight: bold;
}

.errWrapper {
	width: 350px;
	padding: 20px;
	margin: 0px auto 25px;
	position: relative;
	top: 150px;
	text-align: center;
	color: #222;
	border: 1px solid red;
	border-radius: 8px;
}

.wrapper {
	width: 350px;
	padding: 20px;
	/* margin: 75px auto 25px; */
	border: 1px solid #999;
	border-radius: 8px;
	background-color: var(--grey-e);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.wrapper2 {
	width: 350px;
	padding: 20px;
	margin: 0px auto 50px;
	border: 1px solid #999;
	border-radius: 8px;
	background-color: #ffffff;
}

.wrapper h2 {
	margin: 0 0 20px;
}

#login_form label, #setup_form label, #admin_form label, #password_form label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: bold;
}

.form-control, #setup_form input[type="email"] {
	display: block;
	width: 93%;
	height: 34px;
	padding: 1px 12px;
	margin-bottom: 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: var(--grey-5);
	background-color: white;
	background-image: none;
	border: 1px solid var(--grey-c);
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	outline: none;
}

.btn {
	display: inline-block;
	padding: 6px 12px;
	margin: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}

.btn-primary {
	color: white;
	background-color: #337ab7;
	border-color: #2e6da4;
}

.btn-primary:hover {
	color: white;
	background-color: #286090;
	border-color: #204d74;
}

.cancel img {
	position: absolute;
    top: 22px;
    right: calc(50vw - 195px);
    font-size: 23px;
    cursor: pointer;
    color: #333;
    z-index: 100;
    width: 23px;
    display: block;
}

/* Layout - header */

.site-header {
	padding: 1em 0;
	margin: 0;
	position: relative;
	max-width: 660px;
}

.site-branding {
	padding-left: 1.5em;
}

.site-title {
	line-height: 1.2;
	margin: 0 auto;
	font-size: 34px;
    letter-spacing: -2.5px;
}

.site-title a {
	color: var(--grey-4);
	text-decoration: none;
}

.toggle {
	display: block;
	position: fixed;
	top: 22px;
	right: calc(50vw - 306px);
	font-size: 23px;
	cursor: pointer;
	color: var(--grey-3);
    z-index: 100;
    outline: none;
    text-decoration: none;
}

.toggle .login {
	font-size: 20px;
}

.content-area {
	margin-left: auto;
	margin-right: auto;
	max-width: 660px;
	margin: 0em auto 1.5em;
	padding: 0 1.5em;
}


/* Post controls */

.section {
	margin-block-start: 1em !important;
}

/* Post body */

.entry-content, .entry-content p, .replyto {
	font-size: 16px;
	line-height: 1.5em;
	margin-block-start: 0.5em;
	margin-block-end: 0.6em;
}

.entry-content {
	margin-block-end: 0em;
}

.entry-content a, .section a, .wm {
	color: var(--light-links);
	font-weight: bold;
	cursor: pointer;
}

.indentSpan {
	margin-left: 25px;
}

.entry-content img {
  border-radius: 8px;
  max-width: 100% !important;
  height: auto !important;
}

.entry-content li {
	word-wrap: break-word;
}

.postTitle {
	margin-top: 15px;
}

article p:last-of-type {
	margin-block-end: 0px !important;
}

p+blockquote + p {
  margin-block-start: 1.2em !important;
}

p+blockquote {
	margin-top: 1em;
	margin-block-end: 1em !important;
}

blockquote p:first-of-type {
	margin-block-start: 0px !important;
}

blockquote {
	border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 1px solid #999 !important;
	overflow: hidden;
	position: relative;
	left: -18px;
	background: #fcfcfc;
	color: var(--grey-5);
	font-style: italic;
	font-weight: 300;
	margin: 1em 0 1em 35px;
	padding: 16px;
}

.avatar_post {
	width: 25px;
	border-radius: 50% !important;
}

details, summary {
	outline: none;
}

details[open] {
	padding-bottom: 1px;
	margin-bottom: 10px;
	background: #d9d9d9;
	border-radius: 8px;
	padding: 0px 10px;
}

details[open].label_details {
	padding-bottom: 1px;
	margin-bottom: 10px;
	background: #fff;
	padding: 0px;
}

code {
  border: 1px solid #ff0000;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 0 3px 1px 3px;
  background-color: #ffdddd;
}

pre code {
  border: 0px;
  background-color: var(--grey-e);
  padding-left: 0px;
}

pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  border: 1px solid var(--grey-e);
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
	background: var(--grey-e);
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 14px;
	line-height: 1.4em;
	margin-bottom: 1em;
	max-width: 100%;
	overflow: auto;
	padding: 1em;
}

mark {
  padding: 0px 3px;
  border-radius: 3px;
}

.entry-content p sup {
  line-height: 0 !important;
}

audio {
  margin: 15px 20px;
  text-align: center;
}

video {
	width: 80%;
	margin-top: 0.25em;
	border-radius: 8px;
}

.labeltext {
	color: #444;
}


/* Page & post */

.pageWrapper {
	width: 100vw;
	position: absolute;
	left: 0px;
}

.pagePost {
	float: right;
	width: calc(100% - 30px);
	margin-block-start: 0em;
	word-wrap: break-word;
}

.pagePostLink {
	font-size: 0.9em;
	line-height: 1em;
	position: relative;
	top: 4px;
	margin-bottom: 10px;
}

.pagePostLink.page {
	font-size: 0.9em;
	line-height: 1em;
	position: relative;
	top: 0px;
	margin-bottom: 10px;
}

.pagePostLink a {
	text-decoration: none;
}

.pagePostTop {
	line-height: 0.9em;
	margin-block-start: 0em;
	margin-block-end: 0em;
}

.pagePostBottom {
	font-size: 0.6em;
	font-weight: bold;
	line-height: 0.6em;
	text-decoration: none;
	position: relative;
    top: -10px;
}

.contentDiv {
	margin-bottom: 10px;
}

a.cd {
	font-size: 0.6em;
	line-height: 0.6em;
	text-decoration: none;
	position: relative;
	top: -10px;
}


/* Main form and controls */

#content {	
  max-height: 300px;
}

#content, .text {
	width: 96%;
	margin-bottom: 12px;
	padding: 0.7em 0.7em;
	border: 0px solid var(--grey-c);
	border-radius: 8px;
	background: #f6f6f6;
	font-size: 16px;
	resize: none;
	outline: none;
	font-family: sans-serif;
}

input, textarea {
	outline: none;
}

textarea::placeholder {
  color: #bbbbbb;
}

input[type="submit"] {
	color: #999;
	border-radius: 40px;
	border: 1px solid #999;
	padding: .3em 1.5em;
	position: relative;
	background-color: white;
	font-size: 12px;
	font-family: sans-serif;
	float: right;
	margin-left: 15px;
}

input[type="submit"]:hover {
	color: black;
	border: 1px solid black;
	background-color: #fcfcfc;
}

input[type="email"] {
    border-radius: 8px;
    padding: 5px 8px 5px 8px;
    color: var(--grey-7);
    border: 1px solid #aaa;
    font-size: 16px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("/images/select.png") 98% / 15% no-repeat white !important;
    background-size: 18px 7px !important;
}


/* Edit posts */

input.text {
	max-height: 34px; display: none;
}

input.texttitles {
	max-height: 34px;
} 

input[type="checkbox"] {
	transform: scale(1.25);
	position: relative;
	top: -1px;
}

#submit {
	position: relative;
	top: -3px;
	float:right;
	font-size: 75%
}


/* Comments */

.replies {
	-moz-transition: height .5s;
  	-ms-transition: height .5s;
  	-o-transition: height .5s;
  	-webkit-transition: height .5s;
  	transition: height .5s;
  	height: 0px;
  	overflow: hidden;
	padding: 0;
	margin-top: 0px;
	margin-bottom: 0px;
}

.comment {
	width: 540px;
	padding-right: 10px;
	margin-bottom: 20px;
	float: left;
}

.indentComment {
	width: 565px;
}

.indentReply {
	width: 565px;
}

.linkedComment {
    background-color: var(--grey-e8);
    padding: 5px 0px 0px 8px;
    box-sizing: border-box;
    position: relative;
    left: -5px;
    top: -5px;
    border-radius: 5px;
}

.nested.linkedComment {
    left: 15px !important;
}

.nested.linkedComment .commentDelForm {
    left: 5px !important;
}

.commentNameSpan {
	font-family: sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: -0.5px;
}

.website_link {
	text-decoration: none;
	color: var(--light-links);
}

.comment_text {
	width: 95%;
}

.comment_body {
	font-size: 16px;
	line-height: 22px;
}

.comment_body a {
	color: var(--light-links);
	font-weight: bold;
}

.comment_body p {
    margin-block-start: 0.3em !important;
}

.photo-box {
	float: left;
	position: relative;
	right: 5px;
	height: 25px;
	width: 25px;
	background: #999;
	border-radius: 50%;
	overflow: hidden;
}

.box-content {
	position:  absolute;
	top: 0px;
	left: 0;
	bottom: 0;
	right: 0;
}

.box-content div {
	display: table;
	width: 100%;
	height: 100%;
}

.box-content span {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	color: white;
	text-transform: uppercase;
	font-family: sans-serif;
}

.box-content span a {
	text-decoration: none;
	color: white !important;
	cursor: pointer;
}

object.avatar {
	height: 25px;
	width: 25px; 
	border-radius: 50%;
	background-color: var(--grey-e);
	float: left;
	position: relative;
	right: 7px;
	top: -3px;
}

.avatar {
	height: 25px;
	width: 25px; 
	border-radius: 50%;
	background-color: var(--grey-e);
	float: left;
}

.replies .related:last-of-type {
	margin-bottom: 50px !important;
}

.leave_reply {
	font-family: sans-serif;
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--grey-3);
	margin: 50px 0 0;
}

/* flash "reply to" */
 
.flash {
    animation-name: flash;
    animation-duration: 1s;
    -webkit-animation-name: flash;
    -webkit-animation-duration: 1s;
    
    -moz-animation-name: flash;
    -moz-animation-duration: 1s;
    
    -o-animation-name: flash;
    -o-animation-duration: 1s;
}

@keyframes flash {  
    from { color: var(--dark-links); }
	to   { color: default; }
}

@-webkit-keyframes flash {  
    from { color: var(--dark-links); }
	to   { color: default; }
}

@-moz-keyframes flash {  
    from { color: var(--dark-links); }
	to   { color: default; }
}

@-o-keyframes flash {  
    from { color: var(--dark-links); }
	to   { color: default; }
}

/* end flash "reply to" */

.commentDelForm {
	float:right;
	margin-right: -25px;
	position: relative;
	top: 3px;
}

.related .commentDelForm {
	float: left;
	top: 2px;
	margin-right: 10px;
}


/* Footer */

.paging-navigation {
	margin: 2.0em 0 0em;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	max-width: 660px;
	padding: 0 1.5em;
}

.paging-navigation a {
	text-decoration: none;
	font-weight: bolder;
	color: var(--light-links);
	font-size: 18px;
}

.nav-previous {
	float: left;
	width: 50%;
}

.nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/* End of main CSS */



/* Media Queries */

@media screen and (min-width: 768px) {
	#page {
		min-height: calc(100vh - 217px) !important;
		max-width: 660px;
		margin-left: auto;
		margin-right: auto;
	}

   	.linksDiv {
   		margin-bottom: 25px;
    }
}



@media screen and (max-width: 767px) {

	#toggle picture, #toggle img {
		right: 22px !important;
	}

	.site-header {
    	padding: 1em 0;
    }

	.site-title {
    	margin: 0.125em 0 0 0;
    	padding: 0;
    	text-align: left;
    	font-size: 28px;
    	letter-spacing: -2.5px;
    }
    
    #page {
		min-height: calc(100vh - 285px) !important;
	}

	#toggle {
		position: fixed;
		top: 25px;
		right: 22px;
		font-size: 20px;
	}

	#content, .newcontent, .text, .texttitles, .date {
		width: 94%;
	}

	.entry-content, .entry-content p, .replyto {
		font-size: 18px !important;
		line-height: 26px;
	}
	
	.indentContent {
		width: 325px;
	}

	.indentReply {
		width: 267px;
	}

	.paging-navigation {
		padding: 0 1.5em;
	}
}


@media screen and (max-width: 340px) {
	input[type="text"], input[type="url"] {
		width: 91%;
	}
}

/* End of media queries */



@media screen and (prefers-color-scheme: dark) {
	.adminwrapper, .wrapper {
		background-color: var(--grey-e) !important;	
	}

	body, .site-header, .entry-content, .entry-content p {
		color: var(--grey-c) !important;
		background-color: var(--grey-2) !important;
	}
	
	hr {
	  color: var(--grey-a);
	}
	
	hr:after {
	  background-color: var(--grey-2);
	}

	.site-header {
		background-color: var(--grey-2) !important;
	}

	.site-title a, .site-title a:visited, .site-title a:hover {
		color: var(--grey-b);
	}

	.pagetitle {
		color: var(--grey-b) !important;
		margin-bottom: 30px;
	}

	.toggle {
		color: var(--grey-b);
	}
	
	.wrapper .titleSpan {
		color: var(--grey-3);
	}
	
	.wrapper p {
		color: var(--grey-3);	
	}

	.entry-content H2, .entry-content H3 {
		color: var(--grey-d) !important;
	}

	blockquote {
		color: var(--grey-d) !important;
		background-color: var(--grey-3) !important;
	}

	blockquote p, blockquote p em, .entry-content blockquote p {
		background-color: #333 !important;
		color: var(--grey-d) !important;
		display: block;
	}
	
	blockquote li {
	  background-color: #333 !important;
	  color: var(--grey-d);
	}
  	
  	.text {
  	  background-color: #dddddd !important;
  	}

	input[type="submit"]:active {
		color: var(--grey-3);
	}

	.entry-content a, .section a {
		color: var(--dark-links) !important;
	}

	code {
		color: var(--grey-3);
	}

	pre, pre code {
		background: var(--grey-2);
		color: var(--grey-e);
	}

  	details[open], details[open] p, details[open] li {
		background: var(--grey-3);
	}
	
	details[open].label_details, details[open].label_details p, details[open].label_details li {
		background: var(--grey-2);
	}
	
	.paging-navigation a {
		color: var(--dark-links) !important;
	}

	.nav-links a {
		color: var(--dark-links) !important;
	}
	
	.wrapper, .wrapper2 {
	    border: 1px solid #aaa;
	}
	
	#login_form label, #setup_form label, #admin_form label, #password_form label {
		color: var(--grey-3);
	}
	
	a.back {
		color: var(--dark-links);	
	}

}

/* end of prefers-color-scheme: dark */