:root{
    --theme-background-color: #fff;
    --card-header-background: #F3F4F7;
    --card-font-color: #999;
    --card-border-color: #E1E3E6;
}

html .dark {
    --theme-background-color: #000;
    --card-header-background: #0e0e0f;
    --card-font-color: rgb(255, 255, 255);
    --card-border-color: #bfc5cd;
}


body {
    transition: all .5s ease;
    background: var(--theme-background-color);
}

#app {
    width: 305px;
    margin: 0 auto;
}

.card-list {
    /* color: var(--normal-font-color); */

}

.card-item {
    margin-top: 20px;
    transition: all .5s ease;
    border: 1px solid var(--card-border-color);
    color: var(--card-font-color);
}

.card-item .header {
    transition: all .5s ease;
    background-color: var(--card-header-background);
    padding: 13px 8px;
    line-height: 1;
}

.card-item .body {
    padding: 0 8px 13px;
    line-height: 1;
}

.body-item {
    margin-top: 13px;
    display: flex;
}

.card-item .body-left {
    width: 80px;
}

.card-item .body-right {
    flex: 1;
}