body {
    font-family: "Merriweather Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 1.5em;
    background-color: #e6dfc5;
}

h2 {
    font-size: 2em;
    margin-bottom: .5em;
}

h3 {
    font-size: 1.3em;
    margin-bottom: .5em;
}

.title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;

    &>* {
        margin: 0px;
        line-height: 1em;
    }
}

strong {
    font-weight: bolder;
}

section {
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    margin-bottom: 20px;
}

hr.divider {
    border: 1px solid rgba(255, 255, 255, .1);
    margin: 10px 10px;
}

.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #e6dfc5;
    padding: 80px 100px;

    & .summary {
        & ul li {
            line-height: 2em;
        }
    }
}

.box-full {
    display: flex;
    background-color: #302e2c;
    background-image: radial-gradient(circle, #34302f 0%, #302e2c 60%), radial-gradient(circle, #34302f 0%, #302e2c 50%);
    background-position: center top -50vh, right -50vh bottom -56vh;
    padding: 80px;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    gap: 60px;
    color: #e19137;

    & .content {
        display: flex;
        width: 100%;
        height: 100vh;
        justify-content: center;
        align-items: center;
        gap: 80px;
        padding: 80px;
        line-height: 1em;

        & img {
            max-height: 100%;
        }
    }
}

.box-bio-menu {

    display: flex;
    width: 100%;
    min-height: 100vh;

    & .bio {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        width: 25vw;
        background-color: #302e2c;
        background-image: radial-gradient(circle, #34302f 0%, #302e2c 60%), radial-gradient(circle, #34302f 0%, #302e2c 50%);
        background-position: center top -50vh, right -50vh bottom -56vh;
        padding: 30px;
        position: relative;
        color: #fafafa;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;

        &::after {
            content: ' ';
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            box-shadow: 0px 0px 16px 13px rgba(0, 0, 0, 0.27);
        }

        &::before {
            content: ' ';
            position: absolute;
            top: 0;
            left: -15px;
            height: 100%;
            box-shadow: 11px 0px 15px 3px rgba(0, 0, 0, 0.5);
        }

        & .picture {
            border-radius: 5px;
            background: #d2aa00;
            border: 8px solid #d2aa00;
            border-bottom: 0px;
            text-align: center;

            & img {
                max-height: 300px;
                object-fit: contain;
                display: block;
            }

            & span {
                display: block;
                padding: 5px;
            }
        }
    }

    & .menu {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #e6dfc5;
        padding: 80px 100px;

        & .summary {
            & ul li {
                line-height: 2em;
            }
        }
    }
}

.book-page {
    display: flex;
    width: 100%;
    min-height: 100vh;

    & .bio {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 25vw;
        background-color: #302e2c;
        background-image: radial-gradient(circle, #34302f 0%, #302e2c 60%), radial-gradient(circle, #34302f 0%, #302e2c 50%);
        background-position: center top -50vh, right -50vh bottom -56vh;
        padding: 50px 30px;
        position: relative;
        color: #fafafa;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;

        &.color-2 {
            background-color: #302e2c;
            background-image: radial-gradient(circle, #34302f 0%, #302e2c 60%), radial-gradient(circle, #34302f 0%, #302e2c 50%);
        }

        &.color-3 {
            background-color: #302e2c;
            background-image: radial-gradient(circle, #34302f 0%, #302e2c 60%), radial-gradient(circle, #34302f 0%, #302e2c 50%);
        }

        &::before {
            content: ' ';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            box-shadow: 0px 0px 16px 13px rgba(0, 0, 0, 0.27);
        }

        &::after {
            content: ' ';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100%;
            box-shadow: 11px 0px 11px -1px rgba(0, 0, 0, 0.2);
        }


    }

    & .page {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        background-color: #e6dfc5;
        padding: 80px 100px;

        & .content {
            max-width: 50vw;
            text-align: center;

            & img {
                max-height: 45vh;
                margin-bottom: 20px;
            }

            & p {
                text-indent: 4em;
                margin-bottom: 20px;
                text-align: start;
            }
        }
    }
}

.book-page-page {
    display: flex;
    width: 100%;
    min-height: 100vh;

    & .page {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        background-color: #e6dfc5;
        padding: 80px 100px;
        width: 50%;
        position: relative;
        border-radius: 10px;

        & .content {
            max-width: 50vw;
            text-align: center;

            &.chapter {
                display: flex;
                flex-direction: column;
                align-items: center;

                & h2 {
                    height: 25%;
                }
            }

            &.chapter-title {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 15%;
            }

            & img {
                max-height: 45vh;
                max-width: 85vw;
                margin-bottom: 20px;
            }

            & p {
                text-indent: 4em;
                margin-bottom: 20px;
                text-align: start;
            }

        }

        &:first-of-type:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            height: 97%;
            box-shadow: 0px 16px 16px 10px rgba(0, 0, 0, 0.27);
        }

        &:last-of-type::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 97%;
            box-shadow: 0px 16px 16px 10px rgba(0, 0, 0, 0.27);
        }
    }
}

footer {
    width: 100%;
    padding: 0px 20px 20px 0px;
    display: flex;
    justify-content: end;
    font-size: .7rem;
}

@media (max-width:600px) {
    .box-full {
        flex-direction: column;
        gap: 30px;
        padding: 10vh 20px;

        & .content {
            flex-direction: column;
            gap: 30px;
            padding: 10vh 20px;

            & img {
                max-height: 20vh;
            }
        }
    }

    .box-bio-menu {
        flex-direction: column;

        & .bio {
            width: 95vw;
            min-height: 100vh;
            margin-left: 5vw;
        }

        & .menu {
            min-height: 100vh;

            & .content {
                max-width: 95vw;
            }
        }
    }

    .book-page {
        flex-direction: column;

        & .bio {
            width: 95vw;
            min-height: 100vh;
        }

        & .page {
            min-height: 100vh;
            padding: 30px;

            & .content {
                max-width: 95vw;
            }
        }
    }

    .book-page-page {
        flex-direction: column;

        & .page {
            min-height: 100vh;
            width: 100%;
            padding: 30px;

            & .content {
                max-width: 95vw;
            }

            &:first-of-type:after,
            &:last-of-type::before {
                display: none;
            }

            &:first-of-type {
                box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
                margin-bottom: 20px;
            }
        }
    }
}

.button {
    padding: 10px;
    border: 3px solid #000;
    margin: 20px;
    display: inline-block;

    &:hover {
        box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
    }

    &.style-1 {
        border-top-left-radius: 255px 15px;
        border-top-right-radius: 15px 225px;
        border-bottom-right-radius: 225px 15px;
        border-bottom-left-radius: 15px 255px;
    }

    &.style-2 {
        border-top-left-radius: 15px 225px;
        border-top-right-radius: 255px 15px;
        border-bottom-right-radius: 15px 255px;
        border-bottom-left-radius: 225px 15px;
    }
    
    &.style-3 {
        border-top-left-radius: 225px 15px;
        border-top-right-radius: 225px 15px;
        border-bottom-right-radius: 15px 255px;
        border-bottom-left-radius: 15px 255px;
    }
}