/* Ensure the styles only apply to the quiz container */
.quiz-container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 800px;
    padding: 20px;
    margin-top: 20px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

.quiz-container h1 {
    text-align: center;
    color: #5b4b8a;
    font-size: 2.5em;
    margin-bottom: 10px;
}

.quiz-container .riddle {
    margin-bottom: 30px;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.quiz-container .riddle p {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.quiz-container .options button {
    width: 100%;
    padding: 12px;
    background-color: #f1f1f1;  /* Neutral background color */
    border: 2px solid #ddd; /* Boxed effect */
    border-radius: 8px;
    font-size: 1.1em;
    color: #333; /* Text color */
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 8px;
    box-sizing: border-box; /* Ensures padding is included in button width */
}

/* Hover effect for the buttons */
.quiz-container .options button:hover {
    background-color: #e0e0e0;  /* Lighter shade on hover */
}

/* Correct answer styling */
.quiz-container .options button.correct {
    background-color: #4CAF50;  /* Green background for correct answer */
    color: white;  /* White text */
}

/* Incorrect answer styling */
.quiz-container .options button.incorrect {
    background-color: #f44336;  /* Red background for incorrect answer */
    color: white;  /* White text */
}

/* Answer block */
.quiz-container .answer {
    margin-top: 10px;
    font-size: 1.2em;
    font-weight: bold;
    display: none;
}

/* Styling for correct and incorrect answers */
.quiz-container .correct {
    color: green;
}

.quiz-container .incorrect {
    color: red;
}

.quiz-container .hint {
    font-size: 1em;
    color: #757575;
    margin-top: 5px;
    font-style: italic;
}

/* Ensure mobile responsiveness */
@media (max-width: 600px) {
    .quiz-container {
        width: 95%;
    }

    .quiz-container h1 {
        font-size: 2em;
    }

    .quiz-container .riddle p {
        font-size: 1.1em;
    }

    .quiz-container .options button {
        font-size: 1em;
    }
}

/* Ensure responsiveness on medium-sized screens (tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
    .quiz-container {
        width: 85%;
        max-width: 900px; /* Slightly larger max-width for tablets */
    }

    .quiz-container h1 {
        font-size: 2.2em; /* Slightly smaller font size */
    }

    .quiz-container .riddle p {
        font-size: 1.1em; /* Adjust text size */
    }

    .quiz-container .options button {
        font-size: 1.1em;
    }
}

/* Ensure responsiveness for large screens (PCs/desktops) */
@media (min-width: 1025px) {
    .quiz-container {
        width: 85%; /* Increase the width to 85% */
        max-width: 1400px; /* Increase max-width to 1400px */
    }

    .quiz-container h1 {
        font-size: 3em; /* Larger font for headings */
    }

    .quiz-container .riddle p {
        font-size: 1.4em; /* Larger font for riddles */
    }

    .quiz-container .options button {
        font-size: 1.2em; /* Larger button text */
    }

    /* You can add further tweaks for spacing here */
    .quiz-container .riddle {
        padding: 20px; /* More padding for larger screens */
    }
}

/* Emoji styling */
.quiz-container .emoji {
    font-size: 1.5em;
    margin-right: 10px;
}