:root {
    --color-primary: #009688;
    --color-primary-light: #16baad;
    --color-text: #333;
    --color-bg: #fafafa;
    --color-white: #fff;
    --color-shadow: #ccc;

    --nav-height: 65px;

    --space-xs: 5px;
    --space-sm: 10px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 30px;

    --radius: 5px;

    --font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    --font-size-base: 14px;
    --font-size-title: 30px;
    --font-size-hero: 35px;

    --shadow-panel: 1px 1px 5px var(--color-shadow);
    --shadow-nav: 0 0 4px var(--color-shadow);
    --shadow-hero: 0 1px 1px #333;
}

body {
    padding-top: var(--nav-height);
    overflow-x: hidden;
    font: var(--font-size-base)/1.6 var(--font-family);
    color: var(--color-text);
    background-color: var(--color-bg);
}

a {
    color: var(--color-text);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: 400;
}