/* ============================================
   MODERN ANIMATIONS & CSS VARIABLES
   ============================================ */
:root {
	--primary-color: #f1cfab;
	--bg-color: #151a20;
	--text-color: #ffffff;
	--transition-fast: 0.3s;
	--transition-medium: 0.5s;
	--transition-slow: 0.8s;
	--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
	--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 80px; /* Account for fixed nav */
}

/* Animation keyframes */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes slideInFromBottom {
	from {
		opacity: 0;
		transform: translateY(50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

/* Scroll-triggered animation classes */
.fade-in-up {
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.fade-in-up.animate {
	opacity: 1;
	transform: translateY(0);
}

.fade-in-left {
	opacity: 0;
	transform: translateX(-15px);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.fade-in-left.animate {
	opacity: 1;
	transform: translateX(0);
}

.fade-in-right {
	opacity: 0;
	transform: translateX(15px);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.fade-in-right.animate {
	opacity: 1;
	transform: translateX(0);
}

.fade-in {
	opacity: 0;
	transition: opacity 0.8s var(--ease-out);
}

.fade-in.animate {
	opacity: 1;
}

.scale-in {
	opacity: 0;
	transform: scale(0.95);
	transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.scale-in.animate {
	opacity: 1;
	transform: scale(1);
}

/* Staggered animation delays */
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }
.animate-delay-5 { transition-delay: 0.5s; }

@media all and (min-width: 1600px) {
	body {
		font-size:	16px;
	}
	
	#hero {
		height:		779px;
		padding-top:	220px;
		background:	url(../img/hero-1900.png);
	}
	
	#hero h1 {
		font-size:	4em;
	}
	
	#creds h3 {
		font-size:	2.125em;
	}
	
	#thumbs img {
		width:		160px;
		height:		90px;
	}
	
	#thumbs .row {
		margin-bottom:	40px;
	}
	
	#bio-pic {
		max-width:	600px;
		width:		auto;
		height:		auto;
	}
	
	#desk-pic {
		max-width:	1000px;
		width:		auto;
		height:		auto;
	}
	
	#perform {
		width:		553px;
		height:		528px;
	}

	#sheet {
		width:		680px;
	}
	
	#contact-pic {
		width:		528px;
		height:		396px;
	}
	
	.content {
		width:		1500px;
	}
	
	.content h1 {
		width:		725px;
	}
	
	.left-half {
		width:		725px;
	}
	
	.right-half {
		width:		725px;
	}
		
}

@media all and (min-width: 1280px) and (max-width: 1599px) {
	body {
		font-size:	14px;
	}
	
	#hero {
		height:		612px;
		padding-top:	220px;
		background:	url(../img/hero-1600.png);
	}
	
	#hero h1 {
		font-size:	3.5em;
	}
	
	#creds h3 {
		font-size:	1.75em;
	}
	
	#thumbs img {
		width:		130px;
		height:		73px;
	}
	
	#thumbs .row {
		margin-bottom:	20px;
	}
		
	#bio-pic {
		max-width:	600px;
		width:		auto;
		height:		auto;
	}
	
	#desk-pic {
		max-width:	1000px;
		width:		auto;
		height:		auto;
	}
	
	#perform {
		width:		553px;
		height:		528px;
	}

	#sheet {
		width:		600px;
	}
	
	#contact-pic {
		width:		528px;
		height:		396px;
	}
		
	.content {
		width:		1240px;
	}
	
	.content h1 {
		width:		595px;
	}
	
	.left-half {
		width:		595px;
	}
	
	.right-half {
		width:		595px;
	}
}

