:root {
	--blackChocolate: #150100;
	--darkChocolate: #371F16;
	--milkChocolate: #693917;
	--brightChocolate: #996846;
	--warmGray: #C89D7E;
	--paleOrange: #FED698;
	--lightYellow: #FFFF8E;
	
	/* border style for site content */
	--borderStyle: solid var(--blackChocolate);
	--borderRadius: 4px;
	--borderWidth: 4px;
}
/* FONTS */
@font-face {
    font-family: Hypeblox;
    src: url("font/Hypeblox-L3YGZ.ttf") format("truetype");
}
/* STYLE */
html {
	background-image: url(img/darkChocolate-checker.png);
	background-color: var(--darkChocolate);
	
	color: var(--blackChocolate);
	
	font-family: Verdana, Arial, Helvetica, sans-serif; /*pulled straight from 2006 dA*/
	font-size: 16px;
	
	line-height: 1.5;
	
	scrollbar-color: var(--paleOrange) var(--blackChocolate);
}
body {
	
}
.container {
	margin: 1rem auto;
	max-width: 1600px;
}
#siteHeader {
	background: url(img/headerBackground-fade.png) var(--brightChocolate);
	background-size: auto 100%;
	border: var(--borderWidth) var(--borderStyle);
	border-radius: var(--borderRadius) var(--borderRadius) 0 0;
	border-bottom: none;
	position: relative;
	text-align: center;
}
#siteHeader h1 {
	background: linear-gradient(180deg, var(--milkChocolate) 45%, var(--darkChocolate) 45%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	clip-path: none; /* cause h1 - h6 use this */
	font-family: "Hypeblox";
	font-size: clamp(2rem, 13vw, 6rem);
	font-weight: bold;
	line-height: 1;
	margin: 0.5rem auto 0;
	padding: 0 2vw 0.5rem;
	position: relative;
	-webkit-text-stroke-width: 0.1rem;
	-webkit-text-stroke-color: var(--paleOrange);
	/*text-shadow: 3px 3px var(--paleOrange),
				3px 0 var(--paleOrange),
				0 3px var(--paleOrange),
				-3px -3px var(--paleOrange),
				-3px 0 var(--paleOrange),
				0 -3px var(--paleOrange),
				-3px 3px var(--paleOrange),
				3px -3px var(--paleOrange);*/
	transform: none;
	width: fit-content;
}
#siteHeader #sona {
	background-color: transparent;
	border: none !important;
	display: block;
	position: absolute;
	right: -60px;
	bottom: 0;
	max-width: 100px;
	width: 20vw;
}
@media only screen and (max-width: 919px) {
	#siteHeader h1 {
		background: linear-gradient(180deg, var(--milkChocolate) 24%, var(--darkChocolate) 24%, var(--darkChocolate) 50%, var(--milkChocolate) 50%, var(--milkChocolate) 71%, var(--darkChocolate) 71%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	#siteHeader #sona {
		right: 5%;
	}
}
nav {
	background-color: var(--milkChocolate);
	border: var(--borderWidth) var(--borderStyle);
	padding: 0.5rem;
}
nav>ul {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	margin: 0;
	padding: 0;
}
nav>ul>li {
	display: inline-block;
	margin: 0 0.5em;
}
nav>ul>li>a {
	color: var(--paleOrange);
	font-weight: bold;
	text-decoration: none;
}
nav>ul>li>a:hover {
	color: var(--lightYellow);
	text-decoration: underline;
}
.content {
	flex-flow: row-reverse wrap !important;
	align-items: flex-start !important;
	gap: 0 !important;
}
.sidebar, main {
	border: var(--borderWidth) var(--borderStyle);
	border-top: none;
}
.sidebar {
	background-color: var(--warmGray);
	border-right: none;
	border-radius: 0 0 0 var(--borderRadius);
	flex-basis: 300px;
	order: 2;
}
@media only screen and (max-width: 977px) {
	.sidebar {
		border-right: var(--borderWidth) var(--borderStyle);
	}
	figure {
		padding: 0.8rem !important;
	}
	.gallery {
		justify-content: center !important;
	}
}
.sidebar>section h1, .sidebar>section h2, .sidebar>section h3, .sidebar>section h4, .sidebar>section h5, .sidebar>section h6 {
	background-color: var(--milkChocolate);
	color: var(--paleOrange);
	margin-top: 0;
}
.sidebar>section, main {
	padding: 0 1rem 1rem;
}
.sidebar>section>p {
	margin: 0.5rem 0;
}
#siteButton {
	margin: 0.5rem 1rem 1rem 0;
	display: block;
	float: left;
}
main {
	background-color: var(--paleOrange);
	border-left: var(--borderWidth) var(--borderStyle);
	border-radius: 0 0 var(--borderRadius) var(--borderRadius);
	flex-basis: 600px;
	flex-grow: 9999 !important;
	order: 1;
	overflow-x: hidden;
}
main>img {
	/*max-width: 70vw;
	width: 100%;*/
	border: 1px solid var(--lightYellow);
	background-color: var(--brightChocolate);
}
img.raw, img.rawImage {
	max-width: initial;
	width: initial;
	border: none;
	background-color: transparent;
}
main>footer {
	margin: 1rem -1rem -1rem;
	text-align: center;
}
footer {
	background-color: var(--milkChocolate);
	color: var(--paleOrange);
	display: block;
	padding: 0.5rem;
}
footer p {
	margin: 0;
}
footer a, footer a:hover {
	color: var(--lightYellow);
}
/* CONTENT STYLING */
::selection {
	background-color: var(--milkChocolate);
	color: var(--lightYellow);
}
a {
	color: var(--milkChocolate);
	text-decoration: 0.1em dashed underline;
}
a:hover {
	color: var(--brightChocolate);
}
aside {
	padding: 0.5rem;
}
aside img {
	padding: 0;
	margin: auto;
}
aside.small img {
	max-height: 140px !important;
}
blockquote {
	font-style: italic;
	margin: 1rem 0;
	padding: 0.5rem 2rem;
	position: relative;
	width: fit-content;
}
blockquote i, blockquote em {
	font-style: initial;
}
blockquote:before, blockquote:after {
	background-size: 100%;
	content: "";
	display: block;
	filter: invert(19%) sepia(73%) saturate(746%) hue-rotate(347deg) brightness(99%) contrast(88%);
	position: absolute;
	width: 16px;
	height: 16px;
}
blockquote:before {
	background-image: url(img/svg/iconmonstr-quote-1.svg);
	left: 0.5rem;
	top: 0.5rem;
}
blockquote:after {
	background-image: url(img/svg/iconmonstr-quote-3.svg);
	right: 0.5rem;
	bottom: 0.5rem;
}
blockquote>span.from {
	display: block;
	font-style: initial;
	font-weight: bold;
	text-align: right;
}
blockquote>span.from i, blockquote>span.from em {
	font-style: italic;
}
blockquote>span.from:before {
	content: "-";
}
aside, blockquote, code, details, figure, input[type="text"], table td, textarea, pre {
	background-color: var(--warmGray);
	border: 1px solid var(--milkChocolate);
}
blockquote a, details a, figure a, table td a, .sidebar a { /* links */
	color: var(--darkChocolate);
}
blockquote a:hover, details a:hover, figure a:hover, table td a:hover, .sidebar a:hover { /* links */
	color: var(--milkChocolate);
}
blockquote code, details code, figure code, details input[type="text"], details table td, details textarea, details pre, .sidebar blockquote, .sidebar code, .sidebar textarea, details blockquote { /* color flipping */
	background-color: var(--paleOrange);
}
button, input[type="button"], input[type="submit"] {
	background-color: var(--milkChocolate);
	border: none;
	border-bottom: 4px solid var(--darkChocolate);
	color: var(--paleOrange);
	font-family: inherit;
	font-size: inherit;
	margin: 0.5rem 0;
	padding: 0.3em 0.6em;
}
button:active, input[type="button"]:active, input[type="submit"]:active {
	border-bottom: 2px solid var(--darkChocolate);
	margin-bottom: calc(0.5rem + 2px);
	transform: translateY(2px);
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover {
	background-color: var(--brightChocolate);
	border-bottom-color: var(--milkChocolate);
	color: var(--lightYellow);
	cursor: pointer;
}
code, input[type="text"] {
	padding: 0.1em 0.2em;
}
details {
	padding: 0.5rem 1rem 0.5rem 2rem;
}
details[open=""] {
	padding: 0.5rem 1rem 0 2rem;
}
details table th { /* color flipping */
	background-color: var(--milkChocolate);
	border-color: var(--milkChocolate);
}
details table th+td { /* color flipping */
	border-left-color: var(--paleOrange);
}
details>summary {
	margin-left: -1rem;
}
details[open]>summary {
	padding-bottom: 0.5rem;
	border-bottom: 2px dashed var(--darkChocolate);
}
#errorImg {
	background-color: transparent;
	border: 0;
	display: block;
	margin: 0 auto;
	height: 100%;
	width: auto;
	max-height: 500px;
}
fieldset {
	border: 3px groove var(--paleOrange);
	margin: 1rem 0;
}
figure {
	padding: 1rem;
}
figure, aside {
	margin: 1rem 0;
	width: min-content;
}
figure img, aside img {
	background-color: var(--brightChocolate);
	border: 1px solid var(--paleOrange);
	display: block;
	max-width: 70vw;
}
figure img {
	margin: 0 auto 0.5rem;
	padding: 0.3rem;
	max-height: 300px;
}
figure.right, aside.right {
	float: right;
	margin: 0 0 1rem 1rem;
}
figure.left, aside.left {
	float: left;
	margin: 0 1rem 1rem 0;
}
figure.right img, figure.left img, aside.right img, aside.left img {
	max-height: 180px;
}
figure.right.big img, figure.left.big img, aside.right.big img, aside.left.big img {
	max-height: 350px;
}
figure>figcaption>code {
	background-color: var(--paleOrange);
}
.flex>figure {
	margin: 0;
}
figure.infobox {
	float: right;
	margin: 0 0 1rem 1rem;
	padding: 0;
}
figure.infobox>section {
	background-color: var(--milkChocolate);
}
@media only screen and (max-width: 750px) {
	figure.infobox {
		float: none;
		margin: 1rem auto;
	}
}
figure.infobox>section>header {
	background-color: var(--brightChocolate);
	color: var(--paleOrange);
	padding: 0.3rem;
	text-align: center;
}
figure.infobox>section>img {
	display: block;
	margin: 0 auto;
	padding: 0;
	background-color: transparent;
	border: none;
}
h1, h2, h3, h4, h5, h6 {
	background-color: var(--warmGray);
	color: var(--darkChocolate);
	clip-path: polygon(0 0,calc(100% - 1em) 0,100% 100%,0 100%); /* https://css-shape.com/slanted-edge/ */
	
	margin: 1rem 0 1rem -1rem;
	padding: 0 1.3em 0 1rem;
	width: fit-content;
}
h1.right, h2.right, h3.right, h4.right, h5.right, h6.right {
	text-align: right;
	clip-path: polygon(calc(1em) 0, 100% 0, 100% 100%,0 100%); /* https://css-shape.com/slanted-edge/ */
	margin: 1rem -1rem 1rem auto;
	padding: 0 1em 0 1.3rem;
}
h1, h2, h3, h4, h5, h6, header {
	font-weight: bold;
	letter-spacing: 0.1em;
}
header {
	
}
hr {
	border: none;
	border-bottom: 2px dashed var(--darkChocolate);
}
iframe.video {
	aspect-ratio: 16/9;
	display: block;
	width: 100%;
	max-width: 600px;
	margin: 1rem auto;
}
input[type="text"], textarea {
	font-family: inherit;
	font-size: inherit;
	margin: 0.25rem 0;
}
#toc {
	background-color: var(--warmGray);
	border: 1px solid var(--milkChocolate);
	width: fit-content;
}
#toc a {
	color: var(--darkChocolate);
}
#toc a:hover {
	color: var(--milkChocolate);
}
#toc header {
	background-color: var(--brightChocolate);
	border-bottom: 3px dashed var(--warmGray);
	color: var(--paleOrange);
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	padding: 0.3em 0;
	text-align: center;
}
#toc>ol {
	margin: 0;
	padding: 0.4em 0.8em 0.8em 1.6em;
}
#toc li {
	margin-left: 1em;
}
ol.citation {
	font-size: 0.9em;
}
ol, ul {
	padding-left: 1.5em;
}
ul {
	list-style: square;
}
ul>li+ul, ul>li>ul {
	list-style: none;
}
ul>li+ul>li:before, ul>li>ul>li:before {
	content: "↳";
	margin: 0 0.5em 0 -1em;
}
li {
	margin: 0.25em 0;
}
p, table {
	margin: 1rem 0;
}
pre, textarea {
	line-height: inherit;
	padding: 0.5em;
	white-space: break-spaces;
	overflow-wrap: break-word;
}
s {
	opacity: 0.5;
}
sup, sub {
	font-size: 0.7em;
}
table {
	background-color: var(--warmGray);
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
	width: fit-content;
	max-width: 100%;
}
table, textarea {
	scrollbar-color: var(--lightYellow) var(--darkChocolate);
}
table td {
	padding: 0.3em 0.5em
}
table td code {
	background-color: var(--paleOrange);
}
table th {
	background-color: var(--brightChocolate);
	color: var(--paleOrange);
	padding: 0.3em 0.5em 0.2em;
}
table tr:not(:last-of-type) th {
	border-bottom: 3px dashed var(--brightChocolate);
}
table th+th {
	border-left: 2px dashed var(--warmGray);
}
table th+td {
	border-left: 3px dashed var(--brightChocolate);
}
figure>table {
	border-left: 0;
	border-right: 0;
	font-size: 0.8em;
	margin: 0;
}
textarea {
	width: calc(100% - 1rem) !important;
}
/* RE-USED STYLES */
.flex {
	display: flex;
	align-content: flex-start;
	align-items: stretch;
	flex-flow: row wrap;
	justify-content: flex-start;
	gap: 0.3rem;
}
.flex>div, .flex>main {
	flex-grow: 1;
	flex-shrink: 1;
}
.warning {
	background-color: var(--warmGray);
	border-left: 0;
	border-right: 0;
	clip-path: polygon(2% 0,calc(100% - 2%) 0,100% 100%,0 100%);
	text-align: center;
	padding: 0.5rem;
}
.warning header {
	font-size: 1.2em;
}
.warning header, .warning p {
	margin: 0.25em 0;
}
/* Custom buttons */
img.bsky, img.sheezy {
	filter: invert(85%) sepia(25%) saturate(622%) hue-rotate(339deg) brightness(101%) contrast(99%);
	width: 1em;
}
button:hover img.bsky, button:hover img.sheezy {
	filter: clear;
	filter: invert(97%) sepia(5%) saturate(3404%) hue-rotate(0deg) brightness(104%) contrast(105%);
}
img.bsky, img.sheezy {
	position: relative;
	top: 0.1em;
}
@font-face {
	font-family: "Newgrounds"; 
	src: url("font/NewgroundsFont-Regular.otf") format("opentype");
}
.newgroundsFont {
	font-family: "Newgrounds";
	font-size: 1.2em;
	margin-top: -0.2em;
}
/* SIDEBAR EXCLUSIVE */
ul.fanlist, ul.site {
	display: flex;
	flex-flow: row wrap;
	gap: 0;
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}
ul.fanlist>li {
	width: 50px;
	height: 50px;
	flex-basis: 50px;
	position: relative;
}
ul.fanlist>li, ul.site>li {
	display: inline-block;
	margin: 0;
}
ul.site>li {
	width: 88px;
	height: 31px;
	flex-basis: 88px;
}

