/**CSS PAGE for my index page*/

body {
	background-color:#232F3E;
	margin:0 ;
}
.bar {
	border:1px solid white;
}
.logo {
	border-radius:10px;
	margin-inline:5px;
	margin-bottom:-35px ;
}
.searchbox {
	font-size:80%;
	height:40px ;
	background:lightgrey;
	border:none;
	border-color: #fff;
	padding:8px;
	border-radius:5px;
}
.amazonlg {
	font-size:80%;
	width:50%;
	border-color: #fff;
	padding:8px;
	border:none;
	margin-left:-7px ;
	height:40px; 
}
.sbox {
	height:40px ;
	margin-left:-30px;
	margin-bottom:-16px;
	border-radius:5px ;
	background:#FEBD69;
}
#searchbx {
	padding:20px ;
	margin-top:-40px ;
	padding-left:90px ;
}
 a {
 	text-decoration:none;
 	display:inline-block;
 	margin-right:50px;
 	color:white;
 	font-size:100% ;
 	font-family:Arial;
 	font-weight:bold;
 }

 a:hover {
	border-bottom:2px solid white ;
	color:linen;
	transition:.7s ease;
	border-radius:3px ;
 }
#topnav {
	background:darkblue;
	padding:8px ;
	border:5px;
	overflow:hidden;
 }
.topnavi2 {
	background:#2f42fB;
	text-decoration:none;
	font-size:14px ;
	padding:10px 12px 10px 12px ;

}
.video-container {
		position:relative;
		display:flex;
		align-items:center;
		justify-content:center;
		height:80vh;
		overflow:hidden ;
		background-image:linear-gradient(0deg,rgba(0,0,0,70%),rgba(0,0,0,70%)), ;

	}
	video {
		position:absolute;
		z-index:2;
		width:100%;
		height:120vh;
		max-width:none;
		background:black;
		opacity:0.5;
	}
	.overlay-content {
		background-color:none;
		position:absolute;
		z-index: 2;
		text-align:left;
		width:100% ;
		padding:10px;
		font-family:Arial;
		display:flex;
		align-content:left;
		top:2px ;
		justify-content:!important;
	}


	button {
		padding:10px 20px;
		border-radius:10px;
		color:white;
		background-color:darkblue;
		border:none;
		font-size:14px;
		cursor:pointer;
	}
.upra:hover {
	background: rgba(255, 255, 255, .05);
	color:white;

}
.upre:hover {
	background:white;
	color:darkgray;
}
.uper:hover{
	background:#131A22 ;
}
.uper {
	padding:6px;
	color:#131A22;
	border-radius:2px ;
	opacity:0.9;
}
.upre{
	background:linear-gradient(to right, darkgray, white, grey) ;
	box-shadow:rgb(0, 0, 0, 1.0) ;
	padding:6px;
	color:#131A22;
	border-radius:2px ;
	opacity:0.9;
}
.upra {
	padding:6px;
	color:white;
	border-radius:2px ;
	opacity:0.9;
}
 .select {
 	margin-left:50px;
 	margin-bottom:-8px;
 }
 	.mini{
		color:white;
		text-decoration:underline;
		font-family:Tahoma ;
		padding:1px ;
		font-size:18px ;
		font-weight:bold;
		background-image:url(imgs/netflix2.jpg) ;
		border-right:3px solid black ;
		border-left:3px solid black ;
		width:100% ;
		text-align:center ;
	}
	.mid-content {
		width:100%;
	}
	.fourth {
		border:8px ;
		float:right;
		width:20%;
		padding:30px ;
		background:darkblue;
		box-shadow:inset 0 .5em 1.5em rgba(5, 0, 5, .1), inset 0 .125em .5em rgba(5, 0, 5, .15);
	}
	.fifth {
		border:8px ;
		float:left;
		width:20%;
		padding:30px ;
		background:darkblue;
		box-shadow:inset 0 .5em 1.5em rgba(5, 0, 5, .1), inset 0 .125em .5em rgba(5, 0, 5, .15);
	}
	.third {
		border:8px ;
		float:right;
		width:20%;
		padding:30px ;
		background:darkblue;
		box-shadow:inset 0 .5em 1.5em rgba(5, 0, 5, .1), inset 0 .125em .5em rgba(5, 0, 5, .15);
	}
	.sec {
		border:8px ;
		float:left;
		width:20% ;
		padding:30px ;
		background:darkblue;
		box-shadow:inset 0 .5em 1.5em rgba(5, 0, 5, .1), inset 0 .125em .5em rgba(5, 0, 5, .15);
	}
	#float1{
		width:100%;
		box-shadow:inset 0 .5em 1.5em rgba(5, 0, 5, .1), inset 0 .125em .5em rgba(5, 0, 5, .15);
	}
	#float2{
		width:100%;
		box-shadow:inset 0 .5em 1.5em rgba(5, 0, 5, .1), inset 0 .125em .5em rgba(5, 0, 5, .15);
	}

	
	
 	#foot{
		color:white;
		background-image:url(imgs/black.jpg);
		background-repeat:no-repeat;
		background-size:cover ;
		width:100%;
		height:250px;
		margin-top:725px ;
	}
	hr{
		border:1px solid white ;
	}
	#foot p{
		text-align:center;
		font-family:Calibri ;
	}
	.coin {
		margin-left:100px ;
	}
	.trl{
		margin-left:500px ;
	}
	.leftis{
		float:left;
		width: 33.3%; 
		text-align: center;
	}
	.leftis p{
		color:grey ;
		text-align:center;
	}
	.leftus{
		float:right;
		width: 33.3%; 
		text-align: center;
	}
	.leftus p{
		color:grey ;
		text-align:center;
	}
	.leftos{
		float:right;
		width: 33.3%; 
		text-align: center;
	}
	.leftos p{
		color:grey ;
		text-align:center;
	}

 @media screen and (max-width:800px) {
		.left, .main, .right, .topnav, .leftis, .leftos, .leftus, #foot, .topnavi2, .mid-content, .mini, .sec .topnavi3, .upre, .upra, #topnav, a:hover, a, .searchbx, .select, .uper, .overlay-content, .video-container, button, video {
			width:100%;
			float:none;
			display:block;
			 /* the width is 100%, when the viewport is 800px or smaller */
		}
	}
}