body {
	font-family: "Poppins", sans-serif;
	margin: 0;
	padding: 0;
}


.animate__delay-0_5s {
	animation-delay: 0.5s;
}
.animate__delay-1_5s {
	animation-delay: 1.5s;
}
.animate__delay-2_5s {
	animation-delay: 2.5s;
}
.animate__delay-3_5s {
	animation-delay: 3.5s;
}


.logo {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
}
.logo img {
    width: 150px;
}

.bg-container {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.bg-image {
	position: absolute;
	width: 100%;
	height: 100%;
	background: center center / cover no-repeat;
}

.bg-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}

.question {
	font-weight: 700;
	font-size: 1.8rem;
	margin-bottom: 3rem;
	text-shadow: 0 0 5px rgba(255, 0, 150, 0.6), 0 0 10px rgba(255, 165, 0, 0.5), 0 0 15px rgba(255, 255, 0, 0.4);
	user-select: none;
	line-height: 1.3;
	color: #f8f3f0;
}
.question .title {
	font-weight: 700;
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
	color: #FFA500;
	text-shadow: 0 0 8px rgba(255, 0, 150, 0.8), 0 0 15px rgba(255, 165, 0, 0.6);
	user-select: none;
}

.answer-option {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 15px;
	padding: 1.5rem 2rem;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease, color 0.3s ease;
	box-shadow: 0 0 8px rgba(255, 0, 150, 0.3), 0 0 12px rgba(255, 165, 0, 0.25), 0 0 15px rgba(255, 255, 0, 0.2);
	color: #f2e9e4;
	user-select: none;
	outline-offset: 4px;
}

.answer-option:hover,
.answer-option:focus {
	background: rgba(255, 0, 150, 0.15);
	box-shadow: 0 0 12px rgba(255, 0, 150, 0.6), 0 0 18px rgba(255, 165, 0, 0.5), 0 0 25px rgba(255, 255, 0, 0.4);
	color: #fff3e0;
	transform: translateY(-3px);
	outline: none;
}

.answer-option.selected {
	background: linear-gradient(135deg, rgba(255, 0, 150, 0.6), rgba(255, 165, 0, 0.6), rgba(255, 255, 0, 0.5));
	box-shadow: 0 0 20px rgba(255, 0, 150, 0.8), 0 0 25px rgba(255, 165, 0, 0.7), 0 0 30px rgba(255, 255, 0, 0.6);
	color: #fffbe6;
	transform: translateY(-5px);
}

.answerFinal {
	font-weight: 700;
	font-size: 1.8rem;
	margin-bottom: 3rem;
	text-shadow: 
		0 0 6px rgba(0, 255, 150, 0.3), 
		0 0 12px rgba(0, 200, 255, 0.2), 
		0 0 18px rgba(255, 255, 255, 0.2);
	user-select: none;
	line-height: 1.3;
	color: #f0fff4;
}

.answerFinal .title {
	font-weight: 800;
	font-size: 2.7rem;
	margin-bottom: 0.5rem;
	color: #00FF99;
	text-shadow: 
		0 0 10px rgba(0, 255, 150, 0.4), 
		0 0 18px rgba(0, 200, 255, 0.3), 
		0 0 25px rgba(255, 255, 255, 0.2);
	user-select: none;
}

.text {
	font-size: 1.1rem;
	font-weight: 600;
	color: #f2e9e4;
}


.btn-modern {
	position: relative;
	padding: 15px 40px;
	font-size: 1.2rem;
	font-weight: bold;
	color: white;
	border: none;
	border-radius: 50px;
	background: linear-gradient(135deg, rgba(255, 0, 150, 0.4), rgba(255, 165, 0, 0.4), rgba(255, 255, 0, 0.4));
	background-size: 400% 400%;
	animation: gradientMove 6s ease infinite;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
}

@keyframes gradientMove {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.btn-modern:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.btn-modern:active {
	transform: scale(0.98);
}

.btn-glass {
	padding: 15px 40px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #fff;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50px;
	/*backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);*/
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
	cursor: pointer;
}
.btn-glass:hover {
	background: rgba(255, 255, 255, 0.25);
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.35);
	transform: scale(1.05);
}
.btn-glass:active {
	transform: scale(0.98);
}

.btn-glass-gradient {
	padding: 15px 40px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #fff;
	border: none;
	border-radius: 50px;
	background: linear-gradient(135deg, rgba(255, 0, 150, 0.4), rgba(255, 165, 0, 0.4), rgba(255, 255, 0, 0.4));
	/*background: linear-gradient(
        135deg, 
        rgba(255, 110, 196, 0.4), 
        rgba(120, 115, 245, 0.4)
    );*/
	background-size: 200% 200%;
	animation: gradientGlassMove 4s ease infinite;
	border: 1px solid rgba(255, 255, 255, 0.25);
	/*backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);*/
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
	cursor: pointer;
}
@keyframes gradientGlassMove {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.btn-glass-gradient:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.35);
	border: 3px solid rgba(255, 255, 255, 0.25);
}
.btn-glass-gradient:active {
	transform: scale(0.98);
}



@media (max-width: 1399.98px) {}
@media (max-width: 1199.98px) {
    .question {
        font-size: 1.625rem;
        margin-bottom: 3rem;
        text-shadow: 0 0 5px rgba(255, 0, 150, 0.6), 0 0 10px rgba(255, 165, 0, 0.5), 0 0 15px rgba(255, 255, 0, 0.4);
        line-height: 1.3;
    }
    .question .title {
        font-size: 2.125rem;
        margin-bottom: 0.5rem;
        text-shadow: 0 0 8px rgba(255, 0, 150, 0.8), 0 0 15px rgba(255, 165, 0, 0.6);
    }
}
@media (max-width: 991.98px) {
  
}
@media (max-width: 767.98px) {
    .question {
        font-size: 1.5rem;
        margin-bottom: 3rem;
        text-shadow: 0 0 5px rgba(255, 0, 150, 0.6), 0 0 10px rgba(255, 165, 0, 0.5), 0 0 15px rgba(255, 255, 0, 0.4);
        line-height: 1.3;
    }
    .question .title {
        font-size: 1.875rem;
        margin-bottom: 0.5rem;
        text-shadow: 0 0 8px rgba(255, 0, 150, 0.8), 0 0 15px rgba(255, 165, 0, 0.6);
    }
    .answer-option {
        font-size: 1rem;
    }
}
@media (max-width: 575.98px) {
    .btn-modern {
        padding: 10px 20px;
        font-size: 1rem;
    }
    .question {
        font-size: 1.125rem;
        margin-bottom: 3rem;
        text-shadow: 0 0 5px rgba(255, 0, 150, 0.6), 0 0 10px rgba(255, 165, 0, 0.5), 0 0 15px rgba(255, 255, 0, 0.4);
        line-height: 1.3;
    }
    .question .title {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        text-shadow: 0 0 8px rgba(255, 0, 150, 0.8), 0 0 15px rgba(255, 165, 0, 0.6);
    }
    .answer-option {
        padding: 1.125rem 1.5rem;
    }
}