@media all and (min-width: 0px) and (max-width: 1279px) {
	body {
		font-size:	12px;
	}
	
	#hero {
		height:		546px;
		padding-top:120px;
		background:	url(../img/hero-1280.png);
	}
		
	#hero h1 {
		font-size:	3.5em;
	}
	
	#creds h3 {
		font-size:	1.75em;
	}
	
	#thumbs img {
		width:		95px;
		height:		54px;
	}
	
	#thumbs .row {
		margin-bottom:	20px;
	}
		
	#bio-pic {
		max-width:	500px;
		width:		auto;
		height:		auto;
	}
	
	#desk-pic {
		max-width:	800px;
		width:		auto;
		height:		auto;
	}
	
	#perform {
		width:		442px;
		height:		422px;
	}
	
	#contact-pic {
		width:		422px;
		height:		317px;
	}
	
	.content {
		width:		960px;
	}
	
	.content h1 {
		width:		455px;
	}
	
	.left-half {
		width:		455px;
	}
	
	.right-half {
		width:		455px;
	}
}

body {
	margin:			0;
	padding:		0;
	color:			#ffffff;
	background:		url(../img/bg.png);
	font-family:	Montserrat;
	font-weight:	300;
}

h1 {
	font-weight:	200;
}

p, li {
	font-weight:	300;
	font-size:		1.125em;
	line-height:	2em;
}

a {
	color:			#f1cfab;
	text-decoration: none;
}

a:visited {
	color:			#f1cfab;
}

nav {
	position:		fixed;
	top:			0;
	width:			100%;
	padding:		15px 0px;
	text-align:		center;
	z-index:		100;
}

nav {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background-color var(--transition-medium), box-shadow var(--transition-medium);
}

nav.scrolled {
	background-color: rgba(21, 26, 32, 0.95);
	box-shadow: var(--shadow-md);
}

nav a {
	margin:			0px 15px;
	color:			#ffffff;
	letter-spacing: 2px;
	text-decoration:none;
	font-size:		1.125em;
	font-weight:	300;
	position:		relative;
	transition:		color var(--transition-fast), transform var(--transition-fast);
	display:		inline-block;
}

nav a:visited {
	color:			#ffffff;
}

nav a::after {
	content:		'';
	position:		absolute;
	width:			0;
	height:			2px;
	bottom:			-5px;
	left:			50%;
	background-color: var(--primary-color);
	transition:		width var(--transition-fast), left var(--transition-fast);
	transform:		translateX(-50%);
}

nav a:hover {
	color:			#f1cfab;
	transform:		translateY(-2px);
}

nav a:hover::after {
	width:			100%;
	left:			0;
	transform:		translateX(0);
}

.catalog-nav-link {
	line-height:		1.4;
	text-align:		center;
}

#backing {
	position:		absolute;
	top:			0px;
	left:			0px;
	right:			0px;
	bottom:			0px;
	background:		url(../img/bg.png);
	opacity:		0;
	z-index:		-200;
	transition:		opacity 0.5s;
}

#backing.scrolled {
	opacity:		1;
}

#music-container {
	float:			right;
	position:		relative;
	margin-left:	15px;
	text-align:		right;
}

#music {
	position:		relative;
	height:			16px;
	margin-bottom:	5px;
	cursor:			pointer;
	display:		inline-block;
}

#paused {
	display:		none;
	position:		absolute;
	top:			5px;
	left:			-5px;
	font-size:		13px;
}

#track {
	display:		block;
	width:			100%;
	margin-top:		5px;
	padding-top:	0;
	font-size:		.875em;
	text-align:		right;
	white-space:	nowrap;
	clear:			both;
}

#hero {
	width:			100%;
	background-position: center top;
	background-attachment: fixed;
	transition:		opacity 1s, transform 0.3s;
	position:		relative;
	overflow:		hidden;
}

#hero::before {
	content:		'';
	position:		absolute;
	top:			0;
	left:			0;
	right:			0;
	bottom:			0;
	background:		linear-gradient(135deg, rgba(21, 26, 32, 0.3) 0%, rgba(241, 207, 171, 0.1) 100%);
	z-index:		1;
}

#hero .content {
	position:		relative;
	z-index:		2;
}

