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

    --color_bodyBackground: rgb(57, 197, 99);
    --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(225, 250, 225, .9);
    --color_box_solid_hover: rgba(225, 250, 225, .95);
    --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_theme: rgba(1, 150, 47, 1);
    --color_purple: rgba(100, 100, 255, 1);
    --color_blue: rgba(1, 47, 255, 1);
    --color_grey: rgba(150, 150, 150, 1);
    --color_darkgrey: rgba(100, 100, 100, 1);

    --start_btn_width: 15vw;
    --box_width: 20vw;
    --nav_width: 101px;
    --box_left: 5vw;
    --page_width: 60vw;
    --pages_left: 35vw;
    --padding_top: 10vh;
    --padding_top_minus: 5vh;
    --padding_top_plus: 15vh;

    --yiyan_margin: 2vw;
    --pages_columncount: 2;
    --navbtn_fontsize: 2.3vh;
    --navbtn_padding: 1.5vw;
    --musicbtn_fontsize: 2.8vh;
    --musicSelectorBox_width: 20vw;
    --artiitemgo_right: 5vw;
    --linkitemgo_right: 3vw;
    --item_after_width: 5vw;

    --reader_width: 65vw;
    --readerContainer_width: 55vw;
    --reader_fontSize: 18px;
    --reader_padding: 3vw;
    --reader_top: 3vh;
    --reader-bottom: 3vh;
    --readerBtn_padding: 1.5vw;
    --readerCtrl_left: 57vw;
    --readerCtrl_width: 10vw;
    --reader_lnheight: 28px;
    --reader_indent: 2em;
}

/* 最小页面宽 */
@media screen and (max-width: 1600px) {
    body {
        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;
    color: var(--color_basic);
}

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

a {
    cursor: url(/public/cursor/link.cur), default;
}

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

::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;
}

div::-webkit-scrollbar, 
code::-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 {
    /*滚动条里面小方块*/
    /* 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: .3s;
    cursor: url(/public/cursor/normal.cur), default;
}

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

div::-webkit-scrollbar-track, 
code::-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.otf');
    /* src: url(https://cdn.jsdelivr.net/gh/striumve/lyxWebsite@main/public/fonts/SourceHanSerifCN-Regular-1.otf); */
    font-weight: normal;
    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 + 1vw);
    }

    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 + 1vw);
    }
}

@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) + 1vw);
        opacity: 0;
    }

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

@keyframes readerCtrl_show_toright {
    0% {
        left: calc(var(--readerCtrl_left) - 1vw);
        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) - 1vw);
        opacity: 0;
    }
}


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

    100% {
        left: calc(var(--readerCtrl_left) + 1vw);
        opacity: 0;
    }
}
@keyframes blur_5 {
    0% {
        backdrop-filter: blur(5px);
    }

    50% {
        backdrop-filter: blur(5.1px);
    }

    100% {
        backdrop-filter: blur(5px);
    }
}

@keyframes blur_2 {
    0% {
        backdrop-filter: blur(2px);
    }

    50% {
        backdrop-filter: blur(2.1px);
    }

    100% {
        backdrop-filter: blur(2px);
    }
}