/* scrollbar */
::-webkit-scrollbar
{ width: 0.8rem; height: 8px; }
::-webkit-scrollbar-thumb
{ background: var(--fg2); border-radius: 0px; }
* { scrollbar-color: grey transparent; scrollbar-width: thin; }
main { scroll-behavior: instant; }
main.smooth { scroll-behavior: smooth; }

/* sidebar scrollbar */
#sidenav { padding-right: 0.75rem; }
@-moz-document url-prefix() {
	#sidenav { padding-right: 6px; }
}
/* #sidenav::-webkit-scrollbar-thumb { background: var(--bg1); border-radius: 0px; } */

/* opacity load */
/* #sidenav:not(.loaded) { opacity:0; } */
/* #sidenav.loaded { opacity:1; } */
#sidenav { opacity:1; }

/* fix unresponsive mobile touch click */
html { touch-action: manipulation;
-ms-touch-action: manipulation; }

/* fix iphone weird font size unconcistency */
html { -webkit-text-size-adjust: none; }

/* prevent mobiles from interpreting identifier as phone number */
td { pointer-events: none; }
td > a { text-decoration:none; color:inherit; }

/* enable 3d acceleration to prevent animation lag on mobile */
#sidebar { transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0); }
/* doesnt seems to work in this version ? */

/* this seems to fix most of iphones refresh instead of scroll down */
html, body { touch-action:none; overscroll-behavior-y: none; }
#sidebar, #sidetop, #sidetog, #sidenav
{ touch-action:none; -webkit-overflow-scrolling: touch; }

/* headers anchor link */
.anchor-link {
	position: relative;
	left: -0.4ex;
	font-size: 2.4ex;
	vertical-align: text-top;
	text-decoration:none;
	user-select: none;
	opacity:0; 
	transition: opacity .2s ease;
}
h1, h2, h3, h4, h5 {
	text-indent: -1.4ex;
}
h1:hover > .anchor-link,
h2:hover > .anchor-link,
h3:hover > .anchor-link,
h4:hover > .anchor-link,
h5:hover > .anchor-link {
	opacity:1; 
}

/* ~= SQUARE SCREEN */
@media screen and (max-aspect-ratio: 4.5/3 ) {
	main {
		padding: 0 5vw;
	}
	.folded main {
		padding: 0 16vw;
	}
}

/* VERTICAL SCREEN */
@media screen (orientation:portrait),
screen and (max-device-aspect-ratio: 2/3) and (orientation:portrait),
screen and (max-aspect-ratio: 1) {
	.folded main {
		padding: 0 6vw;
	}
	main{
		width: 84vw;
		padding-left:0;
		padding-right:6vw;
	}
	#main-container:not(.folded) {
		margin-left: 6vw;
	}
	#main-container {
		transition: margin-left .2s;
	}

	/* invisible button on mobile to toggle sidebar */
	#sidetogmobile {
		height:100vh;
		width:100vw;
		position:absolute;
		z-index:1;
		/* background-color:purple; */
	}
	.folded + #sidetogmobile {
		width:8vw;
	}
	#sidebar {
		z-index:2;
	}

	#sidebar {
		flex: 0 0 80vw ;
		transition: flex .25s;
	}
	#sidebar.folded {
		flex: 0 0 4vw;
	}
}