@font-face {
    font-family: 'yuan';
    src: url('../font/yuan.ttf') format('truetype');
}

:root {
    /* 主页面 */
    --html-color: #fff;
    --scrollbar-color-10: rgba(0, 0, 0, .05);
    --scrollbar-color-20: rgba(0, 0, 0, .2);
    --scrollbar-color-30: rgba(0, 0, 0, .4);
    --navbar-bg-color: rgba(255, 255, 255, .1);
    --navbar-text-color: rgba(0, 0, 0);
    --navlink-hover-color: rgba(255, 255, 255, .2);
    --checkBox-bg-color: rgba(0, 0, 0, .7);
    --checkBoxBlackNo-color: rgba(255, 255, 255, .7);
    --checkBoxBlackYes-color: rgba(0, 0, 0, .7);
    --mobNavBar-bg-color: rgba(255, 255, 255, .7);
    --mobNavLink-text-color: rgba(0, 0, 0, .8);
    --mobNavLink-active-color: rgba(255, 255, 255, .5);
    --aboutContent-span-bg-color: rgba(245, 245, 245, 0.4);
    --aboutContent-span-text-color: rgba(0, 0, 0, .5);
    --aboutContent-span-hovertext-color: rgba(0, 0, 0);
    --aboutText-text-color: rgba(0, 0, 0, .8);
    --aboutText-bg-color: rgba(245, 245, 245, 0.4);
    --work-bg-color: #fff;
    --workList-textbg-color: #fff;
    --workList-title-color: rgba(0, 0, 0);
    --workList-info-color: rgba(0, 0, 0);
    --workList-titleLittle-color: rgba(133, 133, 133);
    --footer-bg-color: rgba(248, 248, 249);
    --footer-nav-color: rgba(0, 0, 0);
    --about-work-background: rgba(248, 248, 249);
}

* {
    margin: 0;
    padding: 0;
    /* user-select 兼容 */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-family: 'yuan', sans-serif;
}

body {
    background-color: var(--html-color);
}

a {
    cursor: pointer;
    text-decoration: none;
}

/* 滚动条样式 start */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* 正常情况下滑块的样式 */
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);

    /* border-radius 兼容 */
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    /* box-shadow 兼容 */
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    -o-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}

/* 鼠标悬浮在该类指向的控件上时滑块的样式 */
:hover::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color-20);

    /* border-radius 兼容 */
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    /* box-shadow 兼容 */
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    -o-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}

/* 鼠标悬浮在滑块上时滑块的样式 */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-color-30);

    /* box-shadow 兼容 */
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    -o-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}

/* 正常时候的主干部分 */
::-webkit-scrollbar-track {
    background-color: inherit;

    /* border-radius 兼容 */
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    /* box-shadow 兼容 */
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    -o-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}

/* 鼠标悬浮在滚动条上的主干部分 */
::-webkit-scrollbar-track:hover {
    background-color: inherit;

    /* box-shadow 兼容 */
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
    -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
    -o-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
}

/* 滚动条样式 end */