body {
    font-family: Arial, sans-serif;
    background: linear-gradient(to bottom, #f0f8ff, #e0f7fa); /* Gradient background */
    background-image: url('https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdjk5Ni0wMDlfMS1rcm9pcjRkay5qcGc.jpg'); /* Background image */
    background-size: cover; /* Cover the entire page */
    background-position: center; /* Center the background image */
    color: #333; /* Text color */
    margin: 0;
    padding: 20px; /* Padding around the body */
    text-align: center; /* Center text */
}

h1 {
    color: #6a1b9a; /* Title color */
}

#quiz-container, #result-container {
    background-color: rgba(255, 255, 255, 0.8); /* Translucent background */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Padding inside containers */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    margin: 0 auto; /* Center the container */
    max-width: 600px; /* Max width for the container */
    position: relative; /* For glow positioning */
    z-index: 1; /* Ensure container is above glow */
}

#quiz-container::before, #result-container::before {
    content: '';
    position: absolute;
    top: -10px; /* Adjust for glow effect */
    left: -10px; /* Adjust for glow effect */
    right: -10px; /* Adjust for glow effect */
    bottom: -10px; /* Adjust for glow effect */
    border-radius: 8px; /* Match container's border radius */
    box-shadow: 0 0 20px 5px rgba(161, 125, 232, 0.7); /* Glow effect */
    z-index: -1; /* Ensure glow is behind the container */
}

#timer, #progress {
    font-weight: bold; /* Bold text */
    margin: 10px 0; /* Margin for spacing */
}

#progress-bar {
    width: 100%; /* Full width */
    height: 10px; /* Height of the progress bar */
    background-color: #ddd; /* Background color of the bar */
    border-radius: 5px; /* Rounded corners */
    overflow: hidden; /* Hide overflow */
    margin: 10px 0; /* Margin for spacing */
}

#progress-bar span {
    display: block; /* Block element */
    height: 100%; /* Full height */
    background-color: #6a1b9a; /* Progress color */
    width: 0; /* Start with 0 width */
    transition: width 0.5s; /* Smooth transition */
}

.options {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
}

.options li {
    margin: 10px 0; /* Margin for spacing between options */
}

button {
    background-color: #a17de8; /* Button color */
    color: white; /* Text color */
    border: none; /* No border */
    padding: 10px 15px; /* Padding inside buttons */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer on hover */
    transition: background-color 0.3s; /* Smooth transition */
    margin: 5px; /* Margin for consistent spacing */
}

button:hover {
    background-color: #9a67b8; /* Darker shade for hover effect */
}

button.correct {
    background-color: #4caf50; /* Green for correct answers */
}

button.incorrect {
    background-color: #f44336; /* Red for incorrect answers */
}

#hint {
    margin-top: 15px; /* Margin above hint */
    font-style: italic; /* Italic font style */
    color: #555; /* Hint color */
}

#logo-container {
    margin-bottom: 20px; /* Space below the logo */
}

#logo {
    max-width: 100%; /* Responsive logo */
    height: auto; /* Maintain aspect ratio */
}