.statusCafe header {
	border: none;
	background: none;
	text-align: initial;
}
.statusCafe header, .statusCafe p, .statusCafe blockquote {
	margin: 0.5rem 0;
}
.statusCafe #statuscafe-username {
	font-size: 0.8em;
}
.statusCafe #statuscafe-username>a {
	font-size: 1rem;
	font-weight: bold;
}
/* HOME PAGE */
.homeContainer {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: min-content min-content 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 0px; 
}
.homeIntro {
	grid-area: 1;
}
.latestUpdate { /*rss container*/
	grid-area: span 2 / 1;
}
.latestUpdate h2, .latestJournal h3 {
	margin-top: 0;
}
.latestArt {
	grid-area: span 2 / 2;
}
.latestArt figure {
	margin: 1rem auto;
	width: initial;
}
.latestArt figure>a>img {
	padding: 0;
}
#latestArtButtons, #flags, #socials {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
#latestArtButtons li, #socials>li {
	display: inline-block;
	width: 2.5em;
	flex-grow: 1;
	flex-shrink: 1;
}
#latestArtButtons button, #socials button {
	margin: 0;
	width: 100%;
	height: 1.8em;
	font-size: 1.2rem;
	padding: 0.2em;
}
#latestArtImg {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
	max-width: 600px;
}
.latestJournal {
	grid-area: 4 / 1;
}
.marlette {
	grid-area: span 2 / 2;
}
@media only screen and (max-width: 1315px) {
	.latestJournal {
		grid-area: 4 / span 2;
	}
	.marlette {
		grid-area: 5 / span 2;
		margin-top: 1rem;
	}
}
@media only screen and (max-width: 1100px) {
	.latestArt {
		grid-area: 1 / 2;
	}
	.latestUpdate {
		grid-area: 2 / span 2;
	}
}
@media only screen and (max-width: 650px) {
	.homeContainer {
		display: flex;
		flex-flow: column;
	}
	.homeIntro {
		order: 1;
	}
	.latestArt {
		order: 2;
	}
	.latestUpdate {
		order: 3;
	}
	.latestJournal {
		order: 4;
	}
	.marlette {
		order: 5;
	}
}
.rss {
	background-color: var(--warmGray);
	border: 1px solid var(--milkChocolate);
	margin: 1rem 0;
}
.rss header {
	background-color: var(--milkChocolate);
	color: var(--paleOrange);
	display: block;
	padding: 0.3rem 0.5rem;
	font-size: 1.3em;
}
.rss .feedButton, .rss .feedButton:active {
	margin: 0;
	transform: none;
	border: 2px solid #CD5D0D;
}
.rss .feedButton {
	background-color: #FB9F37;
	background: linear-gradient(135deg, rgba(218,91,36,1) 0%, rgba(251,159,55,1) 40%, rgba(251,159,55,1) 60%, rgba(218,91,36,1) 100%);
	border-radius: 5px;
	color: white;
	padding: 0 0.25em;
}
.rss>div {
	height: 20em;
	overflow-y: scroll;
	scrollbar-color: var(--lightYellow) var(--darkChocolate);
}
.rss>div a {
	color: var(--darkChocolate);
}
.rss>div a:hover {
	color: var(--milkChocolate);
}
.rss .date {
	font-size: 0.8em;
	font-style: italic;
	margin: 0.5rem;
}
.rss description {
	display: block;
	margin: 1rem 0.5rem;
}
.rss h1, .rss h2, .rss h3, .rss h4, .rss h5, .rss h6 {
	margin: 1rem 0 0.5rem 0;
	background-color: var(--milkChocolate);
}
.rss h1, .rss h2, .rss h3, .rss h4, .rss h5, .rss h6 {
	color: var(--paleOrange);
}
.rss h1 a, .rss h2 a, .rss h3 a, .rss h4 a, .rss h5 a, .rss h6 a {
	color: var(--lightYellow) !important;
}

