:root {
    user-select: none;
    cursor: url(../../public/cursor/normal.cur), default;

    font-size: 10px;
    /* 1rem = 10px */

    --color-bodyBackground: rgb(195, 219, 194);
    --color-stdHead: rgba(69, 164, 99, .5);
    --color-stdHead_hover: rgba(69, 164, 99, .8);
    --color-basic: rgba(0, 0, 0, 1);
    --color-textSelected: rgba(57, 197, 99, .6);
    --color-box: rgba(230, 255, 230, .55);
    --color-box_hover: rgba(230, 255, 230, .65);
    --color-box_solid: rgba(241, 255, 241, 0.8);
    --color-box_solid_hover: rgba(217, 252, 217, 0.85);
    --color-pagebox: rgba(230, 245, 230, .75);
    --color-pagebox_hover: rgba(230, 245, 230, .85);
    --color-reader: rgba(220, 245, 220, .65);
    --color-input: rgba(240, 255, 240, .8);
    --color-input_hover: rgba(245, 255, 245, .9);
    --color-link: rgba(101, 40, 255, 1);
    --color-btn: rgba(99, 194, 129, .5);
    --color-btn_hover: rgba(99, 194, 129, .8);
    --color-item_time: rgba(216, 112, 147, 1);

    --color-theme: rgba(1, 150, 47, 1);
    --color-themeDark: rgba(56, 105, 65, 1);
    --color-purple: rgb(101, 40, 255);
    --color-darkpurple: rgb(61, 20, 165);
    --color-blue: rgba(1, 47, 255, 1);
    --color-grey: rgba(150, 150, 150, 1);
    --color-darkgrey: rgba(100, 100, 100, 1);

    /* vw -> rem : *2 ;  vh -> rem : *1 */

    --start_btn_width: 30rem;
    --box_width: 40rem;
    --nav_width: 101px;
    --navbtn_height: 4rem;
    --box_left: 6rem;
    --page_width: 120rem;
    --pages_left: 65rem;
    --padding_top: 10rem;
    --padding_top_minus: 5rem;
    --padding_top_plus: 15rem;

    --yiyan_margin: 4rem;
    --pages_columncount: 2;
    --navbtn_fontsize: 2.3rem;
    --navbtn_padding: 3rem;
    --musicbtn_fontsize: 3rem;
    --musicSelectorBox_width: 40rem;
    --artiitemgo_right: 10rem;
    --linkitemgo_right: 6rem;
    --item_after_width: 10rem;
    --tool_btn_width: 20%;

    --reader_width: 130rem;
    --readerContainer_width: 100rem;
    --reader_fontSize: 18px;
    --reader_padding: 6rem;
    --reader_top: 3rem;
    --reader_bottom: 3rem;
    --readerBtn_padding: 3rem;
    --readerCtrl_left: 105rem;
    --readerCtrl_width: 25rem;
    --readerCtrl_fs: 1.8rem;
    --reader_lnheight: 28px;
    --reader_indent: 2em;
    --input_fs: 2rem;
}

/* 最小页面宽 */
@media screen and (max-width: 1600px) {}

body {
    /* width: 100vw;
    height: 100vh; */
    margin: 0;
    padding: 0;
    /* position: relative; */
    background-color: var(--color-bodyBackground);
    cursor: url(../../public/cursor/normal.cur), default;
    /* cursor: url(../../../../../../coding/鼠标样式文件/naibai-cus_7234/牛奶蓝光标/diagonal1.cur), default; */
    overflow: auto;
    /* overflow: hidden; */
    color: var(--color-basic);
}

button {
    cursor: url(/public/cursor/normal.cur), default;
    color: var(--color-basic);
}

a {
    cursor: url(/public/cursor/link.cur), default;
    text-decoration: underline;
    /* color: var(--color-basic); */
    color: var(--color-link);
    transition: .2s;
    /* border-bottom: 0.2rem solid var(--color-purple); */
    text-underline-offset: 0.2rem;
}

a:hover {
    /* color: var(--color-darkpurple); */
    text-underline-offset: 0.5rem;
}

input {
    cursor: url(/public/cursor/text.cur), default;
}

textarea {
    resize: none;
    cursor: url(/public/cursor/text.cur), default;
}

*:not(input):not(textarea):focus-visible {
    outline: 2px solid var(--color-theme);
    outline-offset: -2px;
}

::selection {
    background-color: var(--color-textSelected);
    /* background-color: linear-gradient(45deg, #ff6b6b, #4ecdc4); */
    /* transition: .2s; */
}

.main {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: auto;
}

input::-webkit-inner-spin-button {
    cursor: url(/public/cursor/normal.cur), default;
}

