
html{
	background: var(--htmlColor);
}
html,
textarea{
	font-family: sans-serif;
}
h1, h2, h3, h4, h5, h6, hr{
	margin: 0;
}
#boardHeader{
/*	position:sticky;
	top:0;
	z-index:100;*/
	padding: 0 2px;
	background: var(--boardHeaderBackground);
	overflow: hidden;
}
#boardHeader h1{
	display: inline;
	font-size: 40pt;
	line-height: 0.9em;
}
#boards{
	margin:0;
}
#boardHeader ul{
/*	font-size: 20pt;
	line-height: 0.95em;
	text-align: right;
	margin: 0;  */
	font-size: 20pt;
	line-height: 0.95em;
	text-align: left;
	padding: 0px 40px 0px 0px;
	margin: 0;
}
#boardHeader a{
	text-decoration: none;
	color: black;
}
#boardHeader a:hover{
	text-decoration: underline;
	text-decoration-thickness: 3pt;
}
#boardHeader li{
	display: inline;
}
#boards li::before,
#boards li:last-child::after{
	content: "/";
}
/*	End header stuff... */
.catalog{
	background: var(--boardMainBackground);
	margin: 2px;
	padding: 2px;
	padding-left: 1%;
	
	display: grid;
	gap: 1%;
	grid-template-columns: 24% 24% 24% 24%;
}
.blurb{
	line-height: 0.95em;
	margin: 20px 0 0;
}
.catalogPost{
	position: relative;
	overflow-wrap: anywhere;
	text-decoration: none;
	line-height: 0.9em;
}
.catalogPost:hover,
.catalogPost:active{
	background: var(--boardMainAccent);
}
.catalog .dataContainer{
	display: flex;
	flex-direction: row;
}
.catalog .postData{
	position: absolute;
	margin: 0;
	padding: 4px;
	box-sizing: border-box;
	min-width:100%;
	font-size: 20px;
	color: var(--boardMainBackground); 
	font-weight:bold;
	
	text-shadow:
	0 calc( 0.05em * 6) 	0 	var(--boardMainAccent),
	0 calc( 0.05em * 5)		0 	var(--boardMainAccent),
	0 calc( 0.05em * 4) 	0	var(--boardMainAccent),
	0 calc( 0.05em * 3)		0 	var(--boardMainAccent),
	0 calc( 0.05em * 2) 	0	var(--boardMainAccent),
	0 calc( 0.05em * 1)		0 	var(--boardMainAccent);
}
.catalog .replyPrompt{
	display: flex;
	flex-direction: column;
	align-items: end;
	bottom: 0;
}
.catalog img{
	max-width:100%;
}
.thread{
	padding-left: 8px;
	background: var(--boardMainAccent);
	
	margin: 2px;
}
.post, #replyModule{
	margin: 2px;
}
.post{
	position: relative;
	display: flex;
	flex-direction: row;
	background: var(--boardMainBackground);
	
	border: 0px 0px 1px solid black 1px solid black;
}

.subject{
	font-weight: bold;
}
.postImageContainer{
	float: left;
	padding: 2px 2px 0px 0px;
	position:relative;
	z-index: 10;
}
.postImage{
	max-width:100%;
}
.postImage.expanded{
	max-width: 100%;
}
.interWindow .fileName{
	display: none;
}
.postData{
	width: 90px;
	min-width: 90px;
	max-width: 90px;
	margin: 0 2px;
	font-size: 12px;
}
.dataContainer{
	/*max-width: 0;*/
	display: flex;
	flex-direction: column;
	text-decoration: none;
}
.fileName{
	word-wrap: anywhere;
}
.postOptions{
/*position: absolute;*/
	top: 4px;
	left: 4px;
}
.postBody p{
	white-space: break-spaces;
}
.signature{
	font-weight: bold;
	color: var(--boardMainAccent);
	/*white-space: nowrap;*/
}
.anon{
	color: var(--replyModuleBackground);
	font-weight: bold;
}
.green{
	color: var(--replyModuleBackground);
}
.warning{
	font-size: var(--fontInfo);
	color: var(--boardHeaderBackground);
}
#replyPop{
	font-size: 16pt;
}
#replyModule.fixed,
#replyPop{
	position: fixed;
	bottom: 4px;
	right: calc( var(--pageCrop) + 4px);
	z-index: 100;
}
.interWindow{
	position: relative;
	z-index: 100;
}
.interWindow,
.interWindow *{
	gap: 4px;
	font-size: 10pt;
}
.interWindow textarea{
	width:100%;
	resize: none;
	box-sizing: border-box;
}
.hidden:not(menu){
	display: none;
}
button,
.fakeButton,
select,
input,
textarea{
	/*font-size: calc( var(--fontPostSignature) - 4pt );*/
	color: var(--boardMainBackground);
	box-sizing: border-box;
	border-radius: 0;
	border-style: solid;
	border-color: var(--replyModuleAccent);
	font-weight: normal;
}
button,
.fakeButton,
select{
	padding: 6pt 16pt;
	text-transform: lowercase;
	font-style: italic;
	background: var(--replyModuleBackground);
	border-width: 0 2px 2px 0px;
}
select:disabled{
	color: var(--boardMainAccent);
}
button:hover,
.fakeButton:hover,
select:hover{
	background: var(--boardMainBackground);
	color: var(--replyModuleBackground);
}
select.disabled{
	pointer-events: none;
}
input,
textarea{
	padding: 6pt 10pt;
	background: var(--replyModuleExtra);
	border-width: 2px 0 0 2px;
}
#anonCheck{
	padding: 6pt 10pt;
	background: var(--boardMainBackground);
}
#anonCheck label{
	padding: 2px;
}
#filenameContainer{
	padding: 6pt 10pt;
	color: var(--boardMainBackground)
}
/* Mobile Styling */
@media screen and (max-width:640px) {	
	#boardContainer{
		padding-bottom: 38pt;
	}
	.catalog{
		grid-template-columns: 32% 32% 33%;
	}
	.post{
		flex-direction: column;
	}
	.postImageContainer:has(img:not(.expanded)){
		max-width: 35%;
	}
	.postBody p{
		position:relative;
		z-index: 5;
	}
	.postData{
		display: flex;
		flex-direction: row-reverse;
		position:relative;
		z-index: 0;
		width:initial;
		max-width: initial;
	}
		.dataContainer{
			flex-direction: row-reverse;
		}
			.postData{
			}
				.fileName{
					flex-grow: 1;
					position: relative;
					z-index: 5;
				}
				.id{
					position: absolute;
					right: 6pt;
					z-index: -1;
					font-size: 24pt;
					font-weight: bold;
					font-style: italic;
					color: var(--boardMainBackground);
					letter-spacing: -0.15em;
					line-height: 1.3em;
					text-shadow: 0 2pt var(--boardMainAccent), 0 4pt var(--boardMainAccent), 0 6pt var(--boardMainAccent);
				}
}
@media screen and (max-width: 1080px) {
	#headerInfo{
		padding-right: 86px;
	}
}