/* ABOUT */
#flags, #socials {
	flex-flow: row wrap;
}
#flags>li {
	flex-basis: 40px;
	flex-grow: 1;
	flex-shrink: 1;
	max-width: 40px;
	border: 1px solid var(--paleOrange);
	margin: 0;
}
#flags img, #socials img, #latestArtButtons img {
	padding: 0;
}
#flags img {
	margin: 0;
}
#socials img, #latestArtButtons img {
	background: transparent;
	border: none;
}

/* WORKS */
ul.tabs {
	list-style: none;
	padding: 0;
	margin-bottom: 0;
	display: flex;
	gap: 10px;
	flex-flow: row wrap;
}
@media only screen and (max-width: 650px) {
	ul.tabs {
		gap: 0;
		font-size: 0.8em;
	}
	ul.tabs>li>button {
		padding-right: 1em !important;
	}
}
ul.tabs>li {
	display: inline-block;
	margin: 0;
}
ul.tabs>li>button, ul.tabs>li>button:active {
	margin: 0;
	transform: none;
}
ul.tabs>li>button {
	background-color: var(--warmGray);
	border-bottom: 0;
	clip-path: polygon(0 0,calc(100% - 1em) 0,100% 100%,0 100%); /* https://css-shape.com/slanted-edge/ */
	color: inherit;
	font-weight: bold;
	padding: 0.3em 1.5em 0.3em 0.5em;
}
ul.tabs>li>button:hover {
	color: var(--milkChocolate);
}
ul.tabs>li>button:active, ul.tabs>li>button.active {
	background-color: var(--brightChocolate);
	color: var(--paleOrange);
}
.tabContent {
	background-color: var(--warmGray);
	border: 1px solid var(--milkChocolate);
	padding: 0 0.5rem;
}
.tabContent h1, .tabContent h2, .tabContent h3, .tabContent h4, .tabContent h5, .tabContent h6 {
	margin-left: -0.5rem;
	padding-left: 0.5rem;
	background-color: var(--milkChocolate);
	color: var(--paleOrange);
}
.tabContent a {
	color: var(--darkChocolate);
}
.tabContent a:hover {
	color: var(--milkChocolate);
}

