@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");

:root {
	--primary-color-rgb: 92 107 63;
	--primary-color: rgb(var(--primary-color-rgb));
	--secondary-color: #8b7e74;
	--background-color: #f6f0e9;
	--active-color: #7d8b4e;
	--button-bg: #e8e3d5;
	--button-hover: #d4cdb7;
	--shadow-color: rgba(0, 0, 0, 0.1);
	--accent-color: #a67c52;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	background-color: var(--background-color);
	color: var(--primary-color);
}

#app {
	display: contents;
}

.container {
	box-sizing: border-box;
	display: grid;
	grid-template-rows: 1fr auto auto;
	height: 100vh;
	height: 100svh;
	padding: 1rem;
	gap: 1rem;
}

.audio-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 0.75rem;
	overflow-y: auto;
	padding: 0.5rem;
	align-content: start;
}

.audio-list > * {
	display: flex;
	flex-direction: column;
}

.button.audio-item {
	flex: 1;
	font-size: 1.125rem;
	font-weight: 500;
	text-align: left;
	font-feature-settings: "palt" 1, "kern" 1;
	letter-spacing: 0.025em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.button {
	font-weight: 600;
	padding: 0.75rem;
	border: none;
	border-radius: 0.5rem;
	background-color: var(--button-bg);
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 0.875rem;
	text-align: center;
	box-shadow: 0 2px 4px var(--shadow-color);
}

.button:hover {
	background-color: var(--button-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 6px var(--shadow-color);
}

.button.active {
	background-color: var(--active-color);
	color: white;
}

player-controls {
	--scale: 1.125;

	--font-family: "Inter", sans-serif;
	--light: var(--background-color);
	--player-controls-color: var(--primary-color);
	--player-controls-background: var(--background-color);
	--player-controls-active: var(--active-color);

	/* StyledSlider */
	--primary: var(--primary-color-rgb);
	--gray-light: var(--button-bg);
}

.easy-controls {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	padding: 0.5rem;
}

.easy-controls button {
	font-size: 112.5%;
}

@media (max-width: 640px) {
	.audio-list {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}

	.audio-item {
		font-size: 1rem;
		padding: 0.875rem;
	}

	.button {
		padding: 0.625rem;
		font-size: 0.8125rem;
	}
}