:root {
    --cardFont: 
        "Microsoft YaHei",
        "PingFang SC",
        "Hiragino Sans GB",
        "STHeiti",
        sans-serif;
}
.card {
    border: var(--defaultBorder);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: var(--elementBG);
    color: var(--mainColor);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    z-index: 400;
}
.card_characters, .card_pinyin, .example_mandarin {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: var(--cardFont);
    text-align: center;
    width: 225px;
}
.card_english, .example_english {
    font-family: Verdana;
    text-align: center;
}

.small_card {
    width: 140px;
    height: 50px;
    border-radius: 5px;
}

.large_card {
    width: 300px;
    /*padding: 25px;*/
    border-radius: 10px;
    height: 160px;
    padding-top: 25px;
    padding-bottom: 15px;
}
.focused .small_card {
    width: 350px;
    /*height: max-content;*/
}
.focused .large_card {
    width: 350px;
}
.card_number {
    position: absolute;
    top: 15px;
    left: 25px;
    transform: translate(-50%, -50%);
}
.focused .card_number {
    display: none;
}


.small_card .card_characters {
    font-size: 1.2rem;
    font-weight: 400;
}

.large_card .card_characters {
    font-size: 2rem;
    font-weight: 400;
    /*margin-left: 25px;*/
}

.large_card .card_english {
    font-size: 1rem;
    font-weight: 400;
}






/* Small Cards */
.card.focused {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    max-width: 350px;
    padding: 2rem;
    z-index: 600;
    height: max-content;
    overflow-y: auto;
    gap: 10px;
}


.card.focused .card_characters {
    font-size: 2rem;
}

.card.focused .card_english {
    font-size: 1.1rem;
    /*padding-bottom: 10px;*/
}
.card.focused .card_pinyin {
    font-size: 0.9rem;
    padding-bottom: 10px;
    margin-top: -10px;
}


/* Large Cards */
.example_mandarin {
    font-size: 1.2rem;
    font-weight: 400;
    padding-bottom: 10px;
}
.example_mandarin:hover{
    transform: scale(1.05);
    color: lightblue;
}
.example_mandarin:active {
    transform: scale(1);
    color: blue;
}
.example_english {
    font-size: 1rem;
    font-weight: 400;
}

.card_extra {
    /*font-size: 0.9rem;*/
    line-height: 1.4;
    display: none;
    opacity: 0;
    text-align: center;
}
.card.focused .card_extra {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    opacity: 1;
    padding-top: 15px;
    /*border-top:  3px solid var(--mainColor);*/
}

.card_separator {
    width: 225px;
    height: 2px;
    background-color: var(--mainColorLight);
    border-radius: 1px;
}
.small_card_separator {
    width: 225px;
    height: 2px;
    background-color: var(--mainColorLight);
    border-radius: 1px;
    margin-top: 15px;
    margin-bottom: -15px;
}

.card_bottom_row {
    /*border-top:  3px solid var(--mainColor);*/
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    gap: 50px;
    margin-top: 10px;
}
.small_card_bottom_row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    gap: 30px;
    margin-top: 10px;
}
.bottom_card_number {
    font: var(--normalFont);
    font-size: 1.1rem;
}
.small_bottom_card_number {
    font: var(--normalFont);
    font-size: 1.1rem
}
.small_card_hsk_level {
    font: var(--normalFont);
    font-size: 1rem;
    opacity: 0.4;
}
.card_icon {
    font-size: 1.8rem;
    /*margin: -5px;*/
}
.card_button {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    z-index: 10000;
    border: none;
    /*border:  3px solid var(--mainColor);*/
}
.card_favorite {
    margin-top: 2px;
}

.card_favorite_button > span {
    transition: font-variation-settings 0.2s ease, color 0.2s ease;
}

.is_favorited > span {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    color: red;
}
.is_saved > span {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    color: rgb(184, 134, 11);
    color: rgba(255, 215, 0, 0.8);
}