* {
	box-sizing: border-box;
}

/*header, nav, title*/

.page-title {
	position: absolute;
	margin: auto;
	width: 100%;
	z-index: 1;
	vertical-align: middle;

	text-align: center;
	font-size: 8vh;
	color:#781012;
	text-shadow: 2px 2px 2px #f4eddd9a;
}
	.sub-title {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;            
	padding: 1%;
	text-align: center;
	font-style: italic;
	font-size: 5vh;
	color: #f4eddd;
	background: linear-gradient(to bottom, #781012, transparent);
	border-radius: 25px 25px 0 0;
	margin: 0;
}
nav {
	text-align: center;
	font-style: normal;
	font-size: 30px;
	background-color: transparent;
	color:#781012;
	top: 0;
	gap: 10px;
	position: sticky;
	z-index: index 4;
	text-wrap: wrap;
	padding: 10px;
	padding-bottom: 5px;		
}
	nav a:link {
		color:#781012;
		text-decoration: none;
		padding: 1vw;
	}
	nav a:visited {
		color: #5d306d;
		padding: 1vw;
	}
	nav .star {
		font-size: 20px;
		display: inline-block;
		vertical-align: 3px;
	}
	nav a:hover {
		background-color: #781012;
		color: #f4eddd;
		padding: 1vw;
	}
			.dropdown {
				overflow: hidden;
				display: inline;
				position: relative;
			}
			.dropdown .dropbtn {
				font-size: 30px;
				border: none;
				outline: none;
				color: inherit;
				padding: 1vw;
				background-color: inherit;
				font-family: inherit;
				margin: 0;
				gap: 10px;
			}
			.dropdown:hover .dropbtn {
				background-color:#781012;
				color:#F4eddd;
			}
			.dropdown-content {
				display: none;
				position: absolute;
				background-color: #f4eddd;
				z-index: 6;
				top: 140%;
				left: 0;
				font-size: 25px;
			}
			.dropdown-content a {
				float: none;
				color: #781012;
				background-color: #f4eddd;
				display: block;
				text-align: left;
			}
			.dropdown-content a:hover {
				background-color: #781012;
				color: #f4eddd
			}
			.dropdown:hover .dropdown-content {
				display: block;
			}

/*body*/

body {
	margin: 0;
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	font-size: 17px;
	background-color: #f4eddd;
	border-radius: 25px;
	position: relative;
	word-wrap: normal;
}
	h1 {
		color:#781012;
	}
	h2 {
		color:#781012;
	}

/*home page*/

.video-container {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 25px;
	overflow: hidden;
	z-index: 0;
	margin:auto;
	position:relative;
}
#hero {
	max-height: 50vh;
	bottom: 0vh; 
	position: fixed;
	z-index: 3;
	left: 0;
	float: left;
}

/*film and tv page*/

	.credit-container {
		display: flex;
		width: 100vw;
		gap: 2.5vw;
		padding: 2.5vw;
		position: relative;
		margin-top: -15vh;
	}
		.credit-container .credit-image {
			flex: 1;
			position: relative;
			overflow: hidden;
			cursor: pointer;
			transition: flex 0.4s ease;
			border-radius: 1em;
		}
		.credit-container .credit-image:hover {
			flex: 4;
		}
		.credit-container .credit-image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.4s ease;
		}
		.credit-container .credit-image:hover img {
			transform: scale(1.1);
			max-height: 90vh;
		}
/*social media page*/

	.leftright-container {
		display: flex;
		height: 100vh;
		gap: 16px;
		padding: 16px;
		box-sizing: border-box;
		margin-top: 0vh;
	}

	/*left side*/

		.left-container {
			flex: 2;
			display: flex;
			flex-direction: column;
			overflow-y: auto;
		}
			.left-video {
				position: relative;
				display: flex;
				justify-content: center;
			}			
			.left-video video {
				width: 100%;
				height: auto;
				border: none;
				border-radius: 25px;
				z-index: 1;
			}
	
	/* Right side videos */

		.right-container {
			flex: 1;
			overflow-y: auto;
			padding-right: 4px;
		}
			.side-videos {
				display: flex;
				flex-direction: column;
				gap: 16px;
				object-fit: cover;
			}
			.video-card {
				background: transparent;
				padding: 8px;
				border-radius: 25px;
				display: flex;
				justify-content: center;
				flex: 1;
					position: relative;
					overflow: hidden;
					cursor: pointer;
					transition: flex 0.4s ease;
			}
				.video-card video {
					width: 30vw;
					height: auto;
					object-fit: contain;
					border: none;
					border-radius: 25px;
					display: block;
					max-height: 100vh;
						transition: transform 0.4s ease;
				}
				.video-card:hover video {
					transform: scale(1.1);
					max-height: 90vh;
				}

/*overlays*/

.overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 2.5vw;
	color: #F4eddd;
	background: linear-gradient( to top, #781012, transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}
	.overlay h1 {
		color: #f4eddd
	}
	.overlay h2 {
		color:#F4eddd
	}

/*footer*/

	footer {
		width: 100%;
		height: 5vh;
		bottom: 0;
		left: 40vw;
		margin: auto;
		padding-top: 1vh;
		text-wrap: wrap;
		overflow: wrap
	}

/*mobile and tablet*/

@media screen and (max-width:768px) {
	/*header, nav, title*/

		nav {
			font-size: 25px;
		}
		.dropdown .dropbtn {
			font-size: 25px;
		}
		.dropdown-content {
			top: 120%;
			font-size: 20px;
		}
		nav .star {
			font-size: 20px;
		}

	/*home page*/

		#hero {
			max-width: 50vw;
		}
		
	/*social media page*/

		.leftright-container {
			flex-direction: column;
			height: auto;
		}
		.left-container, .right-container {
			overflow: visible;
			}

		.left-video video {
			width: auto;
			max-height: 75vh;
			object-fit: contain;
			}

			.left-video .video-wrapper {
				position: relative;
				display: inline-flex;
				width: fit-content;
			}

				.video-wrapper video {
					display: block;
					width: auto;
					max-width: 100%;
					max-height: 75vh; 
					border-radius: 25px;
				}

				.video-wrapper .sub-title {
					margin-bottom: 8px;
					text-align: center;
					width: 100%;
					display: flex;
					justify-content: center;
				}

			.video-card {
			position: relative;
			width: 100%;
			}

				.video-card video {
				display: block;
				width: 100%
				}
	}

/*large*/

	@media screen and (min-width:900px) {
		#hero {
			height: 65%;
		}
		.video-container {
			height: 80vh;
			width: 95vw;
		}
		nav .star {
			font-size: 20px;
			
		}
	}