@import url("/static/css/common.css");

.wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 1rem;
	min-height: 100vh;
}

.wrapper div {
	padding: 1rem;
	border-radius: 1rem;
}

.wrapper > .sidebar {
	flex: 2;
	background: var(--color-secondary-1);
	height: fit-content;
	z-index: 5;
	overflow-y: scroll;
}

.wrapper > .content {
	flex: 4;
	background: white;

}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.6rem;
}

h3 {
	font-size: 1.2rem;
}

h1, h2, h3, p, ul {
	margin: 1rem auto;
	margin-bottom: 0.5rem;
}

ul {
	margin-left: 2rem;
}

ol li[data-list="bullet"] {
	list-style-type: disc;
	margin-left: 1rem;
}

a#indexbtn {
	display: none;
	position: fixed;
	bottom: 1rem;
	left: -0.5rem;
	background: var(--color-secondary-1);
	opacity: 0.7;
}

.nav-link {
	display: block;
	padding: 5px 0;
	color: #333;
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: bolder;
	margin: 2px 0;
}

.nav-link:hover {
	color: #007bff;
}

.nav-link.active {
	color: #007bff;
	font-weight: bold;
}

.nav-link.h2-item {
	font-size: 1rem;
	font-weight: 600;
}

.nav-link.h3-item {
	padding-left: 1.5rem;
	font-size: 0.8rem;
	font-weight: normal;
}

@media (max-width: 768px) {
	.wrapper {
		display: block;
	}
	.sidebar {
		transform: translateX(-120%);
		position: fixed;
		height: 100vh !important;
		width: 60%;
		top: 0;
		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
	}

	.sidebar.active {
		transform: translateX(-10%);
	}
	a#indexbtn {
		display: block;
	}

	.sidebar.active + a#indexbtn {
		opacity: 100;
		transform: translateX(58vw) rotate(180deg);
	}

	.menu-toggle {
		display: block;
	}

	.sidebar-overlay.active {
		display: block;
	}
}