/* GLOBAL CSS */

:root {
	font-size: 16px;
	margin: 0;

	--background-color: indigo;
	--background-grey: #808080A0;
	--main-background-image: url("/assets/main-background.svg");
	--font-color: white;
	--menu-background-color: white;
	--menu-font-color: black;
	--header-background-color: green;
	--camcorder-border-color: #686868;
	--purple-accent-color: #C337C3;
	--default-transition-speed: 250ms;
	--main-menu-button-transition-speed: 750ms;
}

.noTextSelect {
	/* iOS Safari */
	-webkit-touch-callout: none;
	/* Safari */
	-webkit-user-select: none;
	/* Konqueror HTML */
	-khtml-user-select: none;
	/* Old versions of Firefox */
	-moz-user-select: none;
	/* Internet Explorer/Edge */
	-ms-user-select: none;
	/* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
	user-select: none;
}


* {
	box-sizing: border-box;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: #8f54a0 #ffffff00;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
	width: 12px;
}

*::-webkit-scrollbar-track {
	background: #ffffff00;
	opacity: 0;
}

*::-webkit-scrollbar-thumb {
	background-color: #8f54a0;
	border-radius: 0px;
	border: 3px solid #ffffff00;
}

body::before {
	/* Important */
	content: "";
	/* Important */
	z-index: -1;
	position: inherit;
	left: inherit;
	top: inherit;
	width: inherit;
	height: inherit;
	background-image: var(--main-background-image);
	filter: blur(.30rem) brightness(50%);
	background-size: 50%;
	/* Center the image */
	background-position: center;
}

body {
	--scrollbar-width: calc(100vw - 100%);
	background-color: var(--background-color);
	/* Image should not be drawn here */
	background-size: 0 0;
	color: var(--font-color);
	margin: 0;
	overflow: hidden;
	height: 100vh;
	width: 100%;
	position: fixed;
}

a {
	color: inherit;
	text-decoration: none;
}

header {
	width: 100%;
	min-height: 8vh;
	max-height: 8vh;
	overflow: hidden;
}

#header-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 8vh;
}

#header-container>h1 {
	text-decoration: underline;
	text-align: center;
	z-index: 101;
	font-size: 3rem;
	white-space: nowrap;
	margin: 0;
}

nav #main-menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	opacity: 0;
	border-radius: 25%;
	overflow: hidden;
	transition: all var(--default-transition-speed);
	color: var(--menu-font-color);
}

nav #main-menu.visible {
	border-radius: 0%;
	z-index: 1000;
	transition: all var(--default-transition-speed), z-index 0ms;
	opacity: 1;
	background-color: var(--menu-background-color);
}

nav #main-menu>ul {
	/* Remove bullets */
	list-style-type: none;
	/* Remove padding */
	padding: 0;
	/* Remove margins */
	margin: 0;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	font-size: 3rem;
}

nav #main-menu>ul>a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-height: 4vh;
}

nav #main-menu>ul>a * {
	transition: var(--default-transition-speed);
}

nav #main-menu>ul>a>li {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

nav #main-menu>ul>a>li>svg {
	height: 2.5rem;
	margin-left: 1rem;
	fill: var(--menu-font-color);
	overflow: visible;
}

nav #main-menu>ul>a:hover * {
	scale: 1.05;
	color: var(--purple-accent-color);
	fill: var(--purple-accent-color);
}

main {
	width: calc(100vw - var(--scrollbar-width));
	max-height: 81.5vh;
	min-height: 81.5vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

main div {
	z-index: 100;
}

#homepage-about-me {
	height: 10vh;
	max-height: 10vh;
	background-color: #a85cb5F6;
	color: black;
	width: 90%;
	margin-left: .5rem;
	margin-right: .5rem;
	padding: .4rem;
	border-radius: 1rem;
}

#homepage-about-me>h2 {
	text-decoration: underline;
	margin: 0;
}

#homepage-content {
	margin-top: .5rem;
	margin-bottom: .5rem;
	height: 69vh;
	max-height: 69vh;
	width: 100%;
	display: flex;
	align-content: start;
}

#homepage-content>a {
	border: .1rem solid white;
	border-radius: 1rem;
	max-height: 90vh;
	margin-left: 0.375rem;
	margin-right: 0.375rem;
	width: 33%;
	max-width: 33%;
	transition: var(--default-transition-speed);
}

#homepage-content div.content-showcase {
	height: 100%;
	/* Safari 6.0 - 9.0 */
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	transition: var(--default-transition-speed);
	border-radius: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: transparent;
}

#homepage-content a:hover div.content-showcase,
#homepage-content a:hover {
	/* Safari 6.0 - 9.0 */
	-webkit-filter: none;
	filter: none;
	border-radius: 0;
	color: white;
	font-size: 3rem;
}

#homepage-content>a:nth-of-type(1) div.content-showcase {
	background-image: url('/assets/images/kraft-services-thumbnail.webp');
	background-position: left;
	background-size: cover;
}

#homepage-content>a:nth-of-type(2) div.content-showcase {
	background-image: url('/assets/images/kraft-services-prop.webp');
	background-position: right;
	background-size: cover;
}

