/* Style the quiz container */ #quiz-questions { background-color: #f9f9f9; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } /* Style the quiz title */ #page-mod-quiz-view .page-header { font-size: 2em; font-weight: bold; color: #2C3E50; text-align: center; } /* Style quiz instructions */ #quiz-intro { font-size: 1.2em; color: #7F8C8D; padding: 10px; background-color: #ECF0F1; border-radius: 5px; margin-bottom: 20px; } #quiz-questions { background-color: #f9f9f9; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } /* Style the quiz timer */ #quiz-timer { font-size: 1.5em; color: #E74C3C; font-weight: bold; text-align: center; margin-top: 20px; } /* Style the "Next" and "Previous" buttons */ input[type="submit"], .btn { background-color: #2980B9; color: #ffffff; font-size: 1.1em; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } /* Hover effect on the buttons */ input[type="submit"]:hover, .btn:hover { background-color: #1F618D; } /* Style the question navigation buttons */ #quiz-navigation { display: flex; justify-content: space-between; margin-top: 30px; } /* Style individual navigation buttons */ #quiz-navigation a { background-color: #F39C12; color: #ffffff; padding: 10px 15px; border-radius: 5px; text-decoration: none; font-weight: bold; } /* Hover effect on navigation buttons */ #quiz-navigation a:hover { background-color: #E67E22; } /* Style the progress bar */ #quiz-progress { width: 100%; background-color: #BDC3C7; border-radius: 10px; margin-top: 30px; height: 10px; } /* Style the filled progress bar */ #quiz-progress .bar { height: 100%; background-color: #2980B9; border-radius: 10px; width: 50%; /* You can dynamically adjust this based on progress */ }