.gallery {
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	margin: 1rem 0;
}
.gallery.small>figure img, ul.gallery.small>li img {
	max-height: 200px;
}
ul.gallery {
	list-style: none;
	padding: 0;
}
.gallery>figure {
	margin: 0;
	flex-shrink: 1;
}
.gallery>figure img, ul.gallery>li img {
	max-height: 300px;
	width: auto;
	height: 100%;
}
ul.gallery>li {
	display: block;
	margin: 0;
}
.gallery .icons {
	flex-flow: row wrap;
	width: 235px;
	margin-bottom: 0.5em;
}
.gallery .icons, .gallery .icons>ul {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.gallery .icons>ul {
	margin: 0 auto;
	padding: 0;
	flex-basis: 100px;
	flex-flow: column;
	flex-shrink: 1;
	list-style: none;
}
.gallery .icons>ul>li {
	display: block;
	margin: 0;
}
.gallery .icons>ul img {
	max-width: 100px;
	margin: 0;
}
.gallery.interestzone>figure>figcaption {
	font-size: 0.9em;
}
.gallery.interestzone>figure a:first-of-type>img {
	height: 64px;
}
.gallery.interestzone>figure a:nth-of-type(2)>img {
	padding: 0;
	border: 0;
	background-color: transparent;
}
.gallery.higuys>li img {
	max-height: 200px;
}
.gallery.archive>figure img {
	max-height: 250px;
}
.gallery.flags {
	font-size: 0.9em;
}
.gallery.flags img {
	height: 50px;
}
/*gallery color*/
.tabContent>.gallery>figure {
	background-color: var(--paleOrange);
}
.tabContent>.gallery>figure a {
	color: var(--milkChocolate);
}
.tabContent>.gallery>figure a:hover {
	color: var(--brightChocolate);
}
.tabContent>.gallery>figure img {
	background-color: var(--warmGray);
	border-color: var(--milkChocolate);
}
#robloxIcon, #undertaleIcon {
	background-color: var(--milkChocolate);
}
/* JOURNAL PREVIEWS */
.postHolder {
	gap: 1rem;
	justify-content: flex-start;
}
.postBlock {
	border: 1px solid var(--milkChocolate);
	width: 300px;
	height: 250px;
	max-height: 250px;
}
.flex .postBlock {
	flex-basis: 300px;
	flex-grow: 0;
	
	display: flex;
	flex-flow: column;
}
.postBlock>a {
	color: inherit;
	flex-grow: 999;
	text-decoration: none;
}
.postBlock .postPreview {
	overflow: hidden;
}
.postBlock header {
	text-align: center;
	letter-spacing: initial;
}
.postBlock header, .postBlock .postTags {
	background-color: var(--warmGray);
	padding: 0.3rem 1rem;
}
.postBlock header>.postDate {
	display: block;
	font-size: 0.8em;
	font-weight: initial;
	letter-spacing: initial;
}
.postBlock header, .postBlock .postPreview p {
	text-decoration: none;
	color: inherit;
}
.postBlock .postPreview p {
	overflow-wrap: break-word;
	padding: 0.5rem 0.5rem 0;
}
.postBlock .postTags {
	font-size: 0.8em;
	list-style: none;
}
.postBlock .postTags>li {
	display: inline-block;
}
.postBlock .postTags>li:not(:only-of-type):not(:last-of-type):after {
	content: ",";
	display: inline-block;
	margin: 0 0.5em 0 0;
}
.postBlock header, .postBlock .postTags, .postBlock p {
	margin: 0;
}
/* BITS PAGE */
#resourceTable td:first-of-type {
	text-align: center;
}
#resourceTable th:first-of-type, #resourceTable td:first-of-type {
	max-width: 88px;
}
#resourceTable td:first-of-type img {
	display: block;
	margin: auto;
	font-size: 0.9em;
}