.quiz-container,
.quiz-container * {
box-sizing: border-box;
} .quiz-container {
max-width: 720px;
margin: 50px auto;
background: #ffffff;
border: 1px solid #dcdcdc;
border-radius: 8px;
padding: 32px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
font-family: 'Roboto', Arial, sans-serif;
color: #333333;
} .quiz-progress {
text-align: center;
font-size: 0.9rem;
color: #555555;
margin-bottom: 28px;
letter-spacing: 0.5px;
} .quiz-question {
display: none;
}
.quiz-question.active {
display: block;
}
.quiz-question h2 {
text-align: center;
font-size: 1.65rem;
font-weight: 500;
color: #2c3e50;
margin-bottom: 32px;
line-height: 1.4;
} .quiz-options-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 32px;
}
.quiz-options-buttons .quiz-option-link {
height: 90px;
background: #ffffff;
border: 2px solid #2980b9;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
font-weight: 500;
color: #2c3e50;
text-align: center;
padding: 0 16px;
cursor: pointer;
transition: background 0.3s, border-color 0.3s, transform 0.15s;
}
.quiz-options-buttons .quiz-option-link:hover,
.quiz-options-buttons .quiz-option-link:focus {
background: #eaf4fb;
border-color: #217dbb;
transform: translateY(-2px);
} .quiz-final-form {
margin-top: 40px;
max-width: 520px;
margin-left: auto;
margin-right: auto;
padding: 28px;
background: #ffffff;
border: 1px solid #d0d0d0;
border-radius: 8px;
}
.quiz-final-form h2 {
text-align: center;
font-size: 1.45rem;
font-weight: 500;
color: #2c3e50;
margin-bottom: 28px;
}
.quiz-final-form input {
width: 100%;
padding: 14px;
margin-bottom: 20px;
border-radius: 6px;
border: 1px solid #bbb;
font-size: 1rem;
color: #333;
}
.quiz-final-form button {
width: 100%;
padding: 16px;
font-size: 1rem;
font-weight: 500;
background: #2980b9;
color: #ffffff;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s, transform 0.15s;
}
.quiz-final-form button:hover {
background: #1f6a9e;
transform: translateY(-1px);
} .quiz-submit-redirect {
display: block;
width: 100%;
margin: 32px auto 0;
padding: 16px;
font-size: 1rem;
font-weight: 500;
background: #2980b9;
color: #ffffff !important;
text-decoration: none;
border-radius: 6px;
text-align: center;
transition: background 0.3s, transform 0.15s;
}
.quiz-submit-redirect:hover {
background: #1f6a9e;
transform: translateY(-1px);
} .quiz-thank-you {
text-align: center;
max-width: 520px;
margin: 50px auto;
padding: 32px;
background: #e8f7ed;
border: 1px solid #bad8b2;
border-radius: 8px;
font-size: 1.1rem;
color: #21603b;
font-weight: 500;
} @media (max-width: 640px) {
.quiz-container {
padding: 24px;
margin: 30px 16px;
}
.quiz-progress {
font-size: 0.85rem;
margin-bottom: 24px;
}
.quiz-question h2 {
font-size: 1.4rem;
margin-bottom: 24px;
}
.quiz-options-buttons {
grid-template-columns: 1fr;
gap: 20px;
}
.quiz-options-buttons .quiz-option-link {
height: 70px;
}
.quiz-final-form {
padding: 24px;
}
.quiz-final-form input {
padding: 12px;
}
.quiz-final-form button,
.quiz-submit-redirect {
padding: 14px;
font-size: 0.95rem;
}
.quiz-thank-you {
margin: 40px 16px;
padding: 28px;
font-size: 1rem;
}
}