@media screen and (max-device-width: 768px) {

.desktop {
	display: none;
}

.banner-container {
	height: 50vh;
}

main,
.post-list,
.center-content {
	width: 90vw;
	padding: 1em 4vw 1em;
	margin-top: 4em;
}

main.post-content {
	font-size: 0.6rem;
}

main p,
main code,
main pre,
main blockquote,
main li,
main strong,
main b,
main del,
main a {
	font-size: 1rem;
}

main h1 {
	font-size: calc(1.6 * 1rem);
}

main h2 {
	font-size: calc(1.45 * 1rem);
}

main h3 {
	font-size: calc(1.35 * 1rem);
}

main pre {
	font-size: calc(0.8 * 1rem);
}

main p,
main pre,
main h1,
main h2,
main li {
	line-height: 1.6em;
}

main li {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

main img {
	width: 100%;
}

.center-text {
	width: 90%;
	max-width: 90%;
}

.center-text h1 {
	margin: 0 auto;
	font-size: 1.7em;
	line-height: 1.1em;
}

.center-text .desc {
	margin-top: 0;
}

article a {
	font-size: 1.3em;
	line-height: 1.2em;
}

header h2 {
	font-size: 1.15em;
}

header .blog-name {
	display: none;
}

header.show-title:not(.homepage) h2.blog-name {
	color: #0000! important;
}

header.show-title h2.post-title {
	left: 2.9em;
	width: calc(100vw - 6em);
}

header h2.post-title::before {
	display: none;
}

header nav {
	display: none;
}

/* show menu */

header .mobile.btn {
	height: 2em;
	margin: 0.5em 0;
	mix-blend-mode: difference;
}

aside .mobile .btn {
	color: var(--txt-main-clr);
	font-size: 1.6em;
	line-height: 2rem;
	margin: 0.5rem 0;
}

#right-bar .mobile {
	color: var(--txt-main-clr);
	display: flex;
}

#right-bar .mobile .toc-title {
	font-size: 1.4em;
	line-height: 3rem
}

#right-bar .mobile .btn {
	margin-left: auto;
}

header #menu-btn {
	position: absolute;
	margin-left: -1.2em;
	padding-right: 3em;
}

header #toc-btn {
	display: inline-block;
	margin-left: auto;
	padding-right: 1em;
}

aside {
	position: fixed;
	top: 0;
	z-index: 4;
	width: 70%;
	background-color: var(--side-menu-bg-clr);
	backdrop-filter: blur(6px);
	padding: 0 1em;
}

aside::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	z-index: -1;
	width: 30vw;
	height: 100vh;
	transform: none;
	transition: transform 0.3s ease-in-out;
}

#left-bar::before {
	right: 0;
	background: linear-gradient(to right, var(--side-menu-shadow-clr), #0000);
}


#left-bar.show-menu::before {
	transform: translateX(100%);
}

#right-bar::before {
	left: 0;
	background: linear-gradient(to left, var(--side-menu-shadow-clr), #0000);
}

#right-bar.show-menu::before {
	transform: translateX(-100%);
}


.sidebar-content {
	position: relative;
	top: 0;
	left: 0;
}

html {
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: visible;
}

#left-bar {
	left: calc(-100%);
	transition: left 0.3s ease-in-out;
}

#left-bar.show-menu {
	left: 0;
}

#right-bar {
	right: calc(-100%);
	transition: right 0.3s ease-in-out;

}

#right-bar.show-menu {
	right: 0;
}


}

@media screen and (min-device-width: 768px) {

.mobile {
	display: none;
}

#left-bar.show-title hr {
	border-color: transparent;
}

}