body {
	font-family: "Poppins", Helvetica, "Droid Sans", sans-serif;
	color: #abb8c3;
	margin: 0;
	height: 100%;
	overflow-x: hidden;
}

/* ------ COLOR SCHEME (needs updating) ------
Gray
	#abb8c3;
Purples
	Light
	#6c5cd6
	rgb(108, 92, 214)
	Dark
	#24248f
	rgb(36, 36, 143)

Greens
	#00b300
	rgb(0, 179, 0)
	
	#32612d
	rgb(50, 97, 45)
 --------------------------- */
html {
	height: 100%;
	background-color: black;
}

/* Header */
.header {
	padding: 30px;
	text-align: center;
	background: white;
}

.header h1 {
	font-size: 50px;
}

/* *** -------- *** TOP NAV *** -------- *** */
.topnav {
	/* overflow: hidden; */
	z-index: 1;
	opacity: .7;
	position: fixed;
	top: 0px;
	width: 100%;
	background-color: #24248f;
}

/* -------- TOP NAV LINKS -------- */
.topnav a {
	float: left;
	display: block;
	color: rgb(167, 237, 167);
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	text-shadow: 1.5px 1.5px rgba(108, 92, 214, .8);
}

/* Change color on hover */
.topnav a:hover {
	background-color: rgba(108, 92, 214, .8);
	font-weight: bold;
	text-decoration: underline;
	text-decoration-color: #24248f;
}

/* Hide until media query: Width <= 400px */
.topnav #hamburger {
	display: none;
}

/* Hide until media query: Width <= 400px */
#nav-hamburger {
	display: none;
}

/* Style for social media links in nav bar */
.social {
	font-size: 20px;
	padding-top: 0px;
	padding-bottom: 0px;
}

/* The progress container (grey background) */
.progress-container {
	width: 100%;
	height: 8px;
	background: rgb(98, 92, 234);
	position: fixed;
	z-index: 1;
	display: block;
	margin-top: 58px;
}

/* The progress bar (scroll indicator) */
.progress-bar {
	height: 8px;
	background: rgb(36, 36, 143);
	width: 0%;
	position: fixed;
	z-index: 1;
}

/* *** -------- *** HERO SECTION *** -------- *** */
.hero-image {
	height: 100lvh;
	width: 100vw;
	position: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("../image/hero_splash.png"),
		linear-gradient(45deg, rgba(90, 0, 255, .7), rgba(88, 165, 80, .9));

	@supports (background-image: url("../image/hero_splash.webp")) {
		background-image: url("../image/hero_splash.webp"),
			linear-gradient(45deg, rgba(90, 0, 255, .7), rgba(88, 165, 80, .9));
	}

	z-index: -1;
}

.hero-content {
	position: absolute;
	width: 100vw;
	max-height: 100vw;
	margin: 0;
}

.logo {
	padding-top: 15vmax;
	padding-left: 2%;
	display: block;
	width: 35vw;
}

.logo-text {
	padding-left: 2%;
	padding-bottom: 24px;
	max-width: 35vw;
	color: white;
}

.logo-text-bg {
	background-color: rgba(108, 92, 214, .3);
}

/* *** -------- *** BODY *** -------- *** */
.anchor {
	visibility: hidden;
	display: block;
	position: relative;
	top: -66px;
}

.collapsible,
.not-collapsible h1,
h2,
h3,
h4 {
	/* background: linear-gradient(45deg, rgba(102, 0, 255, .9), rgba(50, 97, 45, .9));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; */
	text-align: center;
	padding: .25rem .5rem .25rem .5rem;
	color: whitesmoke;
	text-shadow: 1px 1px rgba(108, 92, 214, .8);
}

.collapsible,
.not-collapsible p {
	padding-top: 12px;
}

.button-link-padding {
	padding-top: 36px;
}

.fade-in-image {
	animation: fade-in-img .5s linear forwards;
	/* animation-timeline: view(); */
	/* animation-range-start: entry; */
}

