:root {
	--bg: #1a1a1a;
	--fg: #ccc;
	--grey1: #999;
	--bg2: #2a2a2a;
	--black: #1a1a1a;
	--red: #a66966;
	--green: #43A64F;
	--yellow: #a69c66;
	--blue: #6677a6;
	--magenta: #9a66a6;
	--cyan: #66a6aa;
	--accent: var(--green);
	--accentfg: var(--bg);
	--accenthv: var(--grey1);
	font-size: 16px;
}

code {
	background-color: var(--bg2);
}
#mirrorlist
{
	white-space: pre-wrap;
	display: block;
	background-color: var(--bg2);
	padding: 5px;
	font-family: monospace;
	border-radius:12px;
}

.tp-nav a {
	padding: 5px;
	border-radius: 15px;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.tp-nav a:hover {
	background-color: var(--accent) !important;
	color: var(--bg) !important;
}

.tp-dropdown-elements {
	display: none;
	position: absolute;
	background-color: var(--black);
	min-height: 1.3rem;
	z-index: 1;
	list-style: none;
	padding: 6px;
	border-radius: 16px;
}


#main-container {
	display: flex;
	padding-top: 0px;
	width: 100%;
	justify-content: center;
}

.homecontainer {
	width:100%;
}

.glancewelcome {
	background-color: var(--green);
	padding: 2rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	color: var(--bg);
}

.glance-banner {
	flex: 1;
	height: auto; /* optional */
	max-height: 15rem; /* optional */
}


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

.toppanel {
	justify-content: flex-start;
	padding: 15px 15px 15px 0px;
}

.tp-banner {
	height: 3rem;
}

.glance-container {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
	gap: 2vw;
	padding: 0 0 0 0vw;
}
.features-container {
	width: 90%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(22%, 1fr));
	gap: 2vw;
	margin: 2rem auto;
}

.glance-condensed {
	display: inline-flex;
	gap: 5px;
}
.glance-condensed img {
	width: 1rem;
	 height: auto;
}
.glance-condensed code {
	color: var(--fg);
	padding: 5px;
}

.glance-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: 
		transform 0.3s ease,
		width 0.3s ease,
		color 0.3s ease,
		box-shadow 0.3s ease;
	background-color: var(--accent-bg);
	justify-content: space-between;
}
.glance-card:hover {
	transform: translateY(-5px) scale(1.05);
}

.post-info * {
	color: var(--fg) !important;
	text-align: center;
}

.post-card {
	background-color: var(--bg2);
}

.chapter-sections-container {
	width: 100%;
	display: grid;
	gap: 1rem;
}

.glance-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ft-image {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	height: 90%;
	object-fit: contain;
	transform: translate(-50%, -50%);
}



.glance-image-wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100%) */
	/* padding-top: 75%; /* 4:3 aspect ratio (9 / 16 * 100%) */
	/*padding-top: 52.36%; /* 1.91:1 aspect ratio (OG:Image standard) */
	overflow: hidden;
}


.sflogo * {
	width:25%;
}

.sflogo  {
	display:flex;
	flex-direction: row-reverse;
}

.aboutpage img:not(.userpic)
{
	width: 30%;
}
.aboutpage p
{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 5px;
}


input[type="text"] {
	background-color: var(--bg2);
}
#left-container .search-input {
		display:none;
}


@media only screen and (max-width: 768px) and (max-aspect-ratio: 1/1)
{
	.dropdown-checkbox:checked + label + .tp-dropdown-elements {
		display: block;
	}
	#left-container .search-input {
		display:block;
	}
	.features-container, .glance-container {
		grid-template-columns: repeat(auto-fill, minmax(90%, 1fr));
		gap: 1rem;
	}
	.toppanel {
		justify-content: space-between;
		padding: 15px 15px 15px 10px;
		display: flex;
		flex-direction: row-reverse;
	}

	.glance-condensed {
		display: inline-flex;
		gap: 1rem;
		flex-direction: column;
		font-size: 2rem;
	}
	.glance-condensed img {
		width: 2rem;
		height: auto;
	}
}