html {
    --book-background-color: #f7f1e2;
}

header nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


header, main, footer {
    margin: 0 auto 0 auto;
    padding: 15px 0 15px 0;
}

main, footer {
    background-color: var(--book-background-color);
}

main {
    --text-size: 1.4rem;
    --font-weight: 600;
}

#chap-title , #to-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    font-size: var(--text-size);
    font-weight: var(--font-weight);
}

#chap-title {
    padding: 10px 0 0 0;
}

#chap-number {
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */

    text-align: center;
    margin: auto;

    color: var(--book-background-color);
    border-radius: 50%;

    width: calc(var(--text-size) * 1.5);
    height: calc(var(--text-size) * 1.5);
    
}

#chap-title-text {
    padding: 0 0 20px 0;
}

main ul li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5px 10px;

    color: var(--book-background-color);
    border-radius: 100px;

}
@media screen and (max-width: 480px) {
    main ul li {
        margin: 30px 5px 0 5px;
    }

}
@media screen and (min-width: 481px) {
    main ul li {
        margin: 35px 150px 0 150px;
    }
}

main ul li a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;

    font-size: var(--text-size);
    font-weight: var(--font-weight);
}

.article-number {
    background-color: var(--book-background-color);
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: calc(var(--text-size) + 4px);
    height: calc(var(--text-size));
    border-radius: 50%;

    text-align: center;
    margin: auto;
}

#to-top {
    background-color: #cba850;
    border-radius: 100px;
    color: var(--book-background-color);

    padding: 5px;
}

@media screen and (max-width: 480px) {
    #to-top {
        margin: 35px 5px 35px 5px;
    }
}
@media screen and (min-width: 481px) {
    #to-top {
        margin: 35px 350px 35px 350px;
    }
}

#to-top, main ul li {
    box-shadow: 0px 6px 1px 0px #101010;
}