* {
	margin: 0;
	font-family: "Courier New", Courier, monospace;
	box-sizing: border-box;
	z-index: 1;
}

/* the wall */
#wall {
	display: block;
	position: fixed;
	align-items: center;
	text-align: center;
	width: 100%;
	height: 10%;
	color: #fff;
	z-index: -20;
	background-color: rgb(13, 33, 71);
	font-weight: bolder;
}
/* for the modal that doesnt move at the head of the page */

#modal {
	background-color: rgb(13, 33, 71);
	color: white;
	display: flex;
	position: sticky;
	padding: 20px;
	z-index: 1000;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
	top: 0;
	bottom: 0;
	justify-content: space-between;
}
#modal span {
	font-weight: bolder;
	display: flex;
	align-items: left;
	justify-content: left;
	margin-left: 20px;
}
#modal li {
	display: inline-block;
	list-style: none;
	padding: 0 20px;
	position: relative;
}
#modal li a {
	text-decoration: none;
	color: #fff;
}
#modal li a:hover {
	color: #088178;
}
#modal li a:hover,
#modal li a.active {
	color: #0fb8ac;
}
#modal li a.active::after,
#navbar1 li a:hover::after {
	content: "";
	width: 30%;
	height: 2px;
	background-color: #63b6b0;
	position: absolute;
	bottom: -4px;
	left: 20px;
}

/* media query for hamburger menu */
@media (min-width: 690px) {
	.mobile_nav {
		display: none;
	}
	.hamburger {
		display: none;
	}
}

@media screen and (max-width: 690px) {
	#modal {
		background-color: rgb(13, 33, 71);
	}
	#modal ul {
		display: none;
	}

	#modal .hamburger {
		display: block;
		cursor: pointer;
	}
	.bar {
		color: white;
		cursor: pointer;
		font-size: 28px;
		position: absolute;
		top: 0;
		right: 12px;
		font-weight: bolder;
		cursor: pointer;
		transform: rotate(45deg);
	}
	.mobile_nav {
		position: fixed;
		display: block;
		top: 0;
		left: 100%;
		width: 100%;
		min-height: 100vh;
		z-index: 98;
		padding-top: 120px;
		background-color: rgb(13, 33, 71);
		transition: 0.4s;
		padding-top: 120px;
	}

	.mobile_nav li {
		display: block;
		text-align: center;
		width: 100%;
		margin-bottom: 26px;
		background-color: rgb(10, 14, 22);
		max-width: 120px;
		margin-left: 40%;
		border-radius: 20px;
		color: white;
		cursor: pointer;
	}
	.mobile_nav li:hover {
		background-color: rgb(11, 51, 124);
	}
	li a {
		text-decoration: none;
	}
}
/* on refresh image and the rest */
#featured h1 {
	color: bisque;
}
#featured {
	height: 18em;
	background-image: url(images/wallpaper/wallpaper\ 4\ people.jpg);
	position: relative;
	box-shadow: rgba(0, 0, 0, 1);
	object-fit: cover;
	background-size: cover;
	background-position: center;
	padding: 0 0 0 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#featured:hover {
	background-image: url("https://image.tmdb.org/t/p/original//3lBDg3i6nn5R2NKFCJ6oKyUo2j5.jpg");
}
#featured {
	transition: all 0.9s ease-in-out;
	/* transition-timing-function: ease; */
	/* transition-duration: 5s; */
}

#featured h2 {
	font-size: 4rem;
	color: bisque;
}
#searchbtn {
	width: 100%;
	height: 46px;
	line-height: 46px;
	font-size: 1.1em;
	color: rgba(0, 0, 0, 0.5);
	border: none;
	border-radius: 30px;
	padding: 10px 20px;
	position: relative;
}
#searchbtnn {
	display: inline-flex;
	/* justify-content: center;
        align-content: center;
        align-items: center; */
	height: 46px;
	padding: 10px 30px;
	border: none;
	background-color: rgb(143, 81, 214);
	border-radius: 30px;
	position: absolute;
	/* top: 0; */
	right: -1px;
	color: #fff;
	cursor: pointer;
}

