body{font-family:Arial,sans-serif}.hero{background-image:url(../../img/banner.jpg);background-size:cover;background-position:center}.hero h2,.hero p,.hero a{text-shadow:-2px -2px 0 rgba(0,0,0,.1),2px -2px 0 rgba(0,0,0,.1),-2px 2px 0 rgba(0,0,0,.1),2px 2px 0 rgba(0,0,0,.1),0 -2px 0 rgba(0,0,0,.1),0 2px 0 rgba(0,0,0,.1),-2px 0 0 rgba(0,0,0,.1),2px 0 0 rgba(0,0,0,.1),2px 2px 4px rgba(0,0,0,.4);color:#fff}.circle{width:100px;height:100px;border-radius:50%;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center}.circle-community{background-color:#007bff}.circle-practice{background-color:#28a745}.circle-free{background-color:#fd7e14}.circle i{color:#fff;font-size:2.5rem}#error{text-align:center}.logo{width:40px;height:40px;margin-right:10px;vertical-align:middle}@media (max-width: 767px){.navbar-nav{text-align:center}.navbar-collapse{background-color:#fff;padding:1rem}.control-button{width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center}}@media (min-width: 768px){.navbar-nav{flex-direction:row!important;gap:1.5rem}.nav-item{display:inline-flex;align-items:center}.nav-link{white-space:nowrap;padding:.5rem 1rem!important}}.quiz-container{text-align:center;padding:15px 20px;border:1px solid #ddd;border-radius:10px;max-width:850px;width:90%;background-color:#fff;box-shadow:0 5px 15px #0000001a;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;margin:10px auto}.quiz-select{padding:8px;font-size:1em;border:1px solid #ddd;border-radius:4px;width:100%;margin:0 auto 10px}.quiz-controls{display:flex;justify-content:center;gap:15px;margin:15px 0}.quiz-text-wrapper{display:none;overflow-x:hidden;overflow-y:auto;max-width:100%;padding:5px 20px;margin-bottom:10px;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}.quiz-question{font-size:1.2em;font-style:italic;line-height:1.4;margin:0;padding:0;width:100%;box-sizing:border-box;white-space:normal;word-wrap:break-word;flex-shrink:0;flex-grow:0}.quiz-options{display:none;flex-direction:column;gap:10px;margin-bottom:15px}.quiz-option{padding:10px;background-color:#f8f9fa;border:1px solid #ddd;border-radius:5px;cursor:pointer;transition:background-color .2s ease;text-align:left}.quiz-option:hover{background-color:#e9ecef}.quiz-option.selected{background-color:#007bff;color:#fff;border-color:#0056b3}.quiz-option.correct{background-color:#28a745;color:#fff;border-color:#218838}.quiz-option.wrong{background-color:#dc3545;color:#fff;border-color:#c82333}.quiz-result{display:none;font-size:1.1em;line-height:1.5;padding:10px;text-align:left;min-height:50px}.quiz-error{color:#dc3545;font-weight:700;text-align:center}.quiz-explanation{font-size:.95em;font-weight:700;color:#555;margin-bottom:15px;flex-shrink:0}.quizButton{background-color:#28a745;color:#fff;width:auto;height:48px;padding:8px 18px;font-size:.9em;position:relative;margin:0 auto 15px;border:none;border-radius:24px;cursor:pointer;transition:background-color .3s ease,transform .1s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0003}.quizButton:hover{background-color:#218838;transform:scale(1.1)}.quizButton:active{transform:scale(1)}.quizButton:disabled{background-color:#28a745}.control-button{padding:8px;font-size:1.2em;cursor:pointer;background-color:#007bff;color:#fff;border:none;border-radius:50%;transition:background-color .3s ease,transform .1s ease;width:48px;height:48px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0003}.control-button:hover{background-color:#0056b3;transform:scale(1.1)}.control-button:active{transform:scale(1)}.submit-button,.next-button,.results-button{width:auto!important;padding:8px 18px!important;border-radius:24px!important;font-size:.9em!important}.submit-button{background-color:#28a745}.submit-button:hover{background-color:#218838}.submit-button i,.next-button i{margin-right:5px}.loading-spinner{display:none;border:4px solid #f3f3f3;border-top:4px solid #007bff;border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite;margin:10px auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}