@import url("https://fonts.googleapis.com/css2?family=Google+Sans:ital,wght@0,400..700;1,400..700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

@font-face {
	font-family: "Twemoji";
	src: url("https://cdn.jsdelivr.net/npm/twemoji-colr-font/twemoji.woff2") format("woff2");
}

* {
	box-sizing: border-box;
	font-family: "Google Sans", sans-serif, "Twemoji";
	font-size: 18px;
	line-height: 1.5;
	text-autospace: normal;
}

body, .content {
	transition: 400ms;
}

body {
	background: #000000;
	color: #ffffff;
	margin: 0;
	overflow: hidden;
	overflow: clip;
}

#pgbody {
	height: 100vh;
	overflow: auto;
	padding: 0 50px;
}

code, pre {
	font-family: "Roboto Mono", monospace, "Twemoji";
	font-size: 14px;
	text-shadow: 0 0 1px #acacac;
}

blockquote {
	border-left: 6px solid;
	margin: 1em 0;
	padding-left: 30px;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}

h2, h3, h4, h5, h6 {
	color: #cccccc;
	margin: 18px 0;
}

h1 {
	font-size: 2em;
	margin: 0;
}

h2 {
	font-size: 1.624em;
}

h3 {
	font-size: 1.376em;
}

h4 {
	font-size: 1.248em;
}

h5 {
	font-size: 1.12em;
}

h6 {
	font-size: 1em;
}

info {
	padding-right: 8px;
}

.postdate {
	color: #999999;
	font-style: italic;
}

a {
	color: #008080;
	text-decoration: none;
	transition: 200ms;
}

a:hover {
	border-bottom: 1px solid;
	color: #00c0c0;
}

a.external:after {
	content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22%3E%3Cpath fill=%22%23fff%22 stroke=%22%23008080%22 d=%22M1.5 4.518h5.982V10.5H1.5z%22/%3E%3Cpath fill=%22%23008080%22 d=%22M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M9.995 2.004l.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z%22/%3E%3C/svg%3E");
	margin-left: 2px;
}

a.external:hover:after {
	content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22%3E%3Cpath fill=%22%23fff%22 stroke=%22%2300c0c0%22 d=%22M1.5 4.518h5.982V10.5H1.5z%22/%3E%3Cpath fill=%22%2300c0c0%22 d=%22M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z%22/%3E%3Cpath fill=%22%23fff%22 d=%22M9.995 2.004l.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z%22/%3E%3C/svg%3E");
}

a.footnote {
	font-size: smaller;
}

a.footnote:before {
	content: "[";
}

a.footnote:after {
	content: "]";
}

a[rel="me"] {
	display: none;
}

li {
	margin: 5px 0;
}

table {
	background: #101010;
	border-collapse: collapse;
	width: 100%;
}

th, td {
	border: 2px solid #ffffff;
	padding: 5px;
	vertical-align: top;
}

th.min, td.min {
	white-space: nowrap;
	width: 1px;
}

table.ctrmid th, table.ctrmid td {
	text-align: center;
	vertical-align: middle;
}

hr {
	background: #222222;
	border: none;
	height: 1px;
}

iframe.yt {
	height: 477px;
	width: 848px;
}

span.ref:hover {
	border-bottom: 1px dotted;
}

del {
	text-decoration-color: #ffffff;
}

/* loader shit begin */

#loaderbg {
	background: #0c0c0c;
	cursor: progress;
	height: 100vh;
	position: absolute;
	transition: 600ms;
	width: 100vw;
	z-index: 16777270;
}

#loader {
	animation: spin 1000ms linear infinite;
	border: 16px solid #e7e7e7;
	border-top: 16px solid #00c0c0;
	border-radius: 50%;
	height: 144px;
	left: 50%;
	margin: -72px 0 0 -72px;
	position: absolute;
	top: 50%;
	width: 144px;
	z-index: 16777271;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* loader shit end */
/* mode button begin */

#modeButton {
	background: #004040;
	height: 32px;
	position: fixed;
	right: calc(10px + var(--scrollbar-width, 0px));
	top: 10px;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 32px;
	z-index: 99;
}

#modeButton:hover {
	background: #008080;
	border-bottom: 0;
	cursor: pointer;
}

#modeButton #modeIcon {
	display: block;
	font-family: "Twemoji";
	font-size: 20px;
	left: 6px;
	position: absolute;
	top: 1px;
}

/* mode button end */
/* header begin */

header {
	height: 125px;
}

header a:hover {
	border-bottom: 0;
	color: inherit;
}

header a.active {
	color: inherit;
	font-weight: bold;
}

.blog-title {
	float: left;
	margin-top: 30px;
}

.blog-title a {
	display: inline-block;
	font-size: 52px;
}

.blog-title a:hover {
	transform: translateY(3px);
}

.navigation {
	float: right;
	margin-top: 60px;
	padding-left: 0;
}

.navigation li {
	display: inline-block;
	list-style: none;
	margin-left: 1em;
}

.navigation li:first-child {
	margin-left: 0;
}

.navigation a {
	color: #808080;
}

