/* General body styling */
body {
    font-family: 'Arial', sans-serif;
    background-color: #d2d768;
    color: #333;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    width: 100%; /* Ensure full width */
}

/* Container styling */
.container {
    max-width: 700px;
    margin: 20px auto;
    padding: 20px 50px;
    padding-bottom: 3vh;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-top: -10px;
    box-sizing: border-box; /* Ensures padding does not cause overflow */
}

/* Heading styles */
h1 {
    font-size: 37px;
    color: #c4ce00;
    margin-bottom: 1vh;
    padding-top: 0; /* Remove unnecessary padding */
    font-weight: 700;
}

/* Paragraph styles */
p {
    color: #000000;
    font-size: 1rem;
    margin-bottom: 20px;
}

.homeintro {
    font-size: 17px;
    line-height: 1.7;
    color: #000000;
}

/* Question section styling */
.question {
    margin: 25px 0;
    text-align: left;
}

.question p {
    font-weight: 600;
    color: #333;
    font-size: 19px;
}

/* Label styling */
label {
    display: block;
    margin: 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    font-size: 17px;
    color: #444;
    background-color: #f8f9fa;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Label hover effect */
label:hover {
    background-color: #e1f5fe;
    border-color: #81d4fa;
}

/* Button styling */
button {
    width: 100%;
    padding: 15px;
    background: linear-gradient(140deg, #c2c801, #7a8f01);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

/* Button hover effect */
button:hover {
    background: linear-gradient(135deg, #eaff00, #81a908);
    transform: translateY(-2px);
}

/* Result section styling */
.result p{
    margin-top: 20px;
    border-radius: 8px;
    color: #2d3436;
    font-size: 1.2rem;
    line-height: 1.7;
}

.result h2 {
    color: #81b000;
    font-weight: bold;
    font-size: 1.8rem;
    margin-bottom: -10px;
}

/* General Styles */
#mbti-article {
    font-family: 'Arial', sans-serif; /* Use a clean and readable font */
    margin: 20px auto;
    width: 50%;
    max-width: 50%; /* Limit the width of the article for better readability */
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 1px;
    padding-bottom: 10px;
    background-color: #f9f9f9; /* Light background color */
    border-radius: 8px; /* Rounded corners for the article box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Slight shadow for a modern look */
}

/* Title Styles */
#mbti-article h2 {
    font-size: 30px;
    color: #afd200;
    margin-bottom: 20px;
    text-align: center; /* Center-align the titles */
}

#secondheading {
    font-size: 26px;
    color: #9ad300;
}

/* Paragraph Styles */
#mbti-article p {
    font-size: 18px;
    line-height: 2;
    color: #000000;
    margin-bottom: 15px;
    padding-left: 10px;
}

/* Emphasized Text */
#mbti-article em {
    font-style: italic;
    color: #2a7ae2; /* Blue for emphasized text */
}

/* Ordered List Styles */
#mbti-article ol {
    list-style-type: decimal;
    padding-left: 30px; /* Add some space on the left for the numbers */
    margin-bottom: 20px;
}

/* List Item Styles */
#mbti-article li {
    margin-bottom: 10px;
    line-height: 1.7;
}

/* Strong Text */
#mbti-article strong {
    color: #5e7d00; /* Blue for key terms */
    font-size: 18px;
}

/* Unordered List Styles */
.mbti-article ul {
    list-style-type: disc;
    padding-left: 30px;
    margin-bottom: 20px;
}

#list{
    padding-left: 80px;
}

/* Add spacing between each unordered list item */
#mbti-article ul li {
    margin-bottom: 8px;
    font-size: 18px;
}

/* Link Styles (if any) */
#mbti-article a {
    color: #007bff; /* Blue for links */
    text-decoration: none; /* Remove underline from links */
}

.mbti-article a:hover {
    text-decoration: underline; /* Underline links on hover */
}

 .mbtiquizimage {
    display: block;
    margin: -7px auto;
    max-width: 80%; /* Ensures the image is responsive */
    height: auto;
    border-radius: 10px; /* Optional: Adds rounded corners */
}

/* Mobile view adjustments */
@media (max-width: 1024px) {
    .homeintro {
        font-size: 21px;
        color: #000;
        margin-left: -13px;
        margin-right: -13px;
        line-height: 1.6;
        text-align: left
    }

    .homeintro {
        padding-left: 8%;  /* More padding on very small screens */
        width: 95%;         /* Width is reduced for mobile devices */
        line-height: 1.8;   /* Smaller line height for compact view */
    }

    .hamburger {
        display: flex;
        margin-bottom: 3px;
    }

    .container {
        padding: 30px; /* Further reduce padding for small screens */
        padding-bottom: 3vh;
        margin-top: -35px; /* Reset margin-top to remove any unwanted spacing */
        margin-left: 5px;
        margin-right: 5px;
        text-align: center; /* Centers inline content like the image */
        overflow: hidden; 
    }

    h1 {
        font-size: 35px;
        line-height: 1.3;
    }

    h3 {
font-size: 1.5rem;
text-align: center;
color: yellowgreen;
    }

    .question p{
        font-size: 22px;
    }

    .question label{
        font-size: 20px;
    }

    .padding {
        font-size: 25px
    };

    #mbti-quiz a {
        font-size: 18px;
        padding: 15px;
    }

    button{
        font-size: 21px;
    }

    .result {
        font-size: 19px;
        text-align: left;
    }

    .result h2 {
        text-align: center;
    }

    .result p {
        padding-left: 2vw;

    }

    #mbti-article {
    padding-top: 10px; /* Reduced padding on small screens */
    padding: 0vw 5vw; /* Remove left padding for full width */
    margin: 0; /* Remove any margins */
    width: 90vw; /* Set to full width */
    max-width: 90vw; /* Ensure no maximum width limit */
    padding-bottom: 1vh;
    margin-bottom: 3vh;
}
    
    #mbti-article h2 {
        font-size: 2rem; /* Adjust font size for smaller screens */
        margin-bottom: 12px;
        padding-top: 3vh;
        line-height: 1.3;
    }
    
    #mbti-article p {
        font-size: 1.3rem; /* Smaller font for paragraphs */
        padding-left: 20px;
    }
    
    #mbti-article strong{
        font-size: 1.3rem; /* Adjust font size for smaller screens */
    }

    #mbti-article ul li{
        font-size: 1.3rem; /* Adjust font size for smaller screens */
    }

    #list {
        padding-left: 50px;
    }

    .mbtiquizimage-wrapper {
        display: flex; /* Use Flexbox for centering */
        justify-content: center; /* Horizontally center content */
        align-items: center; /* Vertically align content (if needed) */
        width: 100%; /* Ensure wrapper spans the full width */
        overflow: hidden; /* Prevent overflow if the image is larger than its container */
    }

    .mbtiquizimage {
        display: block; /* Treat the image as a block element */
        max-width: 113%; /* Ensure it doesn't exceed the container width */
        margin: 0 auto; /* Horizontally center the image */
        height: auto; /* Maintain the aspect ratio */
    }
}