/* Import the custom font */
@font-face {
	font-family: 'YogaSans';
	src: url('../fonts/YogaSansOT.otf') format('opentype');
}
@font-face {
	font-family: 'YogaSansMedium';
	src: url('../fonts/YogaSansOT-Medium.otf') format('opentype');
}
@font-face {
    font-family: 'CapitaLig';
    src: url('../fonts/CapitaLig.otf') format('opentype');
}
/* Remove underline from anchor tags (links) */
a {
	text-decoration: none;
}

/* Full-screen video */
video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* Repeating PNG background */
.bg-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../img/pixel_bg_filter_desat.png') repeat;
	pointer-events: none;
	mix-blend-mode: multiply;
	opacity: 0.5;
	z-index: -1;
}

/* Title styling */
.title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'YogaSans', sans-serif;
	font-size: 48px;
	color: white;
	opacity: 0.75;
	/*pointer-events: auto;*/
	z-index: 10;
	transition: opacity 0.3s ease;
	/*cursor: pointer;*/
}
/* 
.title:hover {
	opacity: 1;
}
*/
/* Block of copy when Profile is clicked */
.profile-copy {
	position: absolute;
	top: 112px; /* Set the top position to 182px */
	left: 50%;
	transform: translateX(-50%); /* Center horizontally */
	font-family: 'YogaSansMedium', sans-serif;
	font-size: 24px;
	color: white;
	max-width: 700px;
	width: 90%;
	padding:0 0 140px 0;
	text-align: left;
	line-height: 1.23;
	opacity: 0.85;
	z-index: 5; /* Lower than hamburger and social bar */
}
.profile-copy a {
	color: white;
	text-decoration:underline;
	transition: color 0.3s ease;
}
.profile-copy a:hover {
	text-decoration:underline;
	color: white;
	opacity:0.5;
}

/* Block of copy when Profile is clicked */
.contact-copy {
	display: none;
	position: absolute;
	/*top: 202px;*/
	top:45%;
	transform: translateY(-55%); /* Center vertically */	
	left: 50%;
	transform: translateX(-50%); /* Center horizontally */
	font-family: 'YogaSansMedium', sans-serif;
	font-size: 32px;
	color: white;
	max-width: 700px;
	width: 90%;
	padding:0 0 100px 0;
	text-align: center;
	line-height: 1.3;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 6; /* Lower than hamburger and social bar */
}
.contact-copy a {
	text-decoration: underline;
    color:#ffffff;
	transition: color 0.3s ease;
}
.contact-copy a:hover {
	text-decoration: underline;
	opacity:0.5;
}

/* Hamburger navigation bar */
.hamburger-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 82px;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 15; /* Higher than profile copy */
	transition: height 0.5s ease;
}

.hamburger-icon {
	width: 20px;
	height: 20px;
	background-image: url('../img/hamburger_off.png');
	background-size: cover;
	cursor: pointer;
	opacity: 0.8;
	transition: background-image 0.3s ease;
	position: absolute;
	top: 32px;
	z-index: 16; /* Ensures hamburger icon is above the bar */
}
.hamburger-icon:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
.nav-menu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	height: 0;
	width: 100%;
	opacity: 0;
	visibility:hidden;
	padding: 20px 0;
	transition: height 0.5s ease, opacity 0.3s ease;
	z-index: 7;
}

.nav-item {
	font-family: 'YogaSans', sans-serif;
	font-size: 32px;
	color: white;
	opacity: 0.8;
	transition: opacity 0.3s ease;
	cursor: pointer;
}

.nav-item:hover {
	opacity: 1;
}

#profile-item {
	margin: 40px 0 0 0;
	opacity:0.3;
}

/* Social media bar */
.social-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 82px;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 14; /* Higher than profile copy but below hamburger */
}

.social-icon {
	width: 21px;
	height: 21px;
	margin: 0 3px;
	cursor: pointer;
}
.social-icon.emaillink {
	background-image: url('../img/SocialMediaIcon_email_21px_100per.png');
	opacity: 0.8;
}

.social-icon.emaillink:hover {
	opacity: 1;
	transition: opacity 0.7s ease;
}

.social-icon.linkedin {
	background-image: url('../img/SocialMediaIcon_LinkedIn_21px_100per.png');
	opacity: 0.8;
}

.social-icon.linkedin:hover {
	opacity: 1;
	transition: opacity 0.7s ease;
}

