body {
    font-family: Arial, sans-serif;
    background-color: #ff65af;
    padding: 0;
    margin: 0;
}

.quiz-container {
    background: white;
    padding: 15px 5vw;
    border-radius: 10px;
    width: 40vw;
    margin: auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: height 0.3s ease-in-out; /* Smooth transition */
    min-height: 30vh; /* Keep it small initially */
    overflow: hidden; /* Prevent layout shift */
}

.quiz-image {
    width: 40vw;
    display: block;
    margin: 0 auto;
}

/* expands the quiz container after result is displayed */
.quiz-container.expanded {
    min-height: 300px; /* Expand when result appears */
}

.hidden {
    display: none;
}

h1 {
    font-size: 2rem;
    color: #ff3395;
}

h2 {
    color: #ff3083;
}

label {
    font-size: 1.1rem;
}

select, button {
    margin-top: 10px;
    padding: 10px;
    width: 60%;
    font-size: 1.1rem;
}

button {
    background-color: #f10024;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    height: 6vh;
}

button:hover {
    background-color: #ff5500;
}

.hidden {
    display: none;
}

#match-text {
font-size: 1.3rem;
margin-top: -1vh;
}

#result img {
    width: 20vw;
    height: auto;
    margin-top: -1vh;
}

/* Article */
.zodiac-article {
    background: white;
    padding: 7px 5vw;
    border-radius: 10px;
    width: 40vw;
    margin: 20px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.7;
}

.zodiac-article h2 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 10px;
    line-height: 1.5;
}

.zodiac-article h3 {
    color: #ff7b00;
    margin-top: 10px;
    text-align: center;
}

@media screen and (max-width: 1024px) {
    body {
        font-size: 16px; /* Adjust font size for mobile */
        background-color: #ff65af;
    }

    .quiz-container {
        width: 90vw; /* Use more space on mobile */
        padding: 10px 5vw;
        min-height: auto; /* Remove fixed height */
    }

    h1 {
        font-size: 2rem; /* Make heading smaller for mobile */
        color: #ff3395;
    }

    .quiz-image {
        width: 90vw; /* Make the image smaller */
        height: auto;
        margin: 10px auto;
    }

    label {
        font-size: 1.3rem; /* Adjust label font size */
    }

    select, button {
        width: 85vw; /* Make input and button elements wider */
        font-size: 1.3rem;
        margin: 8px 0; /* Increase spacing between elements */
    }

    button {
        height: 7vh; /* Make button height relative to viewport */
    }

    #match-text {
        font-size: 1.4rem; /* Adjust the font size for result text */
    }

    #result img {
        width: 80vw; /* Adjust image size on mobile */
        height: auto;
        margin-top: 0px;
    }

    .zodiac-article {
        padding: 10px 8vw;
        width: 84vw; /* Use more screen space for the article */
    }

    .zodiac-article h2 {
        font-size: 1.8rem; /* Adjust heading size for mobile */
    }

    .zodiac-article h3, .zodiac-article h4 {
        font-size: 1.4rem; /* Adjust subheading sizes */
    }

    .zodiac-article p {
        font-size: 1.2rem; /* Adjust paragraph text */
        line-height: 1.6;
    }
}