#hero h1 {
	margin:			0px;
	padding-bottom:	0px;
	color:			#f1cfab;
	border:			none;
	animation:		fadeInUp 1s var(--ease-out) 0.3s both;
	text-shadow:	0 4px 20px rgba(0, 0, 0, 0.5);
}

#creds h3 {
	float:			left;
	padding:		0px 10px;
	margin-top:		50px;
	color:			rgba(255, 255, 255, 0);
	border-left:	2px solid rgba(255, 255, 255, 0);
	font-weight:	200;
	transition:		margin 0.8s, color 0.8s, border-color 0.8s;
}

#creds h3:first-child {
	padding-left:	0px;
}

#creds h3.active {
	color:			rgba(255, 255, 255, 255);
	border-left:	2px solid rgba(255, 255, 255, 255);
	margin-top:		0px;	
}

#creds h3.active:first-child {
	border-left:	none;
}

/* Bio section wrapper - new flex layout */
#bio-section-wrapper {
	position:		relative;
	width:			100%;
	display:		flex;
	gap:			30px;
	align-items:	flex-start;
	margin-bottom:	40px;
}

/* Studio Comp container on the left */
#studio-comp-container {
	position:		relative;
	flex:			1.2;
	min-width:		0;
	overflow:		visible;
}

/* Bio pic container on the right */
#bio-pic-container {
	flex:			0 0 auto;
	min-width:		0;
}

#bio-right {
	text-align:		center;
	display:		flex;
	flex-direction:	row;
	gap:			15px;
	align-items:	flex-start;
	justify-content: center;
	flex-wrap:		wrap;
}

#bio-pic {
	width:			100%;
	max-width:		600px;
	height:			auto;
	display:		block;
	transition:		transform 0.3s var(--ease-out), opacity 0.3s;
}

#bio-pic:hover {
	transform:		scale(1.02);
}

/* Dark overlay for image that can be controlled by JavaScript */
#image-dark-overlay {
	position:		absolute;
	top:			0;
	left:			0;
	right:			0;
	bottom:			0;
	background:		rgba(0, 0, 0, 0);
	transition:		background 0.4s var(--ease-out);
	pointer-events:	none;
	z-index:		1;
}

#desk-pic {
	width:			100%;
	max-width:		1000px;
	height:			auto;
	display:		block;
	transition:		transform 0.3s var(--ease-out);
	position:		relative;
	z-index:		0;
}

#desk-pic:hover {
	transform:		scale(1.02);
}

/* Text overlay on Studio Comp - interactive hover effects */
#bio-text-overlay {
	position:		absolute;
	top:			0;
	left:			0;
	right:			0;
	bottom:			0;
	pointer-events:	auto;
	z-index:		2;
	cursor:			text;
	overflow:		visible;
}

#bio-text-overlay > div {
	position:		relative;
	min-height:		100%;
	padding:		20px;
	padding-bottom:	120px;
	display:		flex;
	flex-direction:	column;
	justify-content: flex-start;
	overflow:		visible;
}

/* Text paragraphs - no background boxes, just text with shadow */
.bio-text-paragraph {
	color:			#ffffff;
	text-shadow:	2px 2px 6px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.5);
	margin-bottom:	15px;
	opacity:		0.7;
	transition:		opacity 0.4s var(--ease-out);
	line-height:	1.8;
}

#bio-text-overlay .link-button {
	pointer-events:	auto;
	transition:		opacity 0.4s var(--ease-out);
	margin-top:		10px;
	margin-bottom:	0;
}

/* Hide overlay text on smaller screens or if user prefers text below */
@media (max-width: 1279px) {
	#bio-text-overlay {
		display:	none;
	}
	
	#bio-text-below {
		display:	block !important;
	}
}

#perform {
	margin-top:		180px;
	opacity:		0;
	transition:		margin 1s var(--ease-out), opacity 1s var(--ease-out), transform 0.3s var(--ease-out);
	transform:		scale(0.95);
}

#perform.active {
	margin-top:		80px;
	opacity:		1;
	transform:		scale(1);
}

#perform:hover {
	transform:		scale(1.02);
}

