/* Styles for the Card UI element */

.card_card {
    margin: 10px;
    
    width: 600px;
    aspect-ratio: 1.75;

    transition: all 0.2s;
    perspective: 900px;
    display: block;
}

.card_card_front, .card_card_back {
    position: absolute;
    top: 0;
    width: 100%;
    min-height: 100%;
    text-align: left;
    backface-visibility: hidden;
    transform-style: preserve3d;
    transition: all 0.4s;

    border-radius: 10px;

    -webkit-box-shadow: 0px 10px 29px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 10px 29px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 10px 29px 0px rgba(0, 0, 0, 0.75);

    background-color: white;
}

.card_card_front[card-align="left"] {
    text-align: left;
}

.card_card_front[card-align="right"] {
    text-align: right;
}

.card_card_front[card-align="center"] {
    text-align: center;
}

.card_card_front[card-align="left"] .card_item_text {
    justify-content: left;
}

.card_card_front[card-align="right"] .card_item_text {
    justify-content: right;
}

.card_card_front[card-align="center"] .card_item_text {
    justify-content: center;
}

.card_card_front[card-align="left"] .card_item_link {
    justify-content: left;
}

.card_card_front[card-align="right"] .card_item_link {
    justify-content: right;
}

.card_card_front[card-align="center"] .card_item_link {
    justify-content: center;
}

.card_content {
    padding: clamp(3vh, 30px, 3vw);
}

.card_card_back {
    transform: rotateY(-180deg);
}

.card_flipped .card_card_back {
    transform: rotateY(0deg);
}

.card_flipped .card_card_front {
    transform: rotateY(180deg);
}

.card_top {
    display: flex;
    flex-direction: row;
    align-items: center;

    margin-bottom: clamp(1vh, 10px, 1vw);
}

.card_top_text {
    display: flex;
    flex-direction: column;
    margin-left: clamp(1vh, 10px, 1vw);
}

.card_top_profilepicture {
    aspect-ratio: 1;
    width: clamp(5vh, 50px, 5vw);
    height: clamp(5vh, 50px, 5vw);
    border: 1px solid gray;
    border-radius: 50px;

    /* TODO: Hidden for now, will be fixed once the ability to add profile pictures is implemented */
    display: none;
}

.card_top_text_username {
    font-family: var(--default-font-family);

    margin: 0px;
    padding: 0px;

    font-size: clamp(3vh, 30px, 3vw);
}

.card_top_text_pronouns {
    font-family: var(--default-font-family);

    margin: 0px;
    padding: 0px;
    margin-left: clamp(1vh, 10px, 1w);

    font-size: clamp(1.6vh, 16px, 1.6vw);
    opacity: 0.8;
}

.card_item_text {
    display: flex;
    flex-direction: row;
}

.card_item_link {
    display: flex;
    flex-direction: row;
}

.card_item_text > p {
    font-family: var(--default-font-family);

    margin: 0px;
    padding: 0px;
    margin-left: clamp(0.4vh, 4px, 0.4vw);
}

.card_item_link > button {
    all: unset;
    font-family: var(--default-font-family);
    cursor: pointer;

    margin-left: clamp(0.4vh, 4px, 0.4vw);
    border: none;
    background-color: none;
    color: rgb(64, 163, 255);
}

.card_wrap {
    max-width: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: start;
}

.card_card p {
    transition: var(--default-transition);
}

.card_card i {
    transition: var(--default-transition);
}

.card_top_text {
    width: 100%;
}

#dialog_card_menu_items {
    padding-left: clamp(1.5vh, 15px, 1.5vw);
    padding-right: clamp(1.5vh, 15px, 1.5vw);
}

#dialog_card_menu_items > .card_item_text {
    color: white;
}

#dialog_card_menu_items > .card_item_link {
    color: white;
}

#dialog_card_menu_button {
    all: unset;
    font-family: var(--default-font-family);
    cursor: pointer;

    margin-left: clamp(0.4vh, 4px, 0.4vw);
    border: none;
    background-color: none;
    color: rgb(64, 163, 255);
}