/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP&family=M+PLUS+Rounded+1c:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500&family=Noto+Serif+JP&display=swap');

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.font-m-plus-rounded {
    font-family: "M PLUS Rounded 1c";
}

    .fs-6 .font-m-plus-rounded,
    .font-m-plus-rounded.fs-6 {
        font-size: 1.3rem !important;
    }

    .fs-5 .font-m-plus-rounded,
    .font-m-plus-rounded.fs-5 {
        font-size: 1.5rem !important;
    }

.font-noto-sans {
    font-family: "Noto Sans JP";
}

.font-noto-serif {
    font-family: "Noto Serif JP";
}

/* Settings Page */
.p-settings .list-group {
    max-width: 460px;
    margin: 0rem auto;
}

.p-settings .form-check-input:checked + .form-checked-content {
    opacity: .5;
}

.p-settings .form-check-input-placeholder {
    border-style: dashed;
}

.p-settings [contenteditable]:focus {
    outline: 0;
}

.p-settings .list-group-checkable .list-group-item {
    cursor: pointer;
}

.p-settings .list-group-item-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

    .p-settings .list-group-item-check:hover + .list-group-item {
        background-color: var(--bs-light);
    }

    .p-settings .list-group-item-check:checked + .list-group-item {
        color: #fff;
        background-color: var(--bs-blue);
    }

    .p-settings .list-group-item-check[disabled] + .list-group-item,
    .p-settings .list-group-item-check:disabled + .list-group-item {
        pointer-events: none;
        filter: none;
        opacity: .5;
    }

.p-settings .list-group-radio .list-group-item {
    cursor: pointer;
    border-radius: .5rem;
}

.p-settings .list-group-radio .form-check-input {
    z-index: 2;
    margin-top: -.5em;
}

.p-settings .list-group-radio .list-group-item:hover,
.p-settings .list-group-radio .list-group-item:focus {
    background-color: var(--bs-light);
}

.p-settings .list-group-radio .form-check-input:checked + .list-group-item {
    background-color: var(--bs-body);
    border-color: var(--bs-blue);
    box-shadow: 0 0 0 2px var(--bs-blue);
}

.p-settings .list-group-radio .form-check-input[disabled] + .list-group-item,
.p-settings .list-group-radio .form-check-input:disabled + .list-group-item {
    pointer-events: none;
    filter: none;
    opacity: .5;
}

/* Story */
#reader-container {
    font-size: 1.5rem;
    margin-top: 2em;
    writing-mode: vertical-rl;
    max-height: 800px;
    overflow: scroll;
    scrollbar-width: none;
}

    #reader-container::-webkit-scrollbar {
        display: none;
    }

    #reader-container p::before {
        content: "　";
    }

    #reader-container p {
        line-height: 2.2em;
    }

    #reader-container ruby rt {
        user-select: none;
    }

.form-check-input:checked {
    background-color: #000;
    border-color: #000;
}

.form-check-input:focus {
    border-color: #cccc;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 15%);
}

/*
    header nav li
*/
header nav li {
    border-bottom: 3px solid white;
    border-collapse: collapse;
}

    header nav li:hover,
    header nav li:focus {
        border-bottom: 3px solid black;
        border-collapse: collapse;
    }