div::-webkit-scrollbar,
code::-webkit-scrollbar,
textarea::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
    /* scrollbar-arrow-color: red; */
    cursor: url(/public/cursor/normal.cur), default;
}

div::-webkit-scrollbar-thumb,
code::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    /* width: 5px;
    height: 5px; */
    border-radius: 15px;
    /* box-shadow: inset 0 0 5px rgba(50, 50, 250, .3); */
    background: rgba(50, 150, 50, .3);
    /* scrollbar-arrow-color: red; */
    transition: .2s;
    cursor: url(/public/cursor/normal.cur), default;
}

div::-webkit-scrollbar-thumb:hover,
code::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
    background: rgba(50, 150, 50, 0.7);
    /* animation: scroll_bar_trans ease .3s both; */
}

div::-webkit-scrollbar-track,
code::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0); */
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.1);
}

@font-face {
    /* 字体声明  */
    font-family: 'icomoon';
    src: url('../fonts/icomoon/fonts/icomoon.eot');
    src: url('../fonts/icomoon/fonts/icomoon.eot') format('embedded-opentype'),
        url('../fonts/icomoon/fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon/fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon/fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'consolas';
    src: url('../../public/fonts/consolas.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Din';
    src: url('../../public/fonts/DIN-Regular-2.otf');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Din-Heavy';
    src: url('../../public/fonts/DIN-Medium-2.otf');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'siyuan';
    src: url('../../public/fonts/SourceHanSerifCN-Regular-1-subset.woff2');
    /* src: url(https://cdn.jsdelivr.net/gh/striumve/lyxWebsite@main/public/fonts/SourceHanSerifCN-Regular-1-subset.woff2); */
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'siyuan';
    src: url('../fonts/siyuan_bold_subset.woff');
    /* src: url(https://cdn.jsdelivr.net/gh/striumve/lyxWebsite@main/public/fonts/SourceHanSerifCN-Regular-1-subset.woff2); */
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'pingfang';
    src: url('../../public/fonts/PingFangSC-Regular.woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@keyframes startpage_hide {
    0% {
        opacity: 1;
        top: 0;
    }

    100% {
        opacity: 0;
        top: -10vh;
    }
}

@keyframes musicbox_hide {
    0% {
        opacity: 1;
        left: calc(var(--navbtn_fontsize) * 2 + var(--navbtn_padding) * 2 + 2rem);
    }

    100% {
        opacity: 0;
        left: calc(var(--navbtn_fontsize) * 2 + var(--navbtn_padding) * 2);
    }
}

@keyframes musicbox_show {
    0% {
        opacity: 0;
        left: calc(var(--navbtn_fontsize) * 2 + var(--navbtn_padding) * 2);
    }

    100% {
        opacity: 1;
        left: calc(var(--navbtn_fontsize) * 2 + var(--navbtn_padding) * 2 + 2rem);
    }
}

@keyframes public_hide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes public_show {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes page_hide_totop {
    0% {
        top: var(--padding_top);
        opacity: 1;
    }

    100% {
        top: var(--padding_top_minus);
        opacity: 0;
    }
}

@keyframes page_hide_tobottom {
    0% {
        top: var(--padding_top);
        opacity: 1;
    }

    100% {
        top: var(--padding_top_plus);
        opacity: 0;
    }
}

@keyframes page_show_totop {
    0% {
        top: var(--padding_top_plus);
        opacity: 0;
    }

    100% {
        top: var(--padding_top);
        opacity: 1;
    }
}

@keyframes page_show_tobottom {
    0% {
        top: var(--padding_top_minus);
        opacity: 0;
    }

    100% {
        top: var(--padding_top);
        opacity: 1;
    }
}

@keyframes readerCtrl_show_toleft {
    0% {
        left: calc(var(--readerCtrl_left) + 2rem);
        opacity: 0;
    }

    100% {
        left: calc(var(--readerCtrl_left));
        opacity: 1;
    }
}

@keyframes readerCtrl_show_toright {
    0% {
        left: calc(var(--readerCtrl_left) - 2rem);
        opacity: 0;
    }

    100% {
        left: calc(var(--readerCtrl_left));
        opacity: 1;
    }
}

@keyframes readerCtrl_hide_toleft {
    0% {
        left: calc(var(--readerCtrl_left));
        opacity: 1;
    }

    100% {
        left: calc(var(--readerCtrl_left) - 2rem);
        opacity: 0;
    }
}


@keyframes readerCtrl_hide_toright {
    0% {
        left: calc(var(--readerCtrl_left));
        opacity: 1;
    }

    100% {
        left: calc(var(--readerCtrl_left) + 2rem);
        opacity: 0;
    }
}