@font-face {
    font-family: Dymon-ShouXieTi;
    src: url("/assets/font/Dymon-ShouXieTi.otf");
}

body {
    min-height: 100vh;
    background-color: #E5E5F7;
    background: repeating-linear-gradient( 45deg, #f9e3ff, #f9e3ff 7px, #fdf5ff 7px, #fdf5ff 25px );
}

.text-main {
    font-family: Dymon-ShouXieTi;
    font-size: 20px;
    margin: 15px;
}

.nineslice {
    border-image: url("/assets/img/9slice.gif") 11 11 11 11 fill / 11px 11px 11px 11px;
    padding: 11px 11px 11px 11px;
}

/* navbar */
#nav {
    user-select: none;
    width: 750px;
    height: 156px;
    position: relative;
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.arrow {
    cursor: pointer;
    user-select: none;
    position: absolute;
    bottom: 15px;
    transition: left 0.05s ease-out;
}
#arrow-l {left: 285px;}
#arrow-l:hover {left: 280px;}
#arrow-r {left: 575px; transform: scaleX(-1);}
#arrow-r:hover {left: 580px;}

#conductor {
    position: absolute;
    left: 100px;
    bottom: -69px;
}

#page-text {
    filter: invert(0);
    cursor: pointer;
    position: absolute;
    left: 375px;
    top: 15px;
    transition: opacity 0.5s;
    transition: filter 0.1s;
}
#page-text:hover {
    filter: invert(1);
}

#whereto {
    position: absolute;
    left: -100px;
}

/* content */
#main-content {
    width: 750px;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.5s;
}