/* Mobile horizontal sidebar under header */
@media (max-width: 768px) {
	/* make header fixed and compact */
	header {
		position: fixed !important;
		width: 100% !important;
		top: 0;
		left: 0;
		right: 0;
		padding: 0.5rem 0 !important;
		z-index: 100;
		background: linear-gradient(rgb(123,37,37), rgba(0,0,0,0.0));
	}
	header ul {
		display: flex;
		gap: 0.5rem;
		padding: 0.4rem 0.6rem;
		margin: 0;
		align-items: center;
		justify-content: space-evenly;
	}

	/* horizontal, scrollable sidebar directly under header */
	#sidebar {
		position: fixed !important;
		top: 56px !important; /* header height */
		left: 0 !important;
		height: 56px !important;
		width: 100% !important;
		display: flex !important;
		align-items: center;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		white-space: nowrap !important;
		background: rgba(0, 0, 0, 0) !important;
		z-index: 90 !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* make list inline and scroll horizontally */
	#sidebar ul {
		display: inline-flex !important;
		flex-direction: row !important;
		gap: 0 !important;
		padding: 0 0.25rem !important;
		margin: 0 !important;
	}

	#sidebar li {
		display: inline-flex !important;
		align-items: center;
		flex: 0 0 auto !important;
		padding: 0.5rem 0.9rem !important;
		margin: 0 !important;
		border-bottom: none !important;
		border-right: 1px solid rgba(255,255,255,0.08) !important;
		white-space: nowrap !important;
	}

	/* keep sub-panels collapsed */
	#sidebar li > div { display: none !important; }

	/* push main content below header + sidebar */
	main {
		display: block !important;
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		max-width: 100vw !important;
		max-height: 100vh	!important;
		padding: 1rem !important;
		margin: 0 !important;
		padding-top: calc(56px + 56px + 0.5rem) !important; /* header + sidebar + small gap */
		/* overflow: scroll !important; */
	}

	main > div {
		position: relative !important;
		width: 100% !important;
		left: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
		z-index: 2 !important;
		padding: 1rem !important;
	}

	/* keep video in background */
	video {
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		z-index: -1 !important;
	}

	#blog-main {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	
		.blog-post{
			/* width: 100vw !important; */
			margin: 0	!important;
		}
	}
}