@import url('https://use.typekit.net/xzh1fcg.css');


body {
	background-color: #ffe9e3;
}

.container {
	width: 92%;
	margin: auto;
	height: 100%;
	/*	border: 2px solid red;*/
}

/*Tablet Styles*/
@media only screen and (min-width: 567px)
{
	.container 
	{
		width: 540px;
	}	

}
/*Desktop Styles*/
@media only screen and (min-width: 1200px) {
	.container {
		width: 1140px;
	}
}
.left-half 
{
	width: 45%;
	height: 100%;
/*	border: 2px solid red;*/
	text-align: center;
	margin-top: 40px;
}
.right-half {
	width: 45%;
	height: 100%;
/*	border: 2px solid red;*/
	justify-self: right;
}
.multi-box
{
	display:flex;
	justify-content: space-between;
}
.scroll-container 
{
	display: flex; /* Aligns images in a single row */
	overflow-x: auto; /* Enables horizontal scrolling when content overflows */
	overflow-y: hidden; /* Prevents vertical scrolling */
	white-space: nowrap; /* Keeps elements on a single line */
	gap: 15px; /* Adds space between images */
	padding: 10px;
	width: 100%; /* Adjust to your design needs */
	scroll-behavior: smooth; /* Enables smooth snapping if triggered by buttons */
}

.scroll-container img 
{
	height: 300px; /* Forces uniform height */
	width: auto; /* Maintains aspect ratio */
	flex-shrink: 0; /* Prevents images from squeezing together */
	border-radius: 8px; /* Optional styling */
}


button {
	background-color: #eb9b86;
	color: #91432d;
	font-family: blanket, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	width: 150px;
	height: 50px;
	border: none;
	border-radius: 12px;
	cursor: pointer;
}


.top-bar {
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.thumbnail 
{
	color: #b59086;
	font-family: baga, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 16pt;
	background-color:none;
	cursor:pointer;
}
.grid-container {
	display: grid;
	/* Columns auto-fit and scale, shrinking to no less than 250px */
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

.grid-item {
	background-color: white;
	color: white;
	padding: 20px;
	text-align: center;
	filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
}


h1 {
	color: #91432d;
	font-family: blanket, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 30pt;
	text-align: center;
	background-color: #eb9b86;
	border-radius: 50px;
}

p {
	color: #b59086;
	font-family: baga, sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 12pt;
}

img
{
	align-content: center;
}