.BackgroundImage{
	background-image: url("../images/VideoPageImages/wallpaperflare.com_wallpaper.jpg");
	background-repeat: no-repeat;
	background-size: auto;
	background-position: top;
	overflow-x: hidden;
	overflow-y: auto;
}

header{
	height: auto; 
	overflow: hidden;
	background-color: black;
	border-bottom: thin solid white;
}

header p{
	position: relative;
	top: 10px;
	font-family: Blackadder ITC;
	display: inline;
	color: white;
	font-size: 55px;	
	padding-left: 25px;
}

ol.Navigation{
	position: relative;
	float: right;
	padding-right: 2vw;
}

ol.Navigation li{
	float: left;
	list-style-type: none;
	height: auto;
	padding-left: 25px;
	padding-right: 35px;	
	background-color: rgb(30 30 30);
	border: 2px solid rgb(10 10 10);
}

ol.Navigation li:hover{
	border: thin solid white;
	background-color: black;
}

ol.Navigation li a{	
	display: block;
	text-decoration: none;
	font-size: 15px;
	margin:-5px 0px;
	text-align: center;
	color: white;
}

ol.Navigation li a:active{
	color: red;
}

.NavImg{
	display: inline;
	float: left;
	padding: 7px;
	background-color: black;
	margin: 0 -25px;
	height: 25px;
}

.NavImg img{
	height: 20px;
	width: 20px;	
}

.NavRef{
	float:right;
	padding-left: 30px;
}

pre{
	font-family: Stencil;
}
.VideoAndDescriptionMainContainer{
	position: absolute;
	height: 70%; 
	padding-top:10px;
	width: 100%;
}

.LeftTextContainer{
	display: inline;
	float: left;
	border: thin solid white;
	width: 26%;
	height: 100%;
	background-color: black;
	overflow-y: auto;
}

.LeftTextContainer p{
	color: white; 
	word-wrap: break-word; 
	padding: 25px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 20px;
	font-family: Garamond;
}

.Topic{
	font-family: Blackadder ITC;
	color: white;
	font-size: 40px;
	text-align: center;
}

.VideoContainer{
	display: inline;
}

.VideoStyle{
	display: inline;
	margin: auto;
      width: 49vw;
	min-width: 90px;
      max-height: 45vw;
      height: 80%;
	min-height: 200px;
	padding: 10px;
	padding-top: 0;
      background-image: linear-gradient(to bottom, transparent, rgb(10 10 10), transparent);	
}

.IconsTable{
	position: absolute;
	padding-left: 50%;
}

 .RotateLeft{
	-ms-transform: rotate(7deg); /* IE 9 */
 	-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
 	transform: rotate(7deg);
	padding-left: 10px;
}

.RotateRight{
	-ms-transform: rotate(-7deg); /* IE 9 */
 	-webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
 	transform: rotate(-7deg);
	padding-left: 10px;
}

.VideoIcons{
	width: 60px;
	height: 60px;
	display: inline;
}

.RightTextContainer{
	display:inline;
	border: 2px solid transparent;
	border-bottom: thin solid white;
	float:left;
	width: 22%;
	height: 100%;
	background-color: black;
	overflow-y: auto;
	direction: ltr;
}

@supports (backdrop-filter: blur(0.5rem)){
	.RightTextContainer{
		background-color: transparent;
		backdrop-filter: blur(0.5rem);
	}
	.LeftTextContainer{
		background-color: transparent;
		backdrop-filter: blur(0.5rem);
	}
}

.RightTextContainer p{
	color: white; 
	word-wrap:break-word; 
	padding: 25px;
	padding-top:15px;
	padding-bottom:15px;
	font-family: Garamond;
	font-size: 20px;
}

@media (max-width: 85em){
		.RightTextContainer{
			position: absolute;
			float:right;
			width:20% ;
			height: 98%;
			padding-right:5px;		
			border: thin solid white;
		}

		.FlippedScrollBar{
			direction: rtl;
	}
}

@media (max-width: 48em){
	ol.Navigation li{
		float: none;
		padding: 0;		
	}
	.NavRef{
		float: none;
		padding-top:2px;
	}
	.NavImg{
		margin: 0px 0px;
	}
	.NavImg img{
		float: right;		
	}
	ol.Navigation li{
		width: 200px;
	}	
	.IconsTable{
		padding: 0;
		padding-left: 30%;
	}
}

footer{
	position: relative;
	bottom: 0;
	text-align:center; 
	font-size:20px; 
	color:white; 
	height: auto;
	width: 100%;  
	background-color: rgb(2 2 2); 
	border-top: 1px solid white;
	overflow: hidden;
}

table{
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 5px;
}


a.FooterNavigation:hover{
	color: lightblue;
	font-size: 15px;
}

a.FooterNavigation:active{
	color: red;
}

a.FooterNavigation{
	text-decoration: none;
	color: white;
	font-size: 15px;
}

a.FooterNavigation pre{
	font-family: Perpetua Titling MT;
}


/*Scrollbar styling*/
.LeftTextContainer::-webkit-scrollbar-track{
	background: white;
	border-radius: 6px;
}

.LeftTextContainer::-webkit-scrollbar{
	width: 10px;
}

.LeftTextContainer::-webkit-scrollbar-thumb{
	background-color: black;
	border-radius: 6px;
	border: 2px solid white;
}

.RightTextContainer::-webkit-scrollbar-track {
	background: white;
	border-radius: 6px;
}

.RightTextContainer::-webkit-scrollbar {
	width: 11px;
}

.RightTextContainer::-webkit-scrollbar-thumb {
  background-color: black;
  border-radius: 6px;
  border: 2px solid white;
}