:root {
	--primary-color: #9b4dca;
	--secondary-color: #606c76;
	--background-color: #f9f9f9;
	--text-color: #333;
	--shadow-color: rgba(0, 0, 0, 0.1);
}

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

body {
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
		sans-serif;
	background-color: var(--background-color);
	color: var(--text-color);
	line-height: 1.6;
}

.main-container {
	max-width: 100%;
	margin: 0 auto;
	padding: 2rem;
	min-height: 100vh;
}

.results-container {
	max-width: 80%;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.main-container {
		padding: 1rem;
	}

	.results-container {
		max-width: 100%;
		margin: 0 auto;
	}
}

@media (max-width: 480px) {
	.main-container {
		padding: 0.5rem;
	}
}

#reference-display {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	z-index: 101;
	pointer-events: none;
	margin-top: 2rem;
	/* Only transition for appearing, not disappearing */
	transition: opacity 0.5s ease 2s;
}

@media (max-width: 768px) {
	#reference-display {
		left: 50%;
		transform: translateX(-50%);
		max-width: 90%;
	}
}

@media (max-width: 480px) {
	#reference-display {
		max-width: 95%;
	}
}

#reference-display.visible {
	opacity: 1;
	pointer-events: auto;
}