::-webkit-scrollbar
{
	width:0px;
}

body
{
	background:gray;
	color:black;
	font-size:20px;
	font-family:Calibri,sans-serif;
}

html
{
  	scroll-behavior:smooth;
}

img
{
	width:90%;
	padding:5px;

	/* for responsive design */
	max-width:90%;
  	height:auto;
}

video
{
	width:50%;
	margin-top:100px;
	border:5px solid red;
}

a
{
	color:black;
	text-decoration:none;
  	white-space:nowrap;
}

a:hover
{
	color:white;
}

h1
{
	margin-left:10px;
  	white-space:nowrap;
}

h2
{
	margin-left:10px;
  	white-space:nowrap;
}

h3
{
	margin-left:10px;
  	white-space:nowrap;
}

li
{
	margin-left:20px;
}

.left_index
{
	background:gray;
	text-align:left;
	position:fixed;
  	top:10px;
  	left:10px;
  	width:30%;
  	overflow-x:hidden;
	overflow-y:scroll;
	min-height:100%;
	max-height:100%;
}

.left
{
	background:gray;
	text-align:left;
	position:fixed;
  	top:10px;
  	left:10px;
  	width:30%;
  	overflow-x:hidden;
	overflow-y:scroll;
  	min-height:100%;
	max-height:100%;
	background-repeat:no-repeat;
	background-position:right;
}

.right
{
	background:white;
	text-align:center;
	position:absolute;
  	top:10px;
  	right:10px;
  	width:70%;
  	overflow-x:hidden;
  	overflow-y:scroll;
}

.videoContainer
{
	background:transparent;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	position:fixed;
	text-align:center;
	display:none;
	z-index:1;
}

.white_to_black
{
	color:white;
}

.white_to_black:hover
{
	color:black;
}

.click
{
	border:5px solid transparent;
	cursor:pointer;
}

.click:hover
{
	border:5px solid red;
}