/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* Basic Reset */
body {
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	overflow: hidden; /* Hide scrollbars if content overflows due to absolute positioning */
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh; /* Full viewport height */
	position: relative; /* For positioning the background */
	/* Langsung atur background menjadi dua warna 50/50 */
	background: linear-gradient(to right, #5963a4 50%, #14b789 50%);
}

/* Hapus .split-background dan semua pseudo-element kurva */
/* Ini tidak lagi diperlukan karena background diatur langsung di body */
/* Jika Anda masih memiliki div .split-background di HTML, Anda bisa menghapusnya */
/* atau biarkan kosong, tapi lebih baik dihapus untuk kode yang bersih. */

/* Content Container */
.container {
	position: relative; /* Position relative to body for z-index */
	z-index: 10; /* Ensure content is above background */
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 900px; /* Max width for the card */
	padding: 20px;
	box-sizing: border-box;
}

/* Joke Card Styling */
.joke-card {
	background: transparent; /* Card itself doesn't have a background */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px; /* Space between elements */
	width: 100%;
	max-width: 600px; /* Max width for the content boxes */
}

.joke-icon-wrapper {
	width: 100px; /* Adjust size of icon container */
	height: 100px;
	border-radius: 50%;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Soft shadow */
	margin-bottom: 20px; /* Space below the icon */
}

.joke-icon {
	width: 80%; /* Adjust icon size inside its wrapper */
	height: 80%;
	object-fit: contain;
}

.joke-question-box,
.joke-answer-box {
	background-color: white;
	border-radius: 25px; /* Rounded corners */
	padding: 25px 35px;
	text-align: center;
	width: 100%;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Soft shadow */
	box-sizing: border-box; /* Include padding in width */
	margin-bottom: 10px; /* Space between question and answer */
}

.joke-question-box p {
	font-size: 1.5em; /* Adjust font size */
	font-weight: 600; /* Bold */
	color: #333;
	margin: 0;
}

.joke-answer-box p {
	font-size: 1.3em; /* Slightly smaller for answer */
	font-weight: 400; /* Regular weight */
	color: #333;
	margin: 0;
}

.next-joke-button {
	background-color: transparent;
	color: white;
	border: 2px solid white; /* White outline */
	padding: 12px 40px;
	border-radius: 30px; /* More rounded button */
	font-size: 1.1em;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	margin-top: 20px; /* Space above button */
}

.next-joke-button:hover {
	background-color: white; /* Fill with white on hover */
	color: #5963a4; /* Change text color to blue on hover */
	border-color: #5963a4; /* Change border color to blue on hover */
}

.noselect {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

/* --- Tambahkan styling di bagian bawah file tebak_tebakan.css Anda --- */

.main-footer {
	position: absolute; /* Posisikan secara absolut di bagian bawah */
	bottom: 20px; /* Jarak dari bawah */
	width: 100%;
	text-align: center;
	color: rgba(255, 255, 255, 0.7); /* Warna teks abu-abu terang */
	font-size: 0.85em;
	padding: 10px 0;
	z-index: 5; /* Pastikan di atas background tapi di bawah konten utama jika tumpang tindih */
}

.main-footer p {
	margin: 5px 0; /* Spasi antar paragraf di footer */
}

/* Responsive adjustments for footer */
@media (max-width: 480px) {
	.main-footer {
			font-size: 0.75em;
			bottom: 10px; /* Jarak lebih kecil di mobile */
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.joke-question-box p {
		font-size: 1.2em;
	}
	.joke-answer-box p {
		font-size: 1em;
	}
	.next-joke-button {
		padding: 10px 30px;
		font-size: 1em;
	}
}

@media (max-width: 480px) {
	.container {
		padding: 15px;
	}
	.joke-icon-wrapper {
		width: 80px;
		height: 80px;
	}
	.joke-question-box,
	.joke-answer-box {
		padding: 20px 25px;
	}
	.joke-question-box p {
		font-size: 1em;
	}
	.joke-answer-box p {
		font-size: 0.9em;
	}
	.next-joke-button {
		padding: 8px 25px;
		font-size: 0.9em;
	}
}