@font-face {
		font-family: 'IBM';
		src: url('Fonts/IBM_Plex_Serif,Markazi_Text,Noto_Serif,Zilla_Slab/IBM_Plex_Serif/IBMPlexSerif-Regular.ttf') format('truetype');
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'IBMB';
		src: url('Fonts/IBM_Plex_Serif,Markazi_Text,Noto_Serif,Zilla_Slab/IBM_Plex_Serif/IBMPlexSerif-Bold.ttf') format('truetype');
		font-weight: 700;
		font-style: normal;
		font-display: swap;
	}

	body {
		margin: 2.5rem;
		font-family: 'IBM', 'Segoe UI', serif;
		background-color: #020202;
		color: white;
		text-align: center;
		overflow-x: hidden;
		position: relative;
		min-height: 100vh;
	}

	.logo {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 0;
		margin-bottom: 0;
		width: 80%;
		max-width: 62.5rem;
		margin-left: auto;
		margin-right: auto;
		left: 2.5rem;
		gap: 3.75%;
		position: relative;
		flex-direction: row;
	}

	.logo img {
		width: 350px;
		max-width: 900.4375rem;
		height: auto;
	}

	.nav-links {
		font-family: 'IBMB', serif;
		margin-bottom: 5%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nav-item {
		position: relative;
		display: inline-block;
	}

	.nav-link {
		color: lightgray;
		text-decoration: none;
		margin: 0 0.9375rem;
		font-size: 1.25rem;
		transition: color 0.3s ease;
		cursor: pointer;
	}

	.nav-link:hover {
		color: #FFFFFF;
	}

	.dropdown {
		display: none;
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		background-color: black;
		min-width: 9.375rem;
		box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
		z-index: 1;
		padding: 0;
	}

	.dropdown a {
		color: lightgray;
		text-decoration: none;
		display: block;
		padding: 0.5rem 0.9375rem;
		font-size: 1rem;
		transition: color 0.3s ease, background-color 0.3s ease;
	}

	.dropdown a:hover {
		color: #FFFFFF;
		background-color: #333333;
	}

	.nav-item:hover .dropdown {
		display: block;
	}

	.mobile-nav {
		display: none;
	}

	.hamburger {
		cursor: pointer;
		position: fixed;
		margin-top: 0.25rem;
		margin-right: -4.125rem;
		padding: 0.625rem;
	}

	.hamburger span {
		display: block;
		width: 1.875rem;
		height: 0.1875rem;
		background-color: white;
		margin: 0.3125rem 0;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	.hamburger.active span:nth-child(1) {
		-webkit-transform: rotate(45deg) translate(0.3125rem, 0.3125rem);
		transform: rotate(45deg) translate(0.3125rem, 0.3125rem);
	}

	.hamburger.active span:nth-child(2) {
		opacity: 0;
	}

	.hamburger.active span:nth-child(3) {
		-webkit-transform: rotate(-45deg) translate(0.4375rem, -0.4375rem);
		transform: rotate(-45deg) translate(0.4375rem, -0.4375rem);
	}

	.mobile-menu {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.95);
		z-index: 100;
		flex-direction: column;
		justify-content: center;
		padding: 1.25rem;
	}

	.mobile-menu.active {
		display: flex;
		padding-top: 10%;
	}

	.mobile-nav-link {
		color: lightgray;
		text-decoration: none;
		font-size: 1.5rem;
		padding: 1.25rem;
		display: block;
		transition: color 0.3s ease;
	}

	.mobile-nav-link:hover {
		color: white;
	}

	.mobile-nav-item {
		position: relative;
	}

	.mobile-dropdown {
		display: none;
		background-color: black;
		padding: 0.625rem;
	}

	.mobile-dropdown a {
		color: lightgray;
		text-decoration: none;
		font-size: 1.125rem;
		padding: 0.625rem;
		display: block;
		transition: color 0.3s ease;
	}

	.mobile-dropdown a:hover {
		color: white;
	}

	.profile-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80%;
		max-width: 62.5rem;
		margin: 0 auto;
		gap: 3.75%;
		flex-direction: row;
	}

	.profile-picture {
		width: 25rem;
		height: 25rem;
		overflow: hidden;
		background-color: #020202;
		border-radius: 0.125rem;
		position: relative;
	}

	.profile-picture img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
	}

	#bouncing-ball.bouncing {
		position: fixed;
		width: 12.5rem;
		height: 12.5rem;
		object-fit: cover;
		z-index: 10;
		cursor: grab;
		border-radius: 70%;
		display: block;
	}

	#bouncing-ball.bouncing:active {
		cursor: grabbing;
	}

	.center-text {
		font-size: 1.25rem;
		text-align: left;
		flex-grow: 1;
		border-radius: 0.125rem;
		background-color: #020202;
		padding: 0.625rem;
		max-width: 31.25rem;
	}

	.center-text p:first-child {
		font-size: 2.5rem;
		margin: 0;
	}

	.center-text p:last-child {
		font-size: 1.25rem;
		margin: 0;
	}

	.social-media {
		display: flex;
		gap: 1.875%;
		justify-content: center;
		margin-top: 0.625rem;
		margin-left: -83%;
	}

	.social-media a {
		display: inline-block;
		width: 2.125rem;
		height: 2.125rem;
	}

	.social-media img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
	}

	.social-media img:hover {
		transform: scale(1.1);
		opacity: 1;
	}

	.social-media-2 {
		font-size: 1.25rem;
		display: flex;
		gap: 1%;
		justify-content: center;
		margin-top: 10.5rem;
		padding-bottom: 1.25rem;
	}

	.social-media-2 a {
		color: gray;
		text-decoration: none;
		font-size: 1.875rem;
		transition: color 0.4s ease-in-out;
	}

	.social-media-2 a:hover {
		color: white;
	}

	.recent-work-title {
		font-size: 2.25rem;
		font-weight: bold;
		margin: 1% 0 1.25%;
		padding: 0.625rem 1.25rem;
	}

	.gallery-container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0.9375rem;
		max-width: calc(100% - 5rem);
		margin: 0 auto;
		padding: 0.625rem;
		margin-bottom: 5rem;
	}

	.mobile-gallery {
		display: none;
	}

	.gallery-column, .mobile-column {
		display: flex;
		flex-direction: column;
		gap: 0.9375rem;
	}

	.gallery-column img, .mobile-column img {
		width: 100%;
		height: auto;
		display: block;
		cursor: pointer;
		border-radius: 0.125rem;
		transition: transform 0.1s ease-in-out;
	}

	.gallery-column img:hover, .mobile-column img:hover {
		transform: scale(1.02);
	}

	.modal {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
		z-index: 1000;
		justify-content: center;
		align-items: center;
	}

	.modal.active {
		display: flex;
		backdrop-filter: blur(0.3125rem);
	}

	.modal-content {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-img {
		max-width: 95%;
		max-height: 95%;
		width: auto;
		height: auto;
		border-radius: 0;
		z-index: 10;
	}

	.close-btn {
		position: absolute;
		top: 3.75%;
		right: 3.75%;
		cursor: pointer;
		z-index: 20;
	}

	.close-btn img {
		width: 2rem;
		height: 2rem;
	}

	.prev-btn, .next-btn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 3.125rem;
		height: 3.125rem;
		z-index: 20;
		cursor: pointer;
	}

	.prev-btn {
		left: 2.5%;
	}

	.next-btn {
		right: 2.5%;
	}

	.prev-btn img, .next-btn img {
		width: 1.875rem;
		height: 1.875rem;
	}

	.scroll-top-btn {
		position: absolute;
		bottom: 4.75rem;
		left: 50%;
		transform: translateX(-50%);
		width: 5.125rem;
		height: 5.125rem;
		background-color: transparent;
		border: none;
		border-radius: 50%;
		transition: opacity 0.3s ease;
		opacity: 0.7;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.scroll-top-btn:hover {
		background-color: transparent;
		opacity: 1;
	}

	.scroll-top-btn img {
		width: 2.5rem;
		height: 2.5rem;
		object-fit: contain;
	}

	.copyright {
		font-size: 15px;
		color: #666666 !important;
	}
	
	@media (max-width: 90rem) {
		.nav-links {
			display: none;
		}
		
		.copyright {
			font-size: 15px;
			color: #666666 !important;
		}

		.mobile-nav {
			display: block;
		}

		.hamburger {
			position: absolute;
			top: 2.5rem;
			right: 2rem;
			z-index: 201;
		}

		.logo {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 0;
			margin-bottom: 0;
			width: 80%;
			max-width: 62.5rem;
			margin-left: auto;
			margin-right: auto;
			left: 3.75rem;
			gap: 3.75%;
			position: relative;
			flex-direction: row;
		}

		.logo img {
			width: 350px;
			max-width: 900.4375rem;
			height: auto;
		}

		.profile-container {
			flex-direction: column;
			width: 90%;
			max-width: 50rem;
			padding: 0 1.25rem;
		}

		.profile-picture {
			width: 15rem;
			height: 15rem;
		}

		#bouncing-ball.bouncing {
			width: 10rem;
			height: 10rem;
		}

		.center-text {
			text-align: center;
			width: 100%;
		}

		.center-text p:first-child {
			font-size: 1.75rem;
		}

		.center-text p:last-child {
			font-size: 1rem;
		}

		.social-media {
			margin: 0 auto;
			gap: 1.875rem;
		}

		.gallery-container {
			display: none;
		}

		.mobile-gallery {
			display: flex;
			flex-direction: column;
			width: 90%;
			max-width: 50rem;
			margin: 0 auto;
			padding: 0 1.25rem;
		}

		.scroll-top-btn {
			position: absolute;
			bottom: 6.75rem;
			left: 50%;
			transform: translateX(-50%);
			width: 3.125rem;
			height: 3.125rem;
			background-color: transparent;
			border: none;
			border-radius: 50%;
			transition: opacity 0.3s ease;
			opacity: 0.7;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.scroll-top-btn:hover {
			background-color: transparent;
			opacity: 1;
		}

		.scroll-top-btn img {
			width: 2.5rem;
			height: 2.5rem;
			object-fit: contain;
		}
		
		.social-media-2 {
			display: flex;
			gap: 2%;
			justify-content: center;
			margin-top: 10.5rem;
			padding-bottom: 1.25rem;
		}

		.social-media-2 a {
			color: gray;
			text-decoration: none;
			font-size: 1.875rem;
			transition: color 0.4s ease-in-out;
		}

		.social-media-2 a:hover {
			color: white;
		}
		
		.modal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.8);
			z-index: 1000;
			justify-content: center;
			align-items: center;
		}

		.modal.active {
			display: flex;
			backdrop-filter: blur(0.3125rem);
		}

		.modal-content {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.modal-img {
			max-width: 95%;
			max-height: 95%;
			width: auto;
			height: auto;
			border-radius: 0;
			z-index: 10;
		}
	}