#wrap {
	height: 15em;
	background-image: url(images/2022\ wrap.jpg);
	object-fit: cover;
	color: #0b105f;
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 0 0 0 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
		"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size: larger;
}
#wrap button {
	border-radius: 30px;
	height: 3em;
	padding: 10px 20px;
	width: 10em;
	border-style: none;
	color: #fff;
	background-color: rgba(11, 15, 66, 0.5);
	cursor: pointer;
}

#trending {
	background-image: url(images/wallpaper/zzzzzzzz.svg);
	margin-bottom: 60px;
	color: #020a36;
	position: relative;
	background-color: #fff;
	box-sizing: border-box;
	display: flex;
	width: 100%;
	overflow: auto;
	padding-bottom: 0.7em;
	scroll-snap-type: x mandatory;
}
#popupBox {
	width: 100%;
	height: 100%;
	min-height: 100vh;
	z-index: 2500;
	position: fixed;
	display: flex;
	top: 0%;
	background-color: rgba(13, 33, 71, 1);
}
.popupWork {
	/* background-color: red; */
	cursor: pointer;
}
#vgdesign {
	z-index: 2700;
	background-color: rgb(10, 97, 228);
	border-radius: 0.9em;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: center;
	padding: 1.5rem;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin: auto;
	justify-content: center;
	align-items: center;
}
.barr {
	transform: rotate(45deg);
	font-size: 1.4rem;
	cursor: pointer;
	position: relative;
	left: 5rem;
	z-index: 2700;
	background: none;
	font-weight: bolder;
}

#trend {
	margin-top: 60px;
	color: #08124d;
	font-size: large;
	text-align: left;
	margin-left: 20px;
	font-weight: bolder;
}
.column {
	display: flex;
	/* z-index: 0.9; */
	width: 100%;
	overflow: auto;
	padding-bottom: 0.7em;
	/* position: ; */
	scroll-snap-type: x mandatory;
}

.scroll {
	display: inline-block;
	text-align: center;
	font-weight: bolder;
	position: relative;
}
.scroll img {
	position: relative;
	display: inline-block;
	height: 15em;
	border-radius: 15px;
	margin: 10px;
	cursor: pointer;
	transition: opacity 0.3s ease;
}
.overlay {
	margin: 2px;
	position: absolute;
	border-radius: 5px;
	top: 0;
	left: 0;
	width: 100%;
	height: 75%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0);
	transition: background-color 0.3s ease;
	pointer-events: none;
}

.scroll:hover .overlay {
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 1;
}

#playbtn {
	width: 50%;
	display: inline-block;
	color: white;
	text-align: center;
	opacity: 0;
}

#playbtn p {
	color: white;
}

.scroll:hover #playbtn {
	background-color: rgba(0, 0, 0, 0);
	opacity: 1;
}

.scroll img:hover {
	height: 15.9em;
	transition: 0.35s ease-in-out;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 5);
}
/* Preloader */

.preloader {
	z-index: 1000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	justify-content: center;
	align-items: center;
	visibility: visible;
	transition: all;
	position: fixed;
}

.hide-preloader {
	z-index: -999;
	visibility: hidden;
}

/* latest trailers */
#trailpaper {
	background-image: url(images/wallpaper/f9\ wallpaper.jpg);
	background-repeat: no-repeat;
	padding-top: 2em;
}
#trailpaper p {
	color: #08124d;
	font-size: large;
	text-align: left;
	margin-left: 20px;
	font-weight: bolder;
}
#latest_trailers {
	margin-bottom: 2em;
	display: flex;
	overflow: auto;
	padding-bottom: 1em;
	justify-content: space-between;
	/* object-fit: cover; */
}
.columnT {
	color: #fff;
	justify-content: space-between;
}