#homepage-content>a:nth-of-type(3) div.content-showcase {
	background-image: url('/assets/images/earrings-photo.webp');
	background-position: center;
	background-size: cover;
}

#films-content>div {
	max-height: 90vh;
	width: 20%;
	flex-grow: 1;
	margin-left: .4rem;
	margin-right: .4rem;
	padding: .4rem;
	border-radius: .25rem;
	overflow: hidden;
}

#films-content>div>h2 {
	position: relative;
	text-align: center;
	font-size: 1.5rem;
	background-color: grey;
}



/* Description Section */
#description-container {
	background-color: var(--background-grey);
}

#description-container>div {
	height: 100%;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

.rtl {
	direction: rtl;
}

.rtl>* {
	direction: ltr;
}

.main-content {
	height: 90vh;
	max-height: 90vh;
}

/* Video Section */
#films-content {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

#films-content.main-content #VHS-Container {
	background-color: var(--background-grey);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	width: 60%;
}

#VHS-Container h2,
#VHS-Container h3,
#VHS-Container h4 {
	margin: 1px;
	text-align: center;
}

#VHS-Container h2 {
	text-decoration: underline;
}

#video-player {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

#video-player video {
	max-height: 50vh;
	width: 100%;
	z-index: 1000;
}

#video-player>:first-child:before,
#video-player>:first-child:after,
#video-player>:last-child:before,
#video-player>:last-child:after {
	position: absolute;
	content: ' ';
	width: 80px;
	height: 80px;
	border-color: var(--camcorder-border-color);
	border-style: solid;
	z-index: 0;
}

#video-player>:first-child:before {
	top: -0.375rem;
	left: -0.375rem;
	border-width: 0.375rem 0 0 0.375rem
}

#video-player>:first-child:after {
	top: -0.375rem;
	right: -0.375rem;
	border-width: 0.375rem 0.375rem 0 0
}

#video-player>:last-child:before {
	bottom: -0.375rem;
	right: -0.375rem;
	border-width: 0 0.375rem 0.375rem 0
}

#video-player>:last-child:after {
	bottom: -0.375rem;
	left: -0.375rem;
	border-width: 0 0 0.375rem 0.375rem
}


/* Video List Section */
#video-list-container {
	background-color: var(--background-grey);
	overflow: hidden;
}

#video-list-container>#video-list {
	height: 92%;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background: var(--background-grey);
	/* Remove bullets */
	list-style-type: none;
	/* Remove padding */
	padding: 0;
	/* Remove margins */
	margin: 0;
}

#video-list-container>#video-list>.video-container {
	width: 100%;
	max-width: 100%;
	transition: var(--default-transition-speed);
	border: 2px dotted #786e80;
	position: relative;
}

#video-list-container>#video-list>.video-container>.video-thumbnail>img {
	width: 100%;
	max-width: 100%;
	height: 18vh;
	object-fit: contain;
}

#video-list-container>#video-list>.video-container video {
	width: 100%;
	max-width: 100%;
	height: 18vh;
	display: none;
}

#video-list-container>#video-list>.video-container:hover {
	border: 2px dotted purple;
	cursor: pointer;
}


#video-list-container>#video-list>.video-container:hover>.play-overlay {
	background-color: grey;
}

#video-list-container>#video-list>.video-container:hover>.play-overlay>.play-icon {
	width: 3rem;
}

#video-list-container>#video-list>.video-container>.play-overlay[data-status="playing"] {
	fill: purple;
	background-color: grey;
}

#video-list-container>#video-list>.video-container:hover>.play-overlay[data-status="playing"]>.play-icon {
	fill: black;
}

#video-list-container>#video-list>.video-container>.play-overlay[data-status="playing"]>.play-icon {
	width: 3rem;
}

#video-list-container>#video-list>.video-container>.play-overlay {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 90%;
	transition-duration: var(--default-transition-speed);
}

#video-list-container>#video-list>.video-container>.additional-content {
	display: none;
}

#video-list-container>#video-list>.video-container>.play-overlay>.play-icon {
	display: inline-block;
	position: absolute;
	width: 0;
	top: 35%;
	left: 45%;
	transition-duration: var(--default-transition-speed);
}

#general-content {
	background-color: var(--background-grey);
	flex-grow: 1;
	width: 98%;
	max-width: 98%;
	overflow-x: hidden;
	overflow-y: auto;
	padding: .4rem;
	background: var(--background-grey);
	border-radius: 1rem;
	margin-top: .5rem;
	margin-bottom: .5rem;
	height: 79vh;
	max-height: 79vh;
}

footer {
	min-height: 10.5vh;
	max-height: 10.5vh;
	width: calc(100vw - var(--scrollbar-width));
	background-color: #2b2a33F7;
	overflow: hidden;
}

footer>ul {
	min-height: 10.5vh;
	max-height: 10.5vh;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	/* Remove bullets */
	list-style-type: none;
	/* Remove padding */
	padding: 0;
	/* Remove margins */
	margin: 0;
}

footer>ul>li {
	max-height: 100%;
	max-width: 100%;
	display: flex;
	align-items: center;
}

footer>ul svg {
	fill: white;
	height: 4rem;
	transition: var(--default-transition-speed);
}

footer>ul svg:hover {
	fill: var(--purple-accent-color);
	scale: 1.05;
}