@keyframes fade-in-img {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.header-bg {
	background: linear-gradient(45deg, rgba(102, 0, 255, .4), rgba(88, 165, 80, .4));
	color: whitesmoke;
	border-radius: 10px;
	width: 100%;
}

.glass {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 0px .5rem 0px .5rem;
}

/* Create two unequal columns that float next to each other */
.column-33 {
	float: left;
	width: 33.33%;
	padding-left: 2%;
	padding-top: 20px;
}

.column-66 {
	float: left;
	width: 60.67%;
	padding-left: 2%;
	background-color: black;
	height: 100%;
}

/* Style image captions */
.caption {
	text-align: center;
	font-size: small;
}

/* Style the button/bar that is used to open and close the collapsible content */
/* .collapsible {
  background-color: #6c5cd6;
  background-image: linear-gradient(45deg, rgba(102, 0, 255, .9), rgba(50, 97, 45, .9));
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 32px;
  font-weight: bold;
  border-bottom-style: solid;
  border-bottom-color: white;
  border-bottom-width: 1px;
} */
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsible:hover {
	background-color: #24248f;
}

.collapsible:before {
	content: '\025B6';
}

.collapsible,
.not-collapsible {
	background-color: #6c5cd6;
	background-image: linear-gradient(45deg, rgba(102, 0, 255, .7), rgba(88, 165, 80, 1));
	color: white;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 32px;
	font-weight: bold;
	border-top: .5px solid white;
	border-bottom: .5px solid white;
	cursor: default;
}

.active:before {
	content: '\025BC'
}

/* Style the collapsible content. Note: hidden by default */
.content {
	padding: 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	display: none;
}

#tech-content {
	background-color: black;
	overflow: hidden;
}

#music-content {
	display: none;
	background-color: black;
	overflow: hidden;
}

#bakery-content {
	display: none;
	background-color: black;
	overflow: hidden;
}

#photography-content {
	display: none;
	background-color: black;
	overflow: hidden;
}

hr.solid {
	border-top: 3px solid #bbb;
}

hr.rounded {
	border-top: 8px solid #bbb;
	border-radius: 5px;
}

.iframe-wrapper {
	flex-grow: 1;
	text-align: center;
	margin: auto;
	padding-bottom: 24px;
}

iframe {
	max-width: 100% !important;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.read-more {
	color: rgb(108, 92, 214);
	font-size: 1.5rem;
	padding-bottom: 2rem;
	padding-left: 2rem;
}

.read-more:hover {
	color: #24248f;
	cursor: pointer;
}

#moonbender>ul>li::marker {
	content: ' 🌙 ';
}

.band-member {
	color: rgb(108, 92, 214);
	font-weight: bold;
}

/* *** GRID STUFF *** */
/* TECH */
.tech-grid {
	display: grid;
	gap: 1.5rem;
	grid-auto-columns: 1fr;
	grid-template-areas:
		'photo summary summary'
		'photo highlights highlights'
		'skills skills skills';
	padding-bottom: 1rem;
	padding-top: 2rem;
	margin-inline: 2rem;
}

.tech-photo {
	grid-area: photo;
}

.tech-summary {
	grid-area: summary;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.tech-highlights {
	grid-area: highlights;
}

.tech-skills {
	grid-area: skills;
}

/* MUSIC */
.music-grid {
	display: grid;
	gap: 1.5rem;
	grid-auto-columns: 1fr;
	grid-template-areas:
		'photo summary summary'
		'photo summary summary'
		'read-more read-more read-more';
	padding-bottom: .75rem;
	padding-top: 2rem;
	margin-inline: 2rem;
}

.music-photo {
	grid-area: photo;
}

.music-summary {
	grid-area: summary;
}

.music-summary .header-bg {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.music-read-more {
	grid-area: read-more;
}

.music-read-more-grid {
	grid-template-areas:
		'singer moonbender services';
	display: grid;
	gap: 1rem;
	grid-auto-columns: 1fr;
}

#read-more-singer {
	grid-area: singer;
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
}

#read-more-moonbender {
	grid-area: moonbender;
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
}

#read-more-services {
	grid-area: services;
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
}

/* BAKING */
.bakery-grid {
	display: grid;
	gap: 1.5rem;
	grid-auto-columns: 1fr;
	grid-template-areas:
		'photo summary summary';
	padding-bottom: 5rem;
	padding-top: 2rem;
	margin-inline: 2rem;
}

.bakery-photo {
	grid-area: photo
}

.bakery-summary {
	grid-area: summary;
	display: flex;
	align-items: center;
	flex-direction: column;
}

/* PHOTOGRAPHY */
.photography-grid {
	display: grid;
	gap: 1.5rem;
	grid-auto-columns: 1fr;
	grid-template-areas:
		'photo summary summary'
		'gallery gallery gallery';
	padding-bottom: 5rem;
	padding-top: 2rem;
	margin-inline: 2rem;
}