.movie-info {
	color: #fff;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
}

.movie-info span {
	background-color: rgb(2, 24, 71);
	padding: 0.25rem 0.5rem;
	border-radius: 0.5em;
	font-weight: bold;
	opacity: 0;
}

#latest_trailers img {
	border-radius: 0.5em;
	justify-content: space-between;
	margin: 0.5em;
	width: 16.4em;
	height: calc(16.4em / 1.78);
}
#latest_trailers img:hover {
	width: 17em;
	height: calc(17.4em / 1.78);
	transition: 0.4s ease-in-out;
	box-shadow: 0 5px 15px rgb(245, 240, 240);
}
#whats_popular {
	color: #02082e;
	/* background-color: rgb(203, 203, 214); */
	/* box-shadow: 0 5px 15px rgba(0, 0, 0, 1); */
}
#whats_popular p {
	color: #08124d;
	font-size: large;
	text-align: left;
	margin-left: 20px;
	font-weight: bolder;
}

/* free to watch */
#Free p {
	font-size: large;
	text-align: left;
	margin-left: 20px;
	font-weight: bolder;
}
#Free {
	/* box-shadow: 0 5px 15px rgba(0, 0, 0, 1); */
	background-color: #fff;
	margin-top: 60px;
	box-sizing: border-box;
	margin-bottom: 40px;
	display: flex;
	width: 100%;
	overflow: auto;
	padding-bottom: 0.7em;
}

/* FOOTER */
#footer {
	/* width: ; */
	padding-top: 100px;
	padding-bottom: 100px;
	display: block;
	align-content: center;
	justify-content: center;
	box-sizing: border-box;
	background-color: rgb(13, 33, 71);
	color: white;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
#footer button {
	width: 12em;
	height: 4em;
	cursor: pointer;
}
#footer .boxes {
	text-align: center;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	line-height: 1.5em;
}
#footer .boxes li {
	list-style: none;
	text-align: center;
}
#footer .boxes a {
	text-decoration: none;
	color: #fff;
}
.community {
	color: black;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
		"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

/* TVSHOWS PAGE */
#tv_page {
	height: 18em;
	background-image: url(images/wallpaper/Tvshows\ wallpaper.jpg);
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 0 0 0 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* wrap page */
#wrapx {
	height: 18em;
	background-image: url(images/wallpaper/spiderman\ wallpaper.jpg);
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 0 0 0 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#wrapY {
	height: 9em;
	background-image: url(images/wallpaper/Deadpool\ About\ wallpaer.png);
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 0 0 0 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
		"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size: larger;
}

/* MORE PAGE */
.more {
	font-size: 50px;
	align-content: center;
	color: red;
	padding-top: 40px;
}
.button {
	width: 80px;
	height: 30px;
	background-color: #081a81;
	border-radius: 9px;
	border-style: none;
	color: #fff;
	cursor: pointer;
}
.button a {
	text-decoration: none;
	color: #fff;
}

/* CONTACT PAGE */
.heading {
	font-size: xx-large;
	text-align: center;
	color: #08124d;
	/* background-color:linear-gradient(red,green); */
}
#form {
	padding: 30px;
}
#form textarea {
	display: block;
	color: #999;
	border-style: hidden;
	font-size: x-large;
	width: 100%;
}
#form {
	background-color: rgb(251, 253, 255);
}
#form fieldset {
	padding: 1em;
	border: solid 1px #ccc;
	border-radius: 6px;
	min-width: 200px;
	text-align: left;
}
#form legend {
	font-size: 1.25em;
	padding: 0 0.25em;
	color: #999;
	align-content: center;
}
#form input {
	display: block;
	color: #999;
	border-style: hidden;
	font-size: larger;
	width: 100%;
}
.buttonx {
	cursor: pointer;
	width: 150px;
	height: 40px;
	color: #fff;
	background-color: #0fb8ac;
	border-style: hidden;
	border-radius: 9px;
}