:root {
	--primary-50: #f3e5f5;
	--primary-100: #e1bee7;
	--primary-200: #ce93d8;
	--primary-300: #ba68c8;
	--primary-400: #ab47bc;
	--primary-500: #9c27b0;
	--primary-600: #8e24aa;
	--primary-700: #7b1fa2;
	--primary-800: #6a1b9a;
	--primary-900: #4a148c;

	--secondary-50: #fafafa;
	--secondary-100: #f5f5f5;
	--secondary-200: #eeeeee;
	--secondary-300: #e0e0e0;
	--secondary-400: #bdbdbd;
	--secondary-500: #9e9e9e;
	--secondary-600: #757575;
	--secondary-700: #616161;
	--secondary-800: #424242;
	--secondary-900: #212121;
	--black: #000000;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
		Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	background-color: rgb(77, 77, 77);
}

main {
	width: 100%;
	margin: auto;
	padding: 1rem;
}

h2,
h3 {
	color: var(--secondary-800);
	margin-top: 1rem;
	margin-bottom: 0.6rem;
}

h3 span {
	font-weight: 400;
}

table {
	width: 100%;
}

table,
tr,
td,
th {
	border: 1px solid var(--secondary-500);
	border-collapse: collapse;
}

tr {
	font-size: 0.9rem;
}

th,
td {
	padding: 0.3rem;
}

table img {
	border-radius: 50%;
}

img {
	width: 100%;
	max-width: 500px;
}

.scene-simulation-section {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 0;
	transition: transform 0.3s ease-in, opacity 0.3s ease-in;
	margin: auto;
	margin-top: 3rem;
	position: relative;
	border-radius: 50%;
	background-color: rgba(255, 155, 0, 1);
	width: fit-content;
	border: 12px solid rgb(216, 136, 16);
	padding: 3rem 6rem;
}

.scene-simulation-section img {
	z-index: 1;
	width: 22rem;
	mix-blend-mode: multiply;
}
.client-speech,
.waiter-speech {
	z-index: 2;
}

.scene-simulation-section h4 {
	color: rgb(54, 44, 25);
	text-align: center;
	font-size: 1.3rem;
	font-weight: 400;
}
.scene-simulation-section {
	transition: opacity 0.3s ease-in-out;
}

.scene-simulation-section small {
	margin-top: 1.5rem;
	color: rgb(54, 44, 25);
}

.ambient-music {
	position: absolute;
	left: 4vh;
	top: 23vh;
	width: 12rem;
}

.ambient-music-cover-on {
	animation: vinylPulse 1s ease-in-out infinite;
	transform-origin: center;
}

.main-background {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}

footer {
	margin-top: 2rem;
	text-align: center;
	padding: 1rem;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.2);
}

footer a {
	color: rgb(220, 220, 220);
	font-size: 0.9rem;
}

@keyframes vinylPulse {
	0% {
		transform: scale(1);
		box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
	}
	30% {
		transform: scale(1.08);
		box-shadow: 0 0 18px 6px rgba(0, 0, 0, 0.35);
	}
	60% {
		transform: scale(1);
		box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
	}
	80% {
		transform: scale(1.05);
		box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.3);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
	}
}

.ambient-music img {
	border-radius: 24px;
}

.waiter-speech,
.client-speech {
	position: absolute;
	padding: 1rem;
	border-radius: 4px;
	background-color: white;
	font-weight: 400;
	font-style: italic;
}

.waiter-speech {
	width: 14rem;
	right: 63vh;
	top: 8vh;
	background-color: rgb(0, 0, 0);
	color: white;
}
.client-speech {
	width: 14rem;
	left: 55vh;
	background-color: rgb(18, 63, 65);
	top: 9.5vh;
	color: white;
}

.opacity-off {
	opacity: 0;
}

.ambient-music-controls {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.ambient-music-controls {
	margin: auto;
	margin-top: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
}

.ambient-music-controls img {
	width: 2.5rem;
	filter: brightness(0.5) invert(1);
	cursor: pointer;
}

.ambient-music-controls-play,
.ambient-music-controls-next,
.ambient-music-controls-prev {
	transition: transform 0.3s ease-in-out;
}

.ambient-music-controls-play:hover,
.ambient-music-controls-next:hover,
.ambient-music-controls-prev:hover {
	transform: scale(1.1);
}

.ambient-music-controls-prev img {
	transform: rotate(180deg);
}

audio {
	display: none;
}
.ambient-music-controls-prev img,
.ambient-music-controls-next img {
	width: 1.6rem;
	filter: brightness(0.5) invert(1);
}

.ambient-music-controls-play {
	filter: hue-rotate(180deg);
}

.ambient-music {
	transition: opacity 0.3s ease-in;
}

.ambient-music-controls-prev,
.ambient-music-controls-next {
	display: flex;
	filter: hue-rotate(215deg);
}

.summary-section {
	position: absolute;
	right: 2vh;
	left: 2vh;
	top: 10vh;
	box-shadow: 2px 2px 6px rgba(30, 71, 83, 0.4);
	perspective: 800px;
	padding: 0 2.5rem;
	padding-top: 1rem;
	padding-bottom: 2.5rem;
	background-color: rgb(85, 8, 8);
	width: 80vw;
	border-radius: 4px;
	z-index: 999;
	margin: auto;
}

.summary-section h2 {
	color: white;
	margin-bottom: 1.5rem;
	font-size: 1.65rem;
}

.invoice-section,
.section-menu {
	position: absolute;
	width: 22vw;
	background-color: rgb(85, 8, 8);
	transition: opacity 0.3s ease-in, transform 0.3s ease-in;
	right: 4vh;
	top: 10vh;
	box-shadow: 2px 2px 6px rgba(30, 71, 83, 0.4);
	perspective: 800px;
	padding: 0 2.5rem;
	padding-top: 1rem;
	z-index: 10;
	padding-bottom: 2.5rem;
	border-radius: 24px;
	background-color: rgb(85, 8, 8);
	transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

.invoice-section table,
.menu-table {
	width: 100%;
}

.invoice-section h2,
.section-menu h2 {
	color: white;
	margin-bottom: 1.5rem;
}

.summary-section td,
.summary-section th,
.invoice-section td,
.invoice-section th,
.section-menu th {
	text-align: left;
	padding-left: 0.7rem;
	border: 1px solid rgb(175, 120, 120);
	color: white;
}

.section-menu h2 {
	margin-bottom: 0.8rem;
}

.section-menu {
	padding-left: 1.1rem;
}

.section-menu td {
	color: white;
	padding-left: 0.7rem;
}

.summary-section a {
	margin-top: 1rem;
	background-color: white;
	border-radius: 4px;
	text-decoration: none;
	display: flex;
	width: fit-content;
	color: rgb(78, 17, 17);
	padding: 1rem;
}

.summary-section h3 {
	color: white;
	font-weight: 400;
	color: rgb(255, 255, 255);
}

.group-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.summary-section td,
.summary-section th {
	color: rgb(255, 136, 136);
}

.summary-section {
	margin-bottom: 1rem;
}

.hidden {
	display: none;
}