@media (min-width: 769px) and (max-width: 1024px) {
.quiz-title {
color: #000000 !important;
font-size: clamp(1.8rem, 3.2vw, 2.5rem);
}
.question-text {
color: var(--soft-white) !important;
font-weight: 700 !important;
}
.option-text {
color: var(--soft-white) !important;
font-weight: 500 !important;
}
.indicator-value {
color: var(--soft-white) !important;
}
.indicator-label {
color: var(--text-light) !important;
}
.question-number {
color: var(--text-light) !important;
}
.option-letter {
color: white !important;
}
.option-button .option-text {
color: var(--soft-white) !important;
font-weight: 500 !important;
}
.question-content {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px);
}
.option-button {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.1) !important;
}
.quiz-header {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px);
padding: 1rem !important;
}
.indicator-card {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.quiz-question-text {
color: var(--soft-white) !important;
font-weight: 700 !important;
font-size: 1.25rem !important;
}
.form-check-label {
color: var(--soft-white) !important;
font-weight: 500 !important;
font-size: 1rem !important;
}
.card-title {
color: var(--soft-white) !important;
font-weight: 700 !important;
}
.card-body {
background: transparent !important;
backdrop-filter: blur(10px);
}
h1, h2, h3, h4, h5, h6, p {
color: var(--soft-white) !important;
}
.option-card .option-text,
.form-check .form-check-label {
color: var(--soft-white) !important;
font-weight: 500 !important;
}
.option-card {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.1) !important;
}
.form-check {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
padding: 1rem !important;
margin-bottom: 0.5rem !important;
}
.card {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.quiz-container {
background: transparent !important;
backdrop-filter: blur(10px);
}
.badge {
color: var(--soft-white) !important;
}
.navbar {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px);
}
.navbar-brand,
.navbar-nav .nav-link {
color: var(--soft-white) !important;
}
.quiz-container,
.result-container {
padding: 1.5rem 2rem;
}
.quiz-header,
.question-content,
.result-header {
padding: 2rem;
}
.quiz-question-text {
font-size: 1.3rem !important;
}
.form-check-label {
font-size: 1.1rem !important;
}
.option-button {
padding: 1.25rem;
min-height: 60px;
}
}
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
.quiz-container,
.result-container {
padding: 1rem 2.5rem;
}
.quiz-header,
.question-content,
.result-header {
padding: 1.5rem;
}
.quiz-title {
font-size: clamp(1.6rem, 2.8vw, 2.2rem);
}
.quiz-question-text {
font-size: 1.2rem !important;
}
.form-check-label {
font-size: 1rem !important;
}
.option-button {
padding: 1rem;
min-height: 55px;
}
}
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
.quiz-container,
.result-container {
padding: 2rem;
}
.quiz-header,
.question-content,
.result-header {
padding: 2.5rem;
}
.quiz-title {
font-size: clamp(2rem, 3.5vw, 2.8rem);
}
.quiz-question-text {
font-size: 1.4rem !important;
}
.form-check-label {
font-size: 1.2rem !important;
}
.option-button {
padding: 1.5rem;
min-height: 65px;
}
}