.about,
.palettes {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	max-width: 700px;
	max-height: 500px;
	margin: 0 auto;
}

.palettes {
	margin-bottom: 12rem;
}

.about h1,
.about p,
.palettes h1,
.palettes h2,
.palettes p {
	padding: 1rem;
	text-align: justify;
	max-width: 600px;
	line-height: 1.4rem;
	text-wrap: pretty;
}

.palette-wrapper {
	position: relative;
	width: 320px; /* Fixed width */
	height: 80px; /* Fixed height */
	margin-top: 1rem;
	pointer-events: auto;
}

.palette-group {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.5s ease, visibility 0.5s ease;

	& p {
		grid-column: 1 / 5;
		padding: 0;
		text-align: center;
		font-weight: 600;
		font-style: italic;
	}
}

.palette-group.active {
	opacity: 1;
	visibility: visible; /* Added for better browser compatibility */
	pointer-events: auto;
}

.palette {
	height: 80px;
	cursor: pointer;
	position: relative;
	border-radius: 4px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	pointer-events: auto;
}

/* Color definitions */
/* Palette 1 */
.one {
	background-color: #3c301e;
}
.two {
	background-color: #d49d5b;
}
.three {
	background-color: #30e5ef;
}
.four {
	background-color: #5b7ccb;
}

/* Palette 2 */

.five {
	background-color: #271e27;
}
.six {
	background-color: #d9cdd9;
}
.seven {
	background-color: #80779c;
}
.eight {
	background-color: #8a8cac;
}

/* Palette 3 */
.nine {
	background-color: #121f14;
}
.ten {
	background-color: #2c7e09;
}
.eleven {
	background-color: #504d43;
}
.twelve {
	background-color: #b98e4e;
}

/* Palette 4 */

.thirteen {
	background-color: #b6b19f;
}
.fourteen {
	background-color: #2c353b;
}
.fifteen {
	background-color: #6b4c4d;
}
.sixteen {
	background-color: #7b5c42;
}

/* Palette 5 */

.seventeen {
	background-color: #b6bfc7;
}
.eighteen {
	background-color: #262221;
}
.nineteen {
	background-color: #774d33;
}
.twenty {
	background-color: #9e6e47;
}

/* Palette 6 */
.twenty-one {
	background-color: #190f0c;
}
.twenty-two {
	background-color: #ca846c;
}
.twenty-three {
	background-color: #46b281;
}
.twenty-four {
	background-color: #445074;
}

/* Palette 7 */
.twenty-five {
	background-color: #b9b8b5;
}
.twenty-six {
	background-color: #342019;
}
.twenty-seven {
	background-color: #9c7675;
}
.twenty-eight {
	background-color: #88897d;
}
/* Palette 8 */

@media screen and (min-width: 600px) {
	.about,
	.palettes {
		padding: 1rem;
	}
}

@media screen and (min-width: 1200px) {
	.palette-wrapper {
		margin-top: 2rem;
	}

	.about h1,
	.about p,
	.palettes h1,
	.palettes h2,
	.palettes p {
		padding: 1.4rem;
		text-align: justify;
		max-width: 600px;
		line-height: 1.6rem;
		text-wrap: pretty;
	}

	.palettes h2 {
		font-size: 2.4rem;
	}

	.palette-group p {
		grid-column: 1 / 5;
		padding: 0;
		text-align: center;
		font-weight: 600;
		font-style: italic;
	}
}