:root {
	--bg-color: rgba(249, 249, 249, 255);
	--nav-font-size: 1em;
	--nav-bar-height: 7em;
	--content-height: calc(100vh - var(--nav-bar-height));
	--text-color-heavy-black: black;
	--text-color-normal-black: rgb(52, 52, 52);
	--text-color-light-black: rgba(103, 103, 103, 255);
	--text-color-orange: #ff8836;
	--conten-transition: left 0.75s ease-in-out;
}

* {
	margin: 0 0;
	padding: 0 0;
	box-sizing: border-box;
}

main {
	display: flex;
	position: relative;
	width: 100%;
	height: 100vh;
	justify-content: center;
	align-items: center;
	background-color: var(--bg-color);
	font-size: 1vw;
	z-index: 0;
	overflow: auto;
	overflow-x: hidden;
}

.content-on-show {
	position: absolute;
	top: 0;
	left: 0;
	/* transform: translate(-50%, -50%); */
	transition: var(--conten-transition);
}

.content-on-left {
	position: absolute;
	top: 0% !important;
	left: -150% !important;
	/* transform: translate(-50%, -50%); */
	transition: var(--conten-transition);
}

.content-on-right {
	position: absolute;
	top: 0% !important;
	left: 150% !important;
	/* transform: translate(-50%, -50%); */
	transition: var(--conten-transition);
}

::-webkit-scrollbar {
	width: 2px;
	background-color: #000000;
	border: 2px solid #555555;
	border-radius: 10px;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color: white;
	border-radius: 1px;
}

::-webkit-scrollbar-thumb {
	background-color: #000000;
	border: 2px solid #555555;
	border-radius: 10px;
}