/* Keep your existing styles for body, div, p, h1, h2, h3, h4, h5, and h6 */
body,
div,
p,
a {
	font-family: 'Inter', serif;
}

a {
	color: #212529;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'IM Fell English SC', serif;
}



/* Styles for the responsive image container */
.hero {
	background-image: url('../img/attic-cats-hero-4.jpg');
	background-size: cover;
	background-position: center;
	height: 80vh;
	/* Adjust the height as needed */
	position: relative;
	/* Add this line to enable positioning of child elements */
}

.content-box {
	position: absolute;
	top: 50%;
	right: 0;
	/* Position the heading to the right of the container */
	transform: translateY(-50%);
	/* Vertically center the heading */
	padding: 20px;

}

.hero .content-box h1 {
	font-size: 8rem;
	color: #fff;
	line-height: 1;
}

.links .badge {
	font-size: .95rem;
	text-decoration: none;
}

.song-samples p {
	padding: 0;
	margin: 0;
	padding-left: 12px;
	margin-top: 5px;
}

.content-area h1 {
	font-size: 3rem
}



@media (min-width: 993px) and (max-width: 1350px) {
	.hero {
		background-position: 60% 50%;
		/* Adjust the horizontal and vertical percentages */
	}



}

@media (min-width: 768px) and (max-width: 992px) {
	.hero {
		background-position: 27% 50%;
		/* Adjust the horizontal and vertical percentages */
	}

}

@media (min-width: 1350.1px) {

	.hero .links {
		position: absolute;
		bottom: 50px;
		right: 430px;
		width: auto;
	}

}

/* Media query for smaller screens */
@media (max-width: 1350px) {

	.hero .content-box {
		position: absolute;
		top: 3%;
		left: 6%;
		/* Position the heading to the right of the container */
		transform: translateY(0%);
		/* Vertically center the heading */
		color: #fff;
		padding: 20px;

	}

	.hero .content-box h1 {
		font-size: 6rem;
		/* Adjust the font size as needed */
		color: #fff;
		margin-bottom: 0;;

	}

	.hero .links {
		position: absolute;
		bottom: 50px;
		left: 60px;
		width: auto;
	}
}


/* Media query for smaller screens */
@media (max-width: 768px) {
	.hero {
		background-position: 27% 0%;
		/* Adjust the horizontal and vertical percentages */
	}

	.hero .content-box {
		position: absolute;
		top: 2%;
		left: 4%;
		/* Position the heading to the right of the container */
		transform: translateY(0%);
		/* Vertically center the heading */
		color: #fff;
		padding: 20px;

	}

	.hero .content-box h1 {
		font-size: 4.5rem;
		/* Adjust the font size as needed */
		color: #fff;

	}

	.hero .links {
		position: absolute;
		bottom: 40px;
		left: 40px;
		width: auto;
	}
}




@media (max-width: 576px) {
	.hero {
		background-position: 27% 50%;
		/* Adjust the horizontal and vertical percentages */
	}

	.hero .content-box {
		position: absolute;
		top: 2%;
		left: 4%;
		/* Position the heading to the right of the container */
		transform: translateY(0%);
		/* Vertically center the heading */
		color: #fff;
		padding: 20px;

	}

	.hero .content-box h1 {
		font-size: 4rem;
		/* Adjust the font size as needed */
		color: #fff;

	}

	.hero .links {
		position: absolute;
		bottom: 40px;
		left: 40px;
		width: auto;
	}


}