.profileImage {
    width: 90%;
    border-radius: 10px;
}

.profileCard {
    max-width: 50%;
    margin-bottom: 2.5rem;
}

#profileCards {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
    gap: 2rem;
    justify-content: center;
}

#profileCards .button {
    border-radius: 5px;
}

#profileCards h3 {
    font-size: 1.5rem;
}

.hidden {
    display: none;
}

#seeMoreCharacters {
    font-size: 1.2rem;
    padding: 0.5rem;
    margin: 2rem 0;
    color: white;
    background-color: green ;
}

.expandedSeeMoreCharacters {
    background-color: red !important;
}

@media (min-width: 540px) {
    #profileCards {
        flex-direction: row;
        margin-top: 2rem;
        flex-wrap: wrap;
    }

    .profileImage {
        width: 50%;
    }

    .profileCard {
        width: 30%;
    }

    #seeMoreCharacters {
        padding: 0.5rem 3rem;
        cursor: pointer;
    }
}