#performance-details h3 {
	margin-top:		40px;
	margin-bottom:	20px;
}

#performance-details h3:first-child {
	margin-top:		20px;
}

#performance-details p {
	margin-bottom:	0px;
}

#performance-details span {
	font-weight:	300;
	color:			rgba(255, 255, 255, 0.75);
}

#thumbs a {
	margin-right:	25px;
}

#thumbs a:last-child {
	margin-right:	0px;
}

#thumbs #external {
	float:			right;
}

#contact-pic {
	position:		absolute;
	top:			50%;
	left:			50%;
	transform:		translate(-50%, -50%) scale(1);
	width:			80%;
	max-width:		800px;
	height:			auto;
	opacity:		0.25;
	z-index:		1;
	margin:			0 !important;
	transition:		opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
	pointer-events:	none;
}

#contact-pic.active {
	opacity:		0.25;
	margin-top:		0 !important;
	transform:		translate(-50%, -50%) scale(1);
}

#contact-pic:hover {
	opacity:		0.3;
	transform:		translate(-50%, -50%) scale(1.02);
}

#contact-details a, #contact-details span {
	font-size:		0.8em;
}

#contact-details h3 {
	font-size:		1em;
	margin-bottom:	.3em;
}

#addy {
	color:			#f1cfab;
}

.link-button, .link-button:visited {
	display: 		inline-block;
	margin-top:		30px;
	padding:		12px 24px;
	background:		#f1cfab;
	color:			#151a20;
	border-radius:  6px;
	font-size:		1.15em;
	font-weight:	400;
	position:		relative;
	overflow:		hidden;
	transition:		all var(--transition-fast) var(--ease-out);
	box-shadow:		var(--shadow-sm);
	cursor:			pointer;
	text-align:		center;
}

.link-button::before {
	content:		'';
	position:		absolute;
	top:			0;
	left:			-100%;
	width:			100%;
	height:			100%;
	background:		linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition:		left 0.5s;
}

.link-button:hover {
	transform:		translateY(-3px) scale(1.05);
	box-shadow:		var(--shadow-lg);
	background:		#e8c099;
}

.link-button:hover::before {
	left:			100%;
}

.link-button:active {
	transform:		translateY(-1px) scale(1.02);
}

.content {
	margin:			0 auto;
}

.content h1 {
	margin-top:		50px;
	padding:		50px 0px 10px 0px;
	border-bottom:	1px solid #f1cfab;
	font-size:		2.5em;
	position:		relative;
	overflow:		hidden;
}

.content h1::after {
	content:		'';
	position:		absolute;
	bottom:			0;
	left:			-100%;
	width:			100%;
	height:			2px;
	background:		linear-gradient(90deg, transparent, var(--primary-color), transparent);
	animation:		slideIn 1s var(--ease-out) 0.5s forwards;
}

@keyframes slideIn {
	to {
		left:			100%;
	}
}

.content h3 {
	margin-bottom:	40px;
	text-align:		center;
}

.bar {
	float:			left;
	height:			20px;
	width:			6px;
	margin-right:	2px;
	background:		#ffffff;
	transition:		height .5s, margin .5s;
}

.left-half {
	float:			left;
	min-height:		300px;
	margin-right:	25px;
	text-align:		center;
	opacity:		1; /* Visible by default */
}

.left-half.fade-in-left {
	opacity:		0; /* Only hide if animation class is present */
}

.left-half.fade-in-left.animate {
	opacity:		1;
	transform:		translateX(0);
}

.right-half {
	float:			left;
	margin-left:	25px;
	text-align:		center;
	opacity:		1; /* Visible by default */
}

.right-half.fade-in-right {
	opacity:		0; /* Only hide if animation class is present */
}

.right-half.fade-in-right.animate {
	opacity:		1;
	transform:		translateX(0);
}

.right {
	text-align:		right;
}

.right h1 {
	float:			right;
}

.contacts {
	display:		flex;
	flex:			0 0 auto;
	gap: 20px;
}

