@font-face {
			font-family: "Hoves-Light";
			font-style: normal;
			src: url('https://davidarcus.com/css/webfonts/TTHovesLight.woff2') format('woff2');
		}

		@font-face {
			font-family: "Hoves-Light-Italic";
			font-style: italic;
			src: url('https://davidarcus.com/css/webfonts/TTHovesLightItalic.woff2') format('woff2');
		}

		@font-face {
			font-family: "Hoves-Regular";
			src: url('https://davidarcus.com/css/webfonts/TTHovesRegular.woff2') format('woff2');
		}

		@font-face {
			font-family: "Hoves-Medium";
			font-weight: bold;
			src: url('https://davidarcus.com/css/webfonts/TTHovesMedium.woff2') format('woff2');
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		:root {
			--background-color: rgba(0, 0, 0, 1);
			--text-color: rgba(255, 255, 255, 1);
			--navbar-background: rgba(0, 0, 0, 0.8);
			--font-family: "Hoves-Regular", Helvetica, sans-serif;
			--hover-color: rgba(127, 127, 127, 1);
			--scroll-top-background: rgba(255, 255, 255, 1);
			--scroll-top-color: rgba(0, 0, 0, 1);
			--transition-duration: 0.3s;
		}

		body {
			background-color: var(--background-color);
			color: var(--text-color);
			font-family: var(--font-family);
			scroll-behavior: smooth;
		}

		img {
			max-width: 100%;
		}

		.wrapper {
			display: grid;
		}

		.navbar {
			grid-row: 1;
			position: sticky;
			font-family: "Hoves-Regular";
			top: 0;
			z-index: 1000;
			background-color: var(--navbar-background);
			padding: 1rem;
			text-align: center;
		}

		.navbar-container {
			display: flex;
			justify-content: center;
			align-items: center;
			max-width: 100%;
			max-height: 100%;
			margin: 0 auto;
		}

		.navbar-toggle {
			background: none;
			border: none;
			cursor: pointer;
			padding: 0;
		}

		.hamburger {
			grid-row: 1;
			display: block;
			width: 50px;
			height: 50px;
			font-size: 34pt;
			line-height: 34pt;
			text-align: center;
			color: var(--text-color);
			animation: none;
			transition: none;
		}

		.hamburger:before,
		.hamburger:after {
			position: absolute;
			width: 25px;
			height: 2px;
			background-color: var(--text-color);
			animation: none;
			transition: none;
		}

		.hamburger:before {
			top: -8px;
			transition: none;
		}

		.hamburger:after {
			top: 8px;
			transition: none;
		}

		.navbar-links {
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			position: absolute;
			top: 100%;
			left: 0;
			width: 100%;
			background-color: var(--navbar-background);
			opacity: 0;
			visibility: hidden;
			transition: none;
			z-index: 999;
			text-align: center;
		}

		.navbar-links.active {
			opacity: 1;
			visibility: visible;
		}

		.navbar-links li {
			padding: 1rem;
			text-align: center;
		}

		.navbar a {
			color: var(--text-color);
			text-decoration: none;
			font-size: 1rem;
			transition: color 0.001s;
			display: block;
			/* Ensure the entire link area is clickable */
		}

		.navbar a:hover {
			color: var(--hover-color);
		}

		/* Hero Image */
		.hero-image {
			grid-row: 2 / 3;
			grid-column: 1 / 2;
			position: relative;
			text-align: center;
			display: flex;
			justify-content: center;
		}

		.hero-image picture img {
			width: 100%;
			height: auto;
		}

		/* SVG Container */
		.svg-container {
			position: absolute;
			bottom: 0;
			left: 25;
			transform: translateX(50%);
			transform: translateY(40%);
			width: 70%;
			z-index: 10;
			opacity: 0;
			animation: fadeIn 2s both;
			filter: drop-shadow(1px 2px 5px rgba(0, 0, 0, 0.5));
			z-index: 2;
			padding-bottom: 3%;
		}

		.svg-container img {
			width: 100%;
			max-width: 1750px;
			height: auto;
		}

		/* Scroll animation for Bio section */
		#bio {
			opacity: 0;
			transform: translateY(20px);
			/* Initial offset */
		}

		/* Applied when the Bio section is in view */
		#bio.in-view {
			opacity: 1;
			transform: translateY(0);
		}

		.content-bio h2 {
			font-size: 2rem;
			/* margin-top: 15px; */
			margin-bottom: 15px;
		}

		.content-bio p {
			font-size: 13pt;
			text-align: left;
			margin-bottom: 1rem;
		}

		.content-bio {
			grid-row: 3;
			padding-top: 100px;
			opacity: 1;
			display: flex;
			justify-content: center;
			flex-direction: column;
			max-width: 900px;
			margin: 0 auto;
			outline: none;
			transform: translateY(0);
			transition: opacity 0.6s ease-out, transform 0.6s ease-out;
		}

		.content-section {
			padding-top: 100px;
			opacity: 1;
			display: flex;
			justify-content: center;
			flex-direction: column;
			max-width: 900px;
			margin: 0 auto;
			outline: none;
			transform: translateY(0);
			transition: opacity 0.6s ease-out, transform 0.6s ease-out;
		}

		.content-section h2 {
			font-size: 2rem;
			margin-bottom: 15px;
		}

		.content-section p {
			font-size: 1.29rem;
			text-align: justify;
			margin-bottom: 1rem;
		}

		.content-music h2 {
			padding-top: 45px;
			font-size: 2rem;
			margin-bottom: 10px;
		}

		.content-music {
			grid-row: 4;
			max-width: 900px;
			margin: 0 auto;
		}

		.bi-line-header {
			background-color: rgba(0, 0, 0, 1);
			color: rgba(255, 255, 255, 1);
		}

		.bi-line-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			max-width: 900px; /* Adjusted for max width from the examples */
			margin: 0 auto;
			padding: 0 15px; /* Add padding for better responsiveness */
			box-sizing: border-box;
		}

		.credits {
			font-size: 2rem;
			margin: 0;
			line-height: 1; /* Ensure line-height does not cause misalignment */
		}

		.logo img {
			width: auto; /* Maintain aspect ratio */
			height: 24px; /* Ensure the height is consistent with the header */
			vertical-align: middle;
		}

		.content-credits h2 {
			font-size: 2rem;
			margin: 0; /* Remove margins */
			line-height: 1; /* Ensure line-height does not cause misalignment */
		}

		.content-credits {
			padding-top: 100px;
			grid-row: 5;
			max-width: 100%;
			margin: 0 auto;
			box-sizing: border-box;
		}

		.grid-page {
			display: flex;
			justify-content: center;
			width: 100%;
		}

		.grid-container {
			display: grid;
			grid-template-columns: repeat(4, 1fr); /* Maximum of 4 columns */
			gap: 35px;
			row-gap: 60px;
			margin-top: 20px;
			padding-left: 35px;
			padding-right: 35px;
			max-width: 2040px;
			width: 100%;
		}

		.poster {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.poster picture img {
			width: 100%;
			height: auto;
			max-width: 500px;
		}

		.poster h3 {
			font-family: "Hoves-Medium";
			font-size: 14pt;
			margin-bottom: 2px;
		}

		.poster figcaption {
			margin-top: 10px;
			text-align: center;
			font-size: 1em;
		}

		.footer {
			padding-top: 5px;
			padding-bottom: 15px;
		}

		.footer p {
			font-size: 21pt;
			line-height: 28pt;
			padding-top: 15px;
		}

		.footer a:link {
			color: rgba(250, 250, 250, 1);
			text-decoration-line: none;
			font-family: "Hoves-Light";
			font-size: 21pt;
			line-height: 48pt;
			text-align: left;
		}

		.footer a:hover {
			color: rgba(107, 107, 107, 1);
			text-decoration-line: underline;
		}

		.copyright {
			display: flex;
			align-content: center;
			justify-content: center;
			text-align: center;
			font-size: 14pt;
			margin-top: 40px;
			margin-bottom: 55px;
		}

		#scrollToTop {
			position: fixed;
			bottom: 2rem;
			right: 2rem;
			font-size: 24px;
			background: var(--scroll-top-background);
			color: var(--scroll-top-color);
			border: none;
			padding: 1rem;
			cursor: pointer;
			display: none;
			transition: background-color 0.3s, color 0.3s;
			border-radius: 20%;
		}

		#scrollToTop:hover {
			background-color: var(--hover-color);
			color: var(--scroll-top-background);
		}

		/* Responsive adjustments */
		@media (max-width: 300px) {
			.bi-line-container {
				flex-direction: row; /* Ensure elements stay in a row */
				justify-content: space-between;
			}

			.credits {
				font-size: 1.5rem;
				padding-left: 60px; /* Adjust left padding */
			}

			.logo img {
				height: 20px; /* Adjust logo size for smallest screens */
				padding-right: 60px; /* Adjust right padding */
			}

			.footer p {
				font-size: 16pt;
				line-height: 19pt;
				padding-top: 15px;
			}
		}


		@media (max-width: 480px) {
			.bi-line-container {
				max-width: 300px;
			}

			.credits {
				padding-left: 5px; /* Adjust left padding */
			}

			.logo img {
				padding-right: 5px; /* Adjust right padding */
			}

			.footer p {
				font-size: 14pt;
				line-height: 19pt;
				padding-top: 15px;
				text-align: left;
			}
		}

		@media (max-width: 599px) {

			.wrapper {
				display: grid;
				grid-column: 1;
				align-self: center;
				margin-left: auto;
				margin-right: auto;
			}

			.navbar {
				grid-row: 1;
				position: sticky;
				font-family: "Hoves-Regular";
				top: 0;
				z-index: 1000;
				background-color: var(--navbar-background);
				padding: 1rem;
				text-align: center;
			}

			.navbar-toggle {
				display: block;
				background: none;
				border: none;
				cursor: pointer;
				padding: 0;
				opacity: 1;
				transition: none;
			}

			.hamburger {
				grid-row: 1;
				display: block;
				width: 50px;
				height: 50px;
				font-size: 40px;
				line-height: 40px;
				text-align: center;
				color: var(--text-color);
				opacity: 1;
				transition: none;
			}

			.hamburger:before,
			.hamburger:after {
				position: absolute;
				width: 25px;
				height: 2px;
				background-color: var(--text-color);
				opacity: 1;
				transition: none;
			}

			.content-bio h2 {
				margin-top: -50px;
				font-size: 2rem;
				margin-bottom: 15px;
			}

			.content-bio {
				grid-row: 3;
				display: flex;
				font-size: 12pt;
				line-height: 15pt;
				text-align: left;
				padding-left: 25px;
				padding-right: 25px;
				transform: none;
				transition: none;
			}

			.content-music {
				max-width: 80%;
			}

			.content-credits h2 {
				font-size: 2rem;
				max-width: 80%;
			}

			.bi-line-container {
				max-width: 444px;
			}

			.content-credits h2 {
				padding-left: 27px; /* Adjust left padding */
			}

			.logo img {
				padding-right: 27px; /* Adjust right padding */
			}

			.content-credits {
				padding-top: 100px;
				grid-row: 5;
				max-width: 900px;
				margin: 0 auto;
			}

			.content-section {
				max-width: 80%;
			}

			.grid-container {
				grid-template-columns: repeat(1, 1fr); /* 1 column for small screens */
			}

			.footer p {
				font-size: 16pt;
				line-height: 19pt;
				padding-top: 15px;
			}
		}


		@media (min-width: 768px) {

			.navbar {
				display: grid;
				position: sticky;
				grid-row: 1;
				opacity: 0;
				animation: fadeIn 2s 0.5s forwards;
			}

			.navbar a {
				font-size: 1.2rem;
			}

			.navbar-toggle {
				display: none;
			}

			.navbar-links {
				position: relative;
				top: auto;
				left: auto;
				width: auto;
				display: flex;
				opacity: 1;
				visibility: visible;
				background-color: transparent;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}

			.navbar-links li {
				padding: 0;
				margin: 0 1rem;
			}

			.navbar-links li a {
				text-align: center;
			}

			.footer p {
				font-size: 18pt;
				line-height: 21pt;
				padding-top: 15px;
			}
		}


		@media (min-width: 600px) and (max-width: 824px) {

			.wrapper {
				display: grid;
				grid-column: 1 / 2;
				align-self: center;
				margin-left: auto;
				margin-right: auto;
			}

			.hamburger {
				grid-row: 1;
				display: block;
				width: 50px;
				height: 50px;
				font-size: 40px;
				line-height: 40px;
				text-align: center;
				color: var(--text-color);
				animation: none;
				transition: none;
			}

			.content-bio {
				grid-row: 3;
				display: flex;
				font-size: 12pt;
				line-height: 15pt;
				text-align: left;
				padding-left: 25px;
				padding-right: 25px;
				transform: none;
				transition: none;
			}

			.content-music {
				max-width: 85%;
			}

			.bi-line-container {
				max-width: 550px;
			}

			.grid-container {
				grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller screens */
			}

			.footer p {
				font-size: 18pt;
				line-height: 21pt;
				padding-top: 15px;
				padding-left: 25px;
			}

		}


		@media (min-width: 825px) and (max-width: 1299px) {
			.wrapper {
				display: grid;
				grid-column: 1 / 3;
				align-self: center;
				margin-left: auto;
				margin-right: auto;
			}

			.content-bio {
				grid-row: 3;
				display: flex;
				margin-left: auto;
				margin-right: auto;
				max-width: 700px;
				line-height: 15pt;
				text-align: left;
				transform: none;
				transition: none;
			}

			.content-music {
				max-width: 700px;
			}

			.bi-line-container {
				max-width: 700px;
			}

			.grid-container {
				grid-template-columns: repeat(3, 1fr); /* 3 columns for medium screens */
			}

			.footer {
				padding-left: 50px;
			}

			footer h2 {
			  padding-left: 50px;
			}
		}


		@media (min-width: 1300px) and (max-width: 2040px) {

			.wrapper {
				display: grid;
				max-width: 2040px;
				align-self: center;
				margin-left: auto;
				margin-right: auto;
			}

			.content-bio h2 {
				/* margin-top: 55px; */
			}

			.content-music {
				max-width: 900px;
				margin: 0 auto;
			}

			.bi-line-container {
				max-width: 900px;
			}

			.grid-container {
				grid-template-columns: repeat(4, 1fr);
			}
		}


		@media (prefers-reduced-motion: no-preference) {
			.content-section {
				transition: opacity 1s ease-out, transform 1s ease-out;
			}
		}

		@media (prefers-reduced-motion: reduce) {

			.hero-image,
			.navbar,
			.content-section {
				visibility: visible;
				opacity: 1;
				animation: none;
				transition: none;
				transform: none;
			}
		}

		@keyframes fadeIn {
			to {
				opacity: 1;
			}
		}