.blog-title a, .navigation a:hover {
	color: #f3f3f3;
}

/* header end */
/* content begin */

.content {
	background: #080808;
	padding: 60px;
}

.content img, .content video, .content iframe {
	display: block;
	margin: 0 auto;
	max-height: 100vh;
	max-width: 100%;
}

.content iframe {
	border: 0;
}

.content .imgcaption {
	margin-top: -0.5em;
	text-align: center;
}

/* content end */
/* footer begin */

footer {
	color: #646464;
	margin: 40px 0;
	text-align: center;
}

#copySymbol {
	font-family: "Roboto Mono", sans-serif, "Twemoji";
}

/* footer end */
/* index begin */

#recent-posts {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
}

.post-excerpt {
	color: inherit;
	display: block;
	float: left;
	padding: 40px;
	width: 50%;
}

.post-excerpt:hover {
	background: #e0e0e0;
	border-bottom: 0;
	color: #000000;
}

.post-excerpt .title {
	font-weight: bold;
}

.breaker {
	clear: both;
}

.end {
	clear: both;
	padding: 40px 0;
	text-align: center;
	width: 100%;
}

/* index end */
/* div tables begin */

.sppgtbl {
	display: table;
	margin: 0 auto;
}

.sppgtbl > * {
	display: table-row;
}

.sppgtbl > * > * {
	display: table-cell;
}

.sppgtbl > * > *:first-child > * {
	padding-right: 10px;
	text-align: right;
}

.sppgtbl > * > *:last-child > * {
	border-left: 2px solid;
	padding-bottom: 10px;
	padding-left: 10px;
}

.sppgtbl > *:last-child > *:last-child > * {
	padding-bottom: 0;
}

/* div tables end */
/* light theme shit begin */

body.light {
	background: #f7f7f7;
	color: #000000;
}

body.light #loaderbg {
	background: #f2f2f2;
}

body.light h2, body.light h3, body.light h4, body.light h5, body.light h6 {
	color: #333333;
}

body.light table {
	background: #efefef;
}

body.light hr {
	background: #dddddd;
}

body.light del {
	text-decoration-color: #000000;
}

body.light .blog-title a, body.light .navigation a:hover {
	color: #0c0c0c;
}

body.light .content {
	background: #ffffff;
}

body.light .post-excerpt:hover {
	background: #404040;
	color: #ffffff;
}

/* light theme shit end */
/* webkit-only shit begin */

@media (-webkit-min-device-pixel-ratio: 0) {
	img {
		image-rendering: -webkit-optimize-contrast;
	}

	::-webkit-scrollbar {
		height: 10px;
		width: 10px;
	}

	::-webkit-scrollbar-thumb {
		background: padding-box #7f7f7f;
		border: 2px solid transparent;
		border-radius: 5px;
		opacity: 0.6;
	}

	::-webkit-scrollbar-thumb:hover {
		background: padding-box #6e6e6e;
	}

	::-webkit-scrollbar-thumb:active {
		background: #5f5b5b;
		opacity: 1;
	}

	::-webkit-scrollbar-track {
		background: transparent;
	}

	::-webkit-scrollbar-corner {
		background: none;
	}
}

/* webkit-only shit end */
/* responsive shit begin */

@media (orientation: portrait) {
	* {
		font-size: 15px;
	}

	#pgbody {
		padding: 0;
	}

	#loader {
		height: 120px;
		margin: -60px 0 0 -60px;
		width: 120px;
	}

	header {
		height: auto;
		margin-left: 18px;
	}

	.content, .post-excerpt {
		padding: 30px 18px;
	}

	.post-excerpt {
		width: 100%;
	}

	.blog-title a {
		font-size: 32px;
	}

	.navigation {
		margin-bottom: 30px;
		margin-top: 0;
	}

	.navigation li {
		display: list-item;
		margin-left: 0;
	}

	.blog-title, .navigation {
		float: none;
	}

	.sppgtbl > * > * {
		display: table-row;
	}

	.sppgtbl > * > * > * {
		display: table-cell;
	}

	.sppgtbl > * > *:first-child > * {
		padding-right: 0;
		text-align: left;
	}

	.sppgtbl > * > *:last-child > * {
		border-left: none;
		padding-bottom: 15px;
		padding-left: 0;
	}
}

/* responsive shit end */
/* tos shit begin */

#tos-modal-dialog {
	background: rgba(0, 0, 0, 0.53);
	display: grid;
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 16777269;
}

#tos-modal-dialog > * {
	background: #002dd3;
	color: #ffffff;
	font-weight: 600;
	margin: auto;
	padding: 20px;
	text-align: center;
}

#tos-modal-dialog a {
	background: #202020;
	border: 1px solid #ffffff;
	color: unset;
	display: inline-block;
	margin: 16px 8px auto;
	padding: 6px 12px 4px;
}

#tos-modal-dialog a:hover {
	background: #0060c0;
	cursor: pointer;
}

/* tos shit end */
/* reduced motion shit begin */

@media (prefers-reduced-motion) {
	#loaderbg {
		display: none;
		opacity: 0;
	}
}

/* reduced motion shit end */