.contacts > div {
	width:			100%;
}

.contact .fa {
	float:			left;
	margin:			6px 30px 40px 0px;
	font-size:		2em;
	transition:		transform var(--transition-fast), color var(--transition-fast);
}

.contact:hover .fa {
	transform:		scale(1.2) rotate(5deg);
	color:			var(--primary-color);
}

.contact {
	transition:		transform var(--transition-fast);
	opacity:		1; /* Ensure contact items are visible by default */
}

.contact.fade-in-up {
	opacity:		0; /* Only hide if they have the animation class */
}

.contact.fade-in-up.animate {
	opacity:		1;
}

.contact:hover {
	transform:		translateX(5px);
}

/* Ensure contacts container and contact details are visible */
.contacts {
	opacity:		1 !important;
}

#contact-details {
	opacity:		1 !important;
	position:		relative;
	z-index:		2;
	background:		rgba(21, 26, 32, 0.4);
	padding:		30px;
	border-radius:	8px;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

#contact-details.fade-in-right {
	opacity:		1 !important; /* Override fade-in-right for contact section */
	transform:		translateX(0) !important;
}

/* Image hover effects */
img {
	transition:		transform var(--transition-medium) var(--ease-out), filter var(--transition-medium);
}

img:hover {
	filter:			brightness(1.1);
}