.social-icon.instagram {
	background-image: url('../img/SocialMediaIcon_Instagram_21px_100per.png');
	opacity: 0.8;
}

.social-icon.instagram:hover {
	opacity: 1;
	transition: opacity 0.7s ease;
}


/* ----------- WORK ----------- */

/* Repeating PNG background */
.bg-overlay-work {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../img/pixel_bg_filter_white.png') repeat;
	pointer-events: none;
	mix-blend-mode: multiply;
	opacity: 0.15;
	z-index: -1;
}


/* Hamburger navigation bar */
.hamburger-bar-work {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 82px;
	background-color: rgba(255, 255, 255, 0.9);
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 15; /* Higher than profile copy */
	transition: height 0.5s ease;
}

.hamburger-icon-work {
	width: 20px;
	height: 20px;
	background-image: url('../img/hamburger_bk_off.png');
	background-size: cover;
	cursor: pointer;
	opacity: 0.8;
	transition: background-image 0.3s ease;
	position: absolute;
	top: 32px;
	z-index: 16; /* Ensures hamburger icon is above the bar */
}
.hamburger-icon-work:hover {
	opacity: 1;
	transition: opacity 0.3s ease;
}
.nav-menu-work {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	height: 0;
	width: 100%;
	opacity: 0;
	padding: 20px 0;
	transition: height 0.5s ease, opacity 0.3s ease;
	z-index: 6;
}

.nav-item-work {
	font-family: 'YogaSans', sans-serif;
	font-size: 32px;
	color: black;
	opacity: 0.8;
	transition: opacity 0.3s ease;
	cursor: pointer;
}

.nav-item-work:hover {
	opacity: 1;
}

/* Social media bar */
.social-bar-work {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 82px;
	background-color: rgba(255, 255, 255, 0.9);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 14; /* Higher than profile copy but below hamburger */
}

.social-icon-work {
	width: 21px;
	height: 21px;
	margin: 0 3px;
	cursor: pointer;
}

.social-icon-work.linkedin {
	background-image: url('../img/SocialMediaIcon_LinkedIn_bk_21px_100per.png');
	opacity: 0.6;
}

.social-icon-work.linkedin:hover {
	opacity: 1;
	transition: opacity 0.7s ease;
}

.social-icon-work.instagram {
	background-image: url('../img/SocialMediaIcon_Instagram_bk_21px_100per.png');
	opacity: 0.6;
}

.social-icon-work.instagram:hover {
	opacity: 1;
	transition: opacity 0.7s ease;
}

/* Style for the image grid */
.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns by default */
    grid-gap: 8px; /* Space between the images */
    margin-top: 82px; /* Space below the hamburger navigation */
    margin-bottom: 82px; /* Space below the hamburger navigation */
    padding: 0 10px; /* Padding for some space around the grid */
    width: 98%; /* Full width */
    max-width: 1200px; /* Limit max width of grid */
    margin-left: auto; /* Center grid horizontally */
    margin-right: auto; /* Center grid horizontally */
}

.image-item img {
    width: 100%; /* Make images fill their container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below images */
	opacity: 1;
}
.image-item img:hover {
	opacity: 0.75;
	transition: opacity 0.3s ease;
}

/* Media Queries for responsiveness */
@media (max-width: 1199px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
    }
}

@media (max-width: 699px) {
    .image-grid {
        grid-template-columns: 1fr; /* 1 column for small screens */
    }
}

.footnote {
	font-family: 'YogaSans', sans-serif;
	font-size:12px;
	font-style:normal;
	color:#dddddd;
	/*margin-right:80px;*/
	width:80%;
}
.footnote em {
	font-family: 'YogaSansMedium', sans-serif;
	font-style:normal;
}
.footnote a {
	text-decoration: underline;
    color:#dddddd;
}
.footnote a:hover {
	text-decoration: underline;
}

.profilefootnote {
	font-family: 'YogaSans', sans-serif;
	font-size:14px;
	font-style:normal;
	color:#dddddd;
	margin-right:15%;
	margin-bottom:48px;
}
.profilefootnote em {
	font-family: 'YogaSansMedium', sans-serif;
	font-style:normal;
}
.profilefootnote a {
	text-decoration: underline;
    color:#dddddd;
}
.profilefootnote a:hover {
	text-decoration: underline;
}