body{
    background-image: url("../IMG/bg.jpg");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    overflow-x: hidden;
}

.bg_white{
    background-color: #ffffffDD;
}

.btn-winx-next {
    border: none;
    border-radius: 50px;

    padding: 12px 28px;

    background: linear-gradient(
        135deg,
        #ff4fa3 0%,
        #ff1493 100%
    );

    color: white;
    font-size: 1rem;
    font-weight: 600;

    box-shadow:
        0 6px 15px rgba(255, 20, 147, 0.25),
        inset 0 1px 2px rgba(255, 255, 255, 0.45);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.btn-winx-next span {
    display: inline-block;
    margin-left: 8px;
    font-size: 1.2rem;

    transition: transform 0.2s ease;
}

.btn-winx-next:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(255, 20, 147, 0.35),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);

    filter: brightness(1.05);
}

.btn-winx-next:hover span {
    transform: translateX(4px);
}

.btn-winx-next:active {
    transform: translateY(1px);

    box-shadow:
        0 3px 8px rgba(255, 20, 147, 0.25);
}

.perso_img{
    text-align: center;
}

.perso_img img{
    width: 60%;
    height: auto;
    max-width: 500px;
}

.btn-winx-question{
    width: 100%;
    border: 2px solid #f8c7e0;
    border-radius: 30px;

    padding: 10px 14px;

    background: rgba(255, 255, 255, 0.85);
    color: #5b3150;

    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;

    cursor: pointer;

    transition: all 0.2s ease;
}

.btn-winx-question-selected{
    border: solid 2px #ff4fa3
}