@font-face {
font-family: 'TablerIcons';src: url('tabler-icons.woff2') format('truetype');
}

:root {
	--yellow: #4a5036;
}

body
{
	font-family: sans-serif, 'TablerIcons';
}

.tp-nav {
display:none;
}

.post-image-wrapper {
	position: relative;
	width: 100%;
	padding-top: 52.36%;
	overflow: visible;
}


.post-image {
	object-fit: contain;
	padding: 5px;
}
.post-link {
		text-align: center;
	width:100%;
}

.post-postcontent {
	text-align: center;
}

.post-postcontent .post-img img {
	width: 192px;
}
.post-postcontent  img {
	width: auto;
}

.postlist ul {
	list-style: none;
}

.postlist {
	position: relative;
	/* right: 32px; */
	background-color: #1a1a1a;
	border-radius: 16px;
	width: fit-content;
}

.post {
	margin: 0vw 2vh 2vh 2vh;
	align-items: center;
}

.postlist ul li ul {
	position: relative;
	right: 24px;
}


ul li ul li {
	list-style-type: disc;
	list-style-position: outside;
	margin-left: 1em;
	padding-left: 0;
}

#left-container {
	width: min-content;
	padding: 0px 0vw 0px 0vw;
	background-color: var(--black);
	border-radius: 0px;
	margin: 0vh 3vh 0vh 0vw;
	height: 100vh;
	position: sticky;
	top: 0;
	align-self: flex-start;
}

.sidebar {
	position:sticky;
	top: 48px;
}

.search-box {
	display: flex;
	width: 90%;
	margin: 0 auto;
	flex-direction: column;
	margin: 2vh auto -2vh auto;
}

.userbox a {
	padding-top: 0;
	border-top: none;
}

.post-postdate h3 {
	position: relative;
	top: -1rem;
	margin-bottom: 1rem;
	color: var(--grey1);
	display: none;
}

li strong {
	opacity: 60%;
}

td, th {
	word-wrap: break-word;
	word-break: break-word; 
	word-break: auto-phrase;
	white-space: normal;
}

.sections-container {
	width: 90%;
	display: grid;
	gap: 1rem;
	padding: 2vh 2vw 2vh 0vw;
	align-content: start;
	justify-items: center;
}

.sections-container h1{
margin: 0px
}

.posts-container {
	width: 90%;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
	padding: 2vh 2vw 2vh 0vw;
	align-content: start;
}

.post-card:hover {
	transform: translateY(-5px);
	background-color: var(--yellow);
	color: inherit;
}
.post-title {
		margin: 0;
		font-size: 1.3vw;
		color: var(--fg);
}

.rp-banner a {
	display: flex;
	justify-content: center;
	align-items: center;
}

.rp-banner img {
	display: block;
	max-width: 100%;
	height: auto;
}

.toppanel {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px;
	background-color: var(--black);
	height: 3rem;
	gap: 16px;
	position: sticky;
	top: 0px;
	z-index: 10;
}

.tp-start {
	display: flex;
	justify-content: space-between;
	padding-left: 12px;
}

.tp-start a {
	font-size:1.4rem;
	color: var(--fg);
}
.tp-start a:hover {
	color: var(--green);
}


#main-container {
	display: flex;
	padding-top: 0rem;
	width: 100%;
	justify-content: left;
	height: 100%;
}

hr.endseparator {
	margin-left: auto;
}

.btnshare {
	display: flex;
	justify-content: center;
}

.image-gallery {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 2px;
	justify-content: center;
	place-items: center;
}

.image-gallery img {
	height: 20vw;
	object-fit: contain;
	display: block;
	justify-self: center; /* center each image in its column */
}

.burger-lp::before {
	content: "\ec42"; /* same as  */
	font-family: 'TablerIcons';
	font-size: 32px;
	color: var(--fg);
	cursor: pointer;
	transition: 0.3s ease;
	display: inline-block;
	line-height: 1;
}

@media only screen and (max-aspect-ratio: 1/1) {

	.burger-lp {
		display:none;
	}

	.tp-nav {
	display:block;
	}

	.toppanel {
		justify-content: space-between;
		gap: 0px;
	}
	#posts-container {
		width: 100%;
		display: none;
		gap: 0;
		grid-template-rows: max-content;
		padding: 0px 0vw 0vw 3vw;
	}

	#left-container {
		width: 0px;
		padding: inherit;
		text-align: center;
		display:none;
	}

	.postlist {
		position: relative;
		right: 0px;
		text-align: left;
		width: 90%;
		margin: auto;
	}
	.posts-container {
		grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
	}
	.post-title {
		font-size: 2.7vw;
	}

	.badgesb {
		gap: 24px;
		flex-direction: column;
		white-space: nowrap;
	}

	.image-gallery img {
		height: inherit;
		width: 90vw;
	}