/* General Body Styling */
body {
    font-family: 'Georgia', serif; /* Using a serif font for a more literary feel */
    margin: 0;
    padding: 20px;
    background-color: #CCE5FF; /* Soft white background for contrast */
    color: #333; /* Dark grey text for better readability */
    padding-left: 10%;
    padding-right: 10%;
}

/* Styling for the Content Section */
.left-column, .right-column {
    padding: 20px; /* Increased padding for better spacing */
    background: #f7f7f7; /* Subtle background color */
    border-radius: 8px; /* Rounded corners for a softer look */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Softer shadow */
    margin-bottom: 20px; /* Increased margin for more separation */
}

/* Styling for Headings */
h1, h2 {
    color: #333; /* Consistent dark color for headings */
    margin-bottom: 10px; /* Spacing below headings */
}

/* Styling for Paragraphs */
p {
    line-height: 1.6; /* Reasonable line height for comfortable reading */
    font-size: 18px; /* Slightly larger font size */
    color: #444; /* Darker grey for better contrast */
    margin-bottom: 20px; /* More space between paragraphs */
    padding: 10px 15px; /* Padding around paragraphs for emphasis */
    background-color: #e9ecef; /* Light grey background for paragraphs */
    border-left: 4px solid #5a6268; /* Muted dark border for emphasis */
    border-radius: 4px; /* Slight rounding of corners */
}

/* Styling for the Question Section */
.question {
    margin-bottom: 20px;
    padding: 15px; /* Increased padding */
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #f9f9f9; /* Soft background for questions */
}

/* Styling for Options */
.option {
    display: block;
    margin: 10px 0; /* More spacing between options */
    font-size: 16px; /* Increased font size for options */
    cursor: pointer;
}

/* Styling for Buttons */
button {
    margin-top: 15px; /* Increased spacing above buttons */
    padding: 12px 20px; /* Larger button size for easier clicking */
    background-color: #6c757d; /* Muted grey for buttons */
    color: white; /* White text for contrast */
    border: none;
    border-radius: 6px; /* Rounded corners for buttons */
    cursor: pointer;
    font-size: 16px; /* Larger font for buttons */
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #5a6268; /* Darker grey on hover */
}

/* Correct and Incorrect Feedback */
.correct {
    background-color: #d4edda; /* Light green for correct answers */
    border-color: #c3e6cb; /* Darker green border */
    color: #155724; /* Dark green text */
    padding: 10px;
    border-radius: 4px; /* Rounded corners for feedback messages */
}

.incorrect {
    background-color: #f8d7da; /* Light red for incorrect answers */
    border-color: #f5c6cb; /* Darker red border */
    color: #721c24; /* Dark red text */
    padding: 10px;
    border-radius: 4px; /* Rounded corners for feedback messages */
}

/* Media Queries for Responsive Design */

/* For Tablets */
@media (max-width: 768px) {
    body {
        padding: 10px; /* Reduce padding on smaller screens */
    }
    
    .left-column, .right-column {
        padding: 15px; /* Adjust padding for content */
    }

    h1, h2 {
        font-size: 1.5em; /* Slightly smaller headings */
    }

    p {
        font-size: 16px; /* Reduce paragraph font size */
    }

    button {
        padding: 10px 15px; /* Adjust button size */
    }
}

/* For Phones */
@media (max-width: 480px) {
    body {
        padding: 5px; /* Further reduce padding on mobile devices */
    }

    .left-column, .right-column {
        padding: 10px; /* Further adjust padding for mobile */
        margin-bottom: 15px; /* Less margin on mobile */
    }

    h1, h2 {
        font-size: 1.3em; /* Smaller headings for mobile */
    }

    p {
        font-size: 14px; /* Further reduce paragraph font size */
        line-height: 1.4; /* Adjust line height */
    }

    button {
        padding: 8px 12px; /* Adjust button size */
        font-size: 14px; /* Smaller font for buttons */
    }
}