/* 0-全局container设置 */
* { box-sizing: border-box; }

    /* 0-1-根字体设置*/
html { font-size: 16px; }
body { font-family: 'Open Sans', sans-serif; }


/* 1-主体结构设置*/
.label {
    border: 2px solid black;
    width: 270px;
    margin: 20px auto;
    padding: 0 7px;
}


/* 2-字体设置 */
    /* 2-1-头部标题字体 */
header h1 {
    text-align: center;
    margin: -4px 0;
    letter-spacing: 0.15px
}
    /* 2-2-通用副标题字体大小 */
.small-text { font-size: 0.85rem; }
    /* 2-3-内容字体设置 */
p {
    margin: 0;
    display: flex;
    justify-content: space-between;
}
    /* 2-4-重要内容字体加粗 */
.bold { font-weight: 800; }


/* 3-主体内容分区设置 */
    /* 3-1-卡路里：结构 */
.calories-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
        /* 3-1-1-卡路里标题：设置1 */
.calories-info h2 { margin: 0; }
        /* 3-1-2-卡路里标题：设置2 */
.left-container p {
    margin: -5px -2px;
    font-size: 2em;
    font-weight: 700;
}
        /* 3-1-2-卡路里值：设置 */
.calories-info span {
    margin: -7px -2px;
    font-size: 2.4em;
    font-weight: 700;
}

    /* 3-2-营养成分：结构 */
        /* 3-2-1-营养成分标题：设置 */
.right { justify-content: flex-end; }
        /* 3-2-2-副营养成分 */
.indent { margin-left: 1em; }
        /* 3-2-3-副营养成分：拆解 */
.double-indent { margin-left: 2em; }
        /* 3-2-4-内容自带分割线() */
.daily-value p:not(.no-divider) { border-bottom: 1px solid #888989; }

    /* 3-3-底部内容：结构 */
.note {
    font-size: 0.6rem;
    margin: 5px 0;
    padding: 0 8px;
    text-indent: -8px;
}


/* 9-分割线设置 */
    /* 9-0-通用分割线样式 */
.divider {
    border-bottom: 1px solid #888989;
    margin: 2px 0;
}
    /* 9-1-大分割线高度 */
.large { height: 10px; }
    /* 9-2-中分割线高度 */
.medium { height: 5px; }
    /* 9-3-大&中分割线样式 */
.large, .medium {
    background-color: black;
    border: 0;
}