/* Section animations - Only apply to specific sections, not all divs */
.content > div:not(.left-half):not(.right-half):not(#bio-right):not(#performance-details):not(#contact-details):not(#page-navigation) {
	opacity:		0;
	transform:		translateY(15px);
	transition:		opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.content > div:not(.left-half):not(.right-half):not(#bio-right):not(#performance-details):not(#contact-details):not(#page-navigation).animate {
	opacity:		1;
	transform:		translateY(0);
}

/* List item animations - Make subtle, only if they have the class */
ol li.fade-in-up, ul li.fade-in-up {
	opacity:		0;
	transform:		translateY(10px);
	transition:		opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

ol li.fade-in-up.animate, ul li.fade-in-up.animate {
	opacity:		1;
	transform:		translateY(0);
}

/* YouTube iframe animations */
iframe {
	transition:		transform var(--transition-medium), box-shadow var(--transition-medium);
	border-radius:	8px;
	box-shadow:		var(--shadow-sm);
}

iframe:hover {
	transform:		scale(1.02);
	box-shadow:		var(--shadow-md);
}

/* Footer animation */
footer {
	opacity:		0;
	transform:		translateY(20px);
	transition:		opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

footer.animate {
	opacity:		1;
	transform:		translateY(0);
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* Mobile devices (phones, up to 768px) */
@media (max-width: 768px) {
	/* Navigation - make it stack vertically or use hamburger menu */
	nav {
		padding:		15px 0 !important;
		transition:		padding 0.3s ease, font-size 0.3s ease;
	}
	
	/* When scrolled on mobile - make nav MUCH smaller */
	nav.scrolled {
		padding:		5px 0 !important;
	}
	
	nav .content {
		display:		flex;
		flex-direction: column;
		align-items:	center;
		gap:			10px;
		padding:		10px 0;
		transition:		gap 0.3s ease;
	}
	
	/* When scrolled - reduce gap between nav items */
	nav.scrolled .content {
		gap:			3px !important;
		padding:		0 !important;
	}
	
	nav a {
		margin:			5px 0 !important;
		font-size:		0.9em !important;
		padding:		8px;
		display:		block;
		transition:		font-size 0.3s ease, padding 0.3s ease, margin 0.3s ease;
	}
	
	/* When scrolled - make nav links much smaller */
	nav.scrolled a {
		font-size:		0.7em !important;
		padding:		3px 8px !important;
		margin:			2px 0 !important;
		line-height:	1.2 !important;
	}
	
	/* Hide music player when scrolled on mobile */
	nav.scrolled #music-container {
		display:		none !important;
	}
	
	/* Make catalog link smaller when scrolled */
	nav.scrolled .catalog-nav-link {
		font-size:		0.65em !important;
		line-height:	1.1 !important;
		padding:		3px 5px !important;
	}
	
	.catalog-nav-link {
		font-size:		0.85em !important;
		line-height:	1.3;
	}
	
	/* Content width - make it full width on mobile */
	.content {
		width:			100% !important;
		padding:		0 15px;
	}
	
	/* Stack left-half and right-half vertically on mobile */
	.left-half,
	.right-half {
		float:			none !important;
		width:			100% !important;
		margin:			20px 0 !important;
	}
	
	/* Images - make responsive */
	#sheet {
		width:			100% !important;
		max-width:		100% !important;
		height:			auto !important;
		margin:			0 !important;
	}
	
	#perform {
		width:			100% !important;
		max-width:		100% !important;
		height:			auto !important;
		margin:			0 !important;
	}
	
	/* YouTube iframes - make responsive */
	iframe {
		width:			100% !important;
		max-width:		100% !important;
		height:			auto !important;
		aspect-ratio:	16 / 9;
		min-height:		200px;
	}
	
	/* Bio section - stack vertically on mobile */
	#bio-section-wrapper {
		flex-direction: column !important;
		gap:			20px !important;
	}
	
	#studio-comp-container,
	#bio-pic-container {
		flex:			1 1 100% !important;
		width:			100% !important;
	}
	
	/* Contact section - stack contacts */
	.contacts {
		flex-direction: column !important;
		gap:			15px !important;
	}
	
	/* Hero section adjustments */
	#hero {
		height:			auto !important;
		padding:		100px 20px 40px 20px !important;
	}
	
	#hero h1 {
		font-size:		2em !important;
	}
	
	#creds {
		display:		flex;
		flex-direction: column;
		align-items:	center;
		gap:			10px;
	}
	
	#creds h3 {
		font-size:		1.2em !important;
		padding:		5px !important;
		float:			none !important;
	}
	
	/* Headings */
	.content h1 {
		font-size:		1.8em !important;
		padding:		30px 0 10px 0 !important;
		width:			100% !important;
	}
	
	/* Text sizing */
	body {
		font-size:		14px !important;
	}
	
	p, li {
		font-size:		1em !important;
		line-height:	1.6em !important;
	}
	
	/* Link buttons - full width on mobile */
	.link-button {
		display:		block !important;
		width:			100%;
		margin:			15px 0 !important;
		text-align:		center;
		box-sizing:		border-box;
	}
	
	/* Music player - adjust for mobile */
	#music-container {
		float:			none !important;
		margin:			10px 0 !important;
		text-align:		center !important;
		width:			100%;
	}
	
	#track {
		text-align:		center !important;
		font-size:		0.75em !important;
		white-space:	normal;
	}
	
	/* Performance section adjustments */
	#performance-details {
		width:			100% !important;
		margin:			20px 0 !important;
	}
	
	/* Contact pic adjustments */
	#contact-pic {
		width:			100% !important;
		max-width:		100% !important;
		opacity:		0.15 !important;
	}
	
	/* Right-aligned sections */
	.right {
		text-align:		left !important;
	}
	
	.right h1 {
		float:			none !important;
		text-align:		left !important;
	}
}

/* Tablet devices (768px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	.content {
		width:			95% !important;
		padding:		0 20px;
	}
	
	.left-half,
	.right-half {
		width:			48% !important;
		margin:			1% !important;
	}
	
	iframe {
		width:			100% !important;
		max-width:		100% !important;
		height:			auto !important;
		aspect-ratio:	16 / 9;
		min-height:		250px;
	}
	
	#sheet,
	#perform {
		width:			100% !important;
		max-width:		100% !important;
		height:			auto !important;
		margin:			0 !important;
	}
	
	nav a {
		margin:			0px 8px;
		font-size:		1em;
	}
	
	#hero h1 {
		font-size:		3em !important;
	}
}