.photography-photo {
	grid-area: photo;
}

.photography-summary {
	grid-area: summary;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.photo-gallery-grid {
	display: grid;
	grid-area: gallery;
	gap: .75rem;
	grid-auto-columns: 1fr;
	grid-template-areas:
		'portraits real-estate real-estate products'
		'landscapes landscapes astro cityscapes'
		'landscapes landscapes pets cityscapes'
		'. food food .';
	padding-bottom: 5rem;
	padding-top: 2rem;
}

.photo-gallery-food {
	grid-area: food;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.photo-gallery-real-estate {
	grid-area: real-estate;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.photo-gallery-portraits {
	grid-area: portraits;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.photo-gallery-products {
	grid-area: products;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.photo-gallery-landscapes {
	grid-area: landscapes;
	object-fit: cover;
}

.photo-gallery-cityscapes {
	grid-area: cityscapes;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.photo-gallery-pets {
	grid-area: pets;
	object-fit: cover;
}

.photo-gallery-astro {
	grid-area: astro;
}

/* --- Premium Gallery Enhancements --- */
.photo-gallery-grid>div {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
	cursor: pointer;
	background: #1a1a1a;
}

.photo-gallery-grid>div:hover {
	transform: scale(1.03);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
	z-index: 10;
}

.photo-gallery-grid picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter 0.4s ease, transform 0.4s ease;
}

.photo-gallery-grid>div:hover picture img {
	filter: brightness(1.1) contrast(1.1);
	transform: scale(1.05);
}

.photo-gallery-grid .caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 15px;
	margin: 0;
	background: rgba(36, 36, 143, 0.4);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff;
	font-weight: 600;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	pointer-events: none;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.photo-gallery-grid>div:hover .caption {
	opacity: 1;
	transform: translateY(0);
}

/* ^^^ GRID STUFF ^^^  */
/* *** FLEXING *** */
.flex-container {
	width: auto;
	/* height: 50%; */
	display: flex;
	flex-wrap: wrap;
	/* Default: flex-direction: row;*/
	justify-content: space-evenly;
	padding-bottom: 3rem;
	gap: 10px;
}

div.flex-container {
	display: flex;
	min-width: 0;
	flex: 1 1 24px;
	margin: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

div.flex-container i {
	font-size: 3.5rem;
	display: flex;
	width: 100%;
	height: auto;
	text-align: center;
	padding-bottom: 1vw;
	justify-content: center;
}

.icons-with-text {
	transition: 1s;
	border-radius: 50%;
	transform: scale(.9);
}

.icons-with-text:hover::before {
	transform: scale(1.1);
	box-shadow: 0 0 15px #00b300;
}

.icons-with-text:hover {
	color: #00b300;
	text-shadow: 0 0 10px #00b300;
}

@keyframes magenta-to-green-flair {
	0% {
		filter: invert(15%) sepia(85%) saturate(3620%) hue-rotate(240deg) brightness(95%) contrast(105%);
	}

	40% {
		filter: invert(28%) sepia(100%) saturate(5000%) hue-rotate(300deg) brightness(92%) contrast(120%) drop-shadow(0 0 15px #ff00ff);
	}

	100% {
		filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(447deg) brightness(119%) contrast(119%) drop-shadow(0 0 10px #00b300);
	}
}

.icons-flex i,
.ai-icon {
	color: #000;
	/* Set to black as baseline for filters */
	text-align: center;
	transition: filter 0.8s ease-in-out;
	/* Achieve #24248f purple from a black source */
	filter: invert(15%) sepia(85%) saturate(3620%) hue-rotate(240deg) brightness(95%) contrast(105%);
}

.ai-icon {
	width: 3.5rem;
	height: 3.5rem;
	display: block;
	margin: 0 auto 1vw auto;
}

.icons-with-text:hover i,
.icons-with-text:hover .ai-icon {
	animation: magenta-to-green-flair 1s forwards ease-in-out;
}

.desc {
	font-size: 1em;
	/* =(16px/16) */
	text-align: center;
	font-weight: bold;
	border-top: 1px solid;
}

.break {
	flex-basis: 100%;
	height: 0;
}

.flex-container-nowrap {
	width: auto;
	height: 50%;
	display: flex;
	flex-wrap: nowrap;
	/* justify-content: space-evenly; */
	padding-bottom: 20px;
}

.read-more-content {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	flex: 1;
	justify-content: space-evenly;
	align-content: flex-start;
	border: 1px solid #24248f;
	margin-inline: .5rem;
}

/* ^^^ FLEXING ^^^ */
/* Style the buttons used in the body */
.button-link {
	border: none;
	/* Remove borders */
	outline: none;
	/* Remove outline */
	background-color: rgba(108, 92, 214, .6);
	/* Set a background color */
	color: #fff;
	/* Text color */
	cursor: pointer;
	/* Add a mouse pointer on hover */
	padding: 8px;
	/* Some padding */
	border-radius: 10px;
	/* Rounded corners */
	font-size: 18px;
	/* Increase font size */
	text-decoration: none;
	transition: all 0.5s;
}

.button-link:hover {
	background-color: #24248f;
}

.button-link span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
}

.button-link span:after {
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}

.button-link:hover span {
	padding-right: 25px;
}

.button-link:hover span:after {
	opacity: 1;
	right: 0;
}

/* Assign as necessary to assist with debugging */
.debug {
	border-width: thin;
	border-color: red;
	border-style: solid;
}

/* Add a card effect for articles */
.card {
	background-color: white;
	padding: 20px;
	margin-top: 20px;
}

/* Clear floats after the columns */
.row::after {
	content: "";
	display: table;
	clear: both;
}

/* *** --------- *** FOOTER *** ---------- *** */
.footer {
	padding: 1.5rem 2rem;
	/* top right (bottom) (left) */
	text-align: center;
	background-image: linear-gradient(45deg, rgba(90, 0, 255, .7), rgba(88, 165, 80, .7));
	/*	background-color: rgba(108, 92, 214, .8); */
	color: whitesmoke;
	border-top: .5px white solid;
}

.footer h1,
h2,
h3 {
	text-align: center;
	color: white;
}

.to-top {
	/* display: none; Hidden by default */
	position: fixed;
	/* Fixed/sticky position */
	bottom: 3vw;
	/* Place the button at the bottom of the page */
	right: 3vw;
	/* Place the button 30px from the right */
	z-index: 99;
	/* Make sure it does not overlap */
	border: none;
	/* Remove borders */
	outline: none;
	/* Remove outline */
	background-color: rgb(108, 92, 214);
	/* Set a background color */
	color: #fff;
	/* Text color */
	opacity: .6;
	cursor: pointer;
	/* Add a mouse pointer on hover */
	padding: 8px;
	/* Some padding */
	border-radius: 10px;
	/* Rounded corners */
	font-size: 18px;
	/* Increase font size */
}

.to-top:hover {
	background-color: #24248f;
	/* Add a dark-grey background on hover */
}

/* Style the button used in the footer */
.footer-link {
	border: none;
	/* Remove borders */
	outline: none;
	/* Remove outline */
	background-color: rgba(36, 36, 143, .9);
	/* Set a background color */
	color: #fff;
	/* Text color */
	cursor: pointer;
	/* Add a mouse pointer on hover */
	padding: 3px;
	/* Some padding */
	border-radius: 10px;
	/* Rounded corners */
	font-size: 12px;
	/* Increase font size */
	text-decoration: none;
	transition: all 0.5s;
}

.footer-link:hover {
	background-color: rgba(108, 92, 214, .6);
}

.footer-link span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
}

.footer-link span:after {
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
}

.footer-link:hover span {
	padding-right: 10px;
}

.footer-link:hover span:after {
	opacity: 1;
	right: 0;
}

/* *** --------- *** MEDIA QUERIES *** ---------- *** */

@media screen and (max-width: 1200px) {
	.tech-grid {
		grid-template-areas:
			'photo summary summary'
			'highlights highlights highlights'
			'skills skills skills';
	}
}

/* Reduced Motion */
@media screen and (prefers-reduced-motion: reduce) {
	.animate {
		animation: none !important;
	}
}

/* <= 800px wide Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
	.hero-image {
		background-image: url("../image/hero_splash_800.png"),
			linear-gradient(45deg, rgba(102, 0, 255, .9), rgba(88, 165, 80, .7));

		@supports (background-image: url("../image/hero_splash_800.webp")) {
			background-image: url("../image/hero_splash_800.webp"),
				linear-gradient(45deg, rgba(102, 0, 255, .9), rgba(88, 165, 80, .7));
		}
	}

	.logo {
		margin: 0;
	}

	.logo-text {
		padding-bottom: 5%;
		padding-top: 5vw;
		padding-left: 0;
		margin: auto;
		display: block;
		width: 95vw;
		max-width: 100%;
	}

	.logo-text-bg {
		background-color: rgba(108, 92, 214, .4);
	}

	#nav-hamburger {
		display: block;
	}

	#nav-photography {
		display: none;
	}

	#nav-bakery {
		display: none;
	}

	#nav-music {
		display: none;
	}

	#nav-tech {
		display: none;
	}

	.topnav #hamburger {
		width: 100%;
		transition: max-height 0.2s ease-out;
	}

	.column-33,
	.column-66 {
		width: 100%;
		padding: 0;
	}

	.header-bg {
		font-size: 1.25rem;
	}

	.tech-grid {
		grid-template-areas:
			'photo summary'
			'photo summary'
			'highlights highlights'
			'skills skills';
		gap: 1rem;
		padding-bottom: 5rem;
		padding-top: 2rem;
		margin-inline: 1rem;
	}

	.music-grid {
		gap: 1rem;
		grid-template-areas:
			'photo summary'
			'photo summary'
			'read-more read-more';
	}

	.music-read-more-grid {
		grid-template-areas:
			'singer moonbender'
			'services services';
	}

	.photography-grid {
		grid-template-areas:
			'photo summary'
			'gallery gallery';
		gap: 1rem;
	}
}

/* <= 700px wide responsive flexbox/gallery */
@media only screen and (max-width: 700px) {
	div.flex-container {
		flex: 1 1 28%;
		margin: 10px;
	}

	div.flex-container i {
		flex: 0 1 28%;
		font-size: 18vw;
	}
}

/* <= 500px wide responsive gallery - 1 per row */
@media only screen and (max-width: 600px) {
	.flex-container-nowrap {
		flex-wrap: wrap;
		flex-basis: 400px;
	}

	.read-more-content {
		flex: 0 1 100%;
	}

	.tech-grid {
		grid-template-areas:
			'photo'
			'summary'
			'highlights'
			'skills';
		gap: .75rem;
		margin-inline: 1rem;
	}

	.music-grid {
		gap: .75rem;
		margin-inline: 1rem;
		grid-template-areas:
			'photo'
			'summary'
			'read-more';
	}

	.photography-grid {
		gap: .75rem;
		margin-inline: 1rem;
		grid-template-areas:
			'photo'
			'summary'
			'gallery';
	}
}

/* <= 450px high Responsive layout - When screen is squashed short, make logo-text 95vw width and reduce padding*/
@media screen and (max-height: 500px) {
	.logo {
		padding-top: 10vw;
	}

	.logo-text {
		padding-bottom: 5%;
		padding-top: 0;
		padding-left: 0;
		margin: auto;
		display: block;
		width: 95vw;
		max-width: 100%;
	}
}

/* <= 400px wide Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 415px) {
	.hero-image {
		background-image: url("../image/hero_splash_crop.png"),
			linear-gradient(45deg, rgba(90, 0, 255, .7), rgba(88, 165, 80, .7));

		@supports (background-image: url("../image/hero_splash_crop.webp")) {
			background-image: url("../image/hero_splash_crop.webp"),
				linear-gradient(45deg, rgba(90, 0, 255, .7), rgba(88, 165, 80, .7));
		}

		background-position: center top;
		background-repeat: no-repeat;
		min-height: 100%;
		max-height: 100%;
		padding-top: 10%;
	}

	.logo {
		padding-top: 20vw;
		padding-left: 2vw;
		display: block;
		width: 75vw;
		max-width: 100%;
	}

	.logo-text {
		padding-bottom: 5vw;
		padding-top: 1vw;
		padding-left: 0;
		margin-left: auto;
		margin-right: auto;
	}

	.collapsible {
		font-size: 1.125rem;
	}

	.not-collapsible {
		font-size: 1.125rem;
	}

	.header-bg {
		font-size: 1.125rem;
	}
}

/* --- Lightbox Styles --- */
.lightbox {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.95);
	backdrop-filter: blur(5px);
	justify-content: center;
	align-items: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.lightbox.active {
	display: flex;
	opacity: 1;
}

.lightbox img {
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
	border: 2px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
	transform: scale(0.9);
	transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.lightbox.active img {
	transform: scale(1);
}

.lightbox-close {
	position: absolute;
	top: 20px;
	right: 30px;
	color: #fff;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
	transition: color 0.3s ease;
}

.lightbox-close:hover {
	color: #6c5cd6;
}