@charset "UTF-8";

/* 選單控制 */
#menu {
    padding: 200px 0 0;
    transition: top 0.4s ease-in-out;
    z-index: 1000;
}

#table-of-contents {
    z-index: 100;
}

#number-of-pages {
    z-index: 200;
}

#settings {
    transition: top 0.6s ease-in-out;
    z-index: 300;
}

#table-of-contents,
#number-of-pages {
    top: 0;
    overflow-y: scroll;
    transition: bottom 0.6s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 100;
}

#menu,
#table-of-contents,
#number-of-pages,
#settings {
    width: 100%;
    position: fixed;
    background-color: var(--background-color);
    border-bottom: 1px solid var(--interface-border-color);
    box-shadow: 0 0 40px var(--interface-shadow-color);
}

/* 頂底間距 */
#table-of-contents .interface,
#number-of-pages .interface,
#prologue .text-content {
    padding-top: 3.5em;
}

#settings .interface {
    margin-bottom: 0;
}

/* 顯示及隱藏 */
.menu-show {
    top: -200px;
}

.menu-hide {
    top: -300px;
}

.settings-show {
    top: 93px;
}

.settings-hide {
    top: -388px;
}

.table-of-contents-show,
.number-of-pages-show {
    bottom: 0%;
}

.table-of-contents-hide,
.number-of-pages-hide {
    bottom: 100%;
}

@media only screen and (max-width: 413px) {
    .settings-show {
        top: 81px;
    }
}