@font-face {
    font-family: myfont;
    src: url("0to9.ttf"); /* title 的字体 */
}
*{
    box-sizing: border-box;
}
:root {
    --transition-time: .4s;
    --first-transition-time: 1s;
    --theme-color1-clear: #dcf6fba0;
    --theme-color2-clear: #66ccffa0;
    --theme-color1: #dcf6fb;
    --theme-color2: #66ccff;
}


.bg{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0; left: 0;
    background-image: url("bg.jpg"); /* 背景图片 */
    background-repeat: no-repeat;
    z-index: -2;
    transition: var(--transition-time);
    background-size: cover;
}

.blur{
    filter: blur(12px);
}

.nav{
    position: fixed;
    top: 0;
    width: 100%;
    user-select: none;
}

.nav-button{
    float: right;
    margin: 1rem 2rem 1rem 0;
    position: relative;
}

.button{
    border-radius: 2rem;
    padding: .5rem 1.25rem;
    cursor: pointer;
    transition: var(--transition-time);
}

.theme1{
    background-color: var(--theme-color1-clear);
}
.theme1:hover, .theme1.active{
    background-color: var(--theme-color1);
}

.theme2{
    background-color: var(--theme-color2-clear);
}
.theme2:hover, .theme2.active{
    background-color: var(--theme-color2);
}

.board{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0);
    top: 0;
    right: 0;
    transition: var(--transition-time);
    z-index: -1;
}

.welcome{
    margin-top: 36vh;
    text-align: center;
}

.title{
    font-family: myfont;
    font-size: 16vmin;
    transition: var(--transition-time);
    opacity: 0;
    user-select: none;
}

.show{
    opacity: 1;
}

.screen-focus-in {
    animation: text-focus-in var(--first-transition-time) cubic-bezier(0.550, 0.085, 0.680, 0.530);
}

.text-focus-in {
    animation: text-focus-in var(--transition-time) cubic-bezier(0.550, 0.085, 0.680, 0.530);
}

@keyframes text-focus-in {
    0% {
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        filter: blur(0px);
        opacity: 1;
    }
}

.cn-info {
    position: fixed;
    bottom: 1rem;
    text-align: center;
    width: 100%;
}
.cn-info a{
    text-decoration: none;
    font-size: .8rem;
    color: #333;
}