/* 🌱 DETAILS */
#details {
    display: flex ;
    flex-flow: column wrap ;
    gap: 1rem ;
    background-color: var(--col_blkgry) ;
    width: 100% ;
    padding: var(--padding_mobile) ;
}

#details .bookcover {
    display: flex ;
    flex-flow: column nowrap ;
    align-items: center ;
}

#details .bookcover img {
    max-width: 100% ;
    height: auto ;
    border: 0.5rem solid var(--col_red01) ;
}

#details table {
    color: var(--col_wht) ;
    text-align: left ;
    font-family: "Averia Serif Libre", serif ;
    font-size: 1rem ;
    width: 100% ;
    border-collapse: collapse ;
}

#details table tbody tr:nth-child(even) {
    background-color: color-mix(in srgb, var(--col_red01) 10%, transparent) ;
}

#details table tbody tr {
    padding: 1rem ;
}

#details table td,
#details table th {
    border: 0.2rem solid color-mix(in srgb, var(--col_blk) 85%, transparent) ;
    padding: 1rem ;
}

#details table th {
    color: color-mix(in srgb, var(--col_wht) 65%, transparent) ;
    text-align: right ;
}

#details table td {
    vertical-align: middle ;
}

#artists {
    background-color: var(--col_blu) ;
    padding: var(--padding_mobile) ;
}

#artists p {
    color: var(--col_blkgry) ;
    font-size: 1.5rem ;
    font-weight: 900 ;
    margin-bottom: 1rem ;
}

.artists_contain {
    display: flex ;
    flex-flow: row nowrap ;
    justify-content: flex-start ;
    gap: 1rem ;
    max-width: 100vw ;
    overflow-x: auto ;
    overflow-y: hidden ;
}

#artists .card_artist {
    background-color: var(--col_wht) ;
    font-family: "Amatic SC", sans-serif ;
    font-weight: 900 ;
    text-align: center ;
    min-width: 15rem ;
    height: 20rem ;
    border: 0.3rem solid var(--col_blulit) ;
    border-radius: 2rem ;
    padding: 1.25rem 0.5rem ;
    margin-bottom: 0.5rem ;
}

#artists .card_artist h4 {
    color: var(--col_blkgry) ;
    font-size: 2rem ;
    font-weight: 700 ;
    letter-spacing: -0.1rem ;
    line-height: 0.9 ;
}

#artists .card_artist h4 span {
    color: var(--col_org) ;
    font-family: "Piedra", serif ;
    font-size: 1.9rem ;
    font-weight: 400 ;
    text-transform: uppercase ;
    font-stretch: 85% ;
}

#artists .card_artist img {
    width: auto ;
    height: 10rem ;
    margin: 0.5rem 0 ;
}

#artists .card_artist p {
    color: var(--col_blkgry) ;
    font-size: 1.25rem ;
    line-height: 1 ;
}

#filler {
    display: flex ;
    flex-flow: column wrap ;
    align-items: center ;
    gap: 0 ;
    width: 100% ;
    padding: var(--padding_mobile) ;
}

.card_word {
    display: flex ;
    flex-flow: column nowrap ;
    align-items: center ;
    overflow: hidden ;
    width: 100% ;
}

.card_word p {
    color: var(--col_ylw);
    font-family: "Amatic SC", sans-serif ;
    font-size: 5rem ;
    font-weight: 900 ;
    padding: 1rem 0 ;
}

.card_word img {
    background-color: var(--col_wht) ;
    object-fit: contain ;
    object-position: center ;
    width: 100% ;
    height: 23rem ;
    border: 0.5rem solid var(--col_red01) ;
    border-radius: 5rem ;
}

#reviews {
    background-color: var(--col_org) ;
    padding: var(--padding_mobile) ;
}

.reviews_contain {
    width: 100% ;
}

#reviews h3 {
    flex-basis: 100% ;
    padding-bottom: 1rem ;
}

#reviews h3 span {
    color: var(--col_blk) ;
}

#reviews .card_review {
    background-color: var(--col_blkgry) ;
    font-family: "Amatic SC", sans-serif ;
    font-weight: 900 ;
    width: 100% ; 
    border-radius: 1rem ;
    padding: 1rem ;
    margin-bottom: 0.5rem ;
}

#reviews .card_review a {
    width: 100% ;
}

#reviews blockquote {
    color: var(--col_wht) ;
    font-size: 2.25rem ;
    text-align: center ;
}

#reviews .card_review a p {
    color: var(--col_ylw) ;
    font-size: 1.75rem ;
    text-align: right ;
}

#contact {
    display: flex ;
    flex-flow: column wrap ;
    align-items: center ;
    width: 100% ;
    padding: var(--padding_vert) var(--padding_mobile) ;
}

.contactform {
    width: 100% ;
    margin: auto ;
}

#contact form {
    display: flex ;
    flex-flow: column wrap ;
    align-items: center ;
    width: 100% ;
    padding: 2rem 0 ;
    margin: auto ;
}

#contact form input ,
#contact form label ,
#contact form button ,
#contact form select ,
#contact form textarea {
    font-family: "Averia Serif Libre", serif ;
    font-size: 1.1rem ;
    text-align: left ;
    width: 100% ;
    margin-bottom: 0.5rem ;
}

input[type="text"] ,
input[type="email"] ,
textarea {
    width: 100% ;
    border: 0.2rem solid var(--col_blulit) ;
    border-radius: 0.75rem ;
    padding: 0.5rem 1rem ;
}

textarea {
    height: 7rem ;
}

#contact form button {
    font-family: "Averia Serif Libre", serif ;
    font-size: 1.1rem ;
    text-align: center ;
    margin-bottom: 0.5rem ;
}

button[type="submit"],
input[type="submit"] {
    background-color: var(--col_org) ;
    color: var(--col_blk) ;
    font-weight: 600 ;
    max-width: 10rem ;
    border: none ;
    border-radius: 0.75rem ;
    padding: 0.75rem 1rem ;
    margin-top: 0.5rem ;
    cursor: pointer ;
}

button[type="submit"]:hover {
    background-color: var(--col_red01) ;
    color: var(--col_wht) ;
}

button[type="submit"]:disabled {
    background-color: var(--col_gry) ;
    cursor: not-allowed ;
}

#excerpts {
    display: none ;
    background-image: url("../images/POGI_BG_TEXTURE_02.webp") ;
    background-size: 100% 100% ;
    background-repeat: no-repeat ;
}

#excerpts h3 {
    padding: 1rem 0 ;
}

#excerpts h3 span {
    color: var(--col_ylw) ;
    -webkit-text-stroke: 0.5rem var(--col_red01) ;
}

.excerpts_container {
    display: grid ;
    gap: 1rem ;
    width: 100% ;
    padding: var(--padding_mobile) ;
    margin: auto ;
}

.excerpts_main img {
    object-fit: cover ;
    width: 100% ;
    height: auto ;
    border: 0.3rem solid var(--col_blu) ;
    border-radius: 1rem ;
}

.excerpts_thumbs {
    display: flex ;
    flex-flow: row nowrap ;
    gap: 1rem ;
}

.excerpts_thumbs img {
    width: 100% ;
    height: auto ;
    object-fit: cover ;
    cursor: pointer ;
    border: 0.2rem solid transparent ;
    border-radius: 0.5rem ;
    transition: all 0.2s ease ;
}

.excerpts_thumbs img:hover {
    transform: scale(1.05) ;
    border-color: var(--col_blu) ;
}

footer {
    display: flex ;
    flex-flow: column nowrap ;
    justify-content: space-evenly;
    background-color: var(--col_blkgry) ;
    color: var(--col_blu) ;
    font-family: "Averia Serif Libre", serif ;
    font-weight: 700 ;
    text-align: center ;
    min-height: 15rem ;
    padding: 2rem ;
}

footer .business {
    display: flex ;
    flex-flow: column wrap ;
    align-items: center;
    row-gap: 2rem ;
}

footer .purchase {
    justify-self: start ;
}

footer .maillist {
    justify-self: end ;
}

footer .builtby {
    color: var(--col_blkgry) ;
    text-align: center ;
    padding: 0 ;
}

footer .credits {
    text-align: center ;
    padding: 0.5rem 0 ;
}

footer .credits a {
    color: var(--col_red03) ;
}

footer .credits a:hover {
    color: var(--col_red02) ;
}

footer .copyright {
    color: var(--col_ylw) ;
}

@media screen and (min-width: 55rem) {
    #details {
        display: grid ;
        grid-template-columns: 1fr 1fr ;
        grid-template-rows: auto auto ;
        align-items: start ;
        gap: 1rem ;
        padding: 2rem var(--padding_hori) ;
    }
    #details table {
        font-size: 1.25rem ;
    }
    #filler {
        display: flex ;
        flex-flow: row wrap ;
        justify-content: center ;
        gap: 2rem ;
    }
    .card_word {
        display: flex ;
        flex-flow: column nowrap ;
        align-items: center ;
        overflow: hidden ;
        width: 25vw ;
    }
    .down p {
        order: 1 ;
    }
    .down picture {
        order: 0 ;
    }
    .reviews_contain {
        display: flex ;
        flex-flow: row wrap ;
        justify-content: center ;
        gap: 2rem ;
        max-height: 30rem ;
        overflow-y: auto ;
        overflow-x: hidden ;
        padding: 2rem var(--padding_hori) ;
    }
    #reviews .card_review {
        padding: 1rem 5rem ;
    }
    #reviews blockquote {
        font-size: 2.5rem ;
    }
    #reviews p {
        font-size: 2.25rem ;
    }
    #details table td,
    #details table th {
        padding: 1.5rem 1rem ;
    }
    .excerpts {
        
    }
    .excerpts_container {
        grid-template-columns: 1fr 1fr ;
    }
    .excerpts_main {
        
    }
    .excerpts_main img {
        width: auto ;
        height: 100% ;
    }
    .excerpts_thumbs {
        display: flex ;
        flex-flow: column wrap ;
        justify-content: center ;
    }
    .excerpts_thumbs img {
        width: 15vw ;
    }
    footer .business {
        display: flex ;
        flex-flow: row nowrap ;
        justify-content: center;
        column-gap: 2rem ;
    }
    footer .builtby {
        padding: 0 ;
    }
}

/*.book_container {
    
}

.book {
    position: relative ;
    width: 20rem ;
    height: 30rem ;
    transform-style: preserve-3d ;
    transition: transform 0.25s ;
    rotate: 3deg ;
}

.page-checkbox {
    display: none ;
}

.page {
    position: absolute ;
    width: 100% ;
    height: 100% ;
    top: 0 ;
    left: 0 ;
    transform-style: preserve-3d ;
    transform-origin: left center ;
    transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), z-index 0.5s ;
    z-index: calc(10 - var(--page-index)) ;
}

.page-1 {
    --page-index: 1 ;
}
.page-2 {
    --page-index: 2 ;
}
.page-3 {
    --page-index: 3 ;
}
.page-4 {
    --page-index: 4 ;
}

.page-2 .front,
.page-3 .front,
.page-4 .front {
    padding: 4rem 2.25rem ;
}

.page-2 .front .pagebook,
.page-3 .front .pagebook,
.page-4 .front .pagebook {
    position: absolute ;
    bottom: 2rem ;
    right: 2.25rem ;
    font-family: "Averia Serif Libre", serif ;
    font-size: 0.8rem ;
}

.page-2 .front h4,
.page-3 .front h4,
.page-4 .front h4 {
    font-family: "Averia Serif Libre", serif ;
    font-size: 1.5rem ;
    margin-bottom: 1.5rem ;
}

.page-2 .front div,
.page-3 .front div,
.page-4 .front div {
    margin-bottom: 0.85rem ;
}

.page-2 .front p,
.page-3 .front p,
.page-4 .front p {
    font-family: "Averia Serif Libre", serif ;
    font-size: 0.9rem ;
    margin-bottom: 0.4rem ;
}

.page-1 .back ,
.page-2 .back,
.page-3 .back {
    padding: 2.5rem 1rem ;
}

.page-1 .back p ,
.page-2 .back p,
.page-3 .back p {
    font-family: "Averia Serif Libre", serif ;
    font-size: 0.7rem ;
    margin-top: 0.25rem ;
}

.page-4 .back .div_purchase {
    background-color: var(--col_blk) ;
    padding: 100% 1rem ;
}

.page-4 .back .div_purchase p:first-of-type {
    text-align: center ;
}

.front, .back {
    position: absolute ;
    display: flex ;
    flex-direction: column ;
    width: 100% ;
    height: 100% ;
    box-sizing: border-box ;
    backface-visibility: hidden ;
    box-shadow: 0.3rem 0.3rem 1rem rgba(0,0,0,0.3) ;
    overflow: hidden ;
    border: 0.05rem solid var(--col_blkgry) ;
}

.front {
    background: #ffffff ;
    color: #333 ;
}

.back {
    display: flex ;
    flex-flow: column nowrap ;
    justify-content: center ;
    align-items: center ;
    background: #fafafa ;
    color: #333 ;
    transform: rotateY(180deg) ;
}

.front img,
.back img {
    width: 100% ;
    height: 100% ;
    object-fit: contain ; 
}

label {
    position: absolute ;
    top: 0.25rem ;
    background-color: var(--col_ylw) ;
    font-family: "Averia Serif Libre", serif ;
    font-size: 0.9rem ;
    font-weight: 700 ;
    cursor: pointer ;
    user-select: none ;
    border-radius: 0.25rem ;
    padding: 0.25rem ;
}

.next-btn {
    right: 1rem ;
}

.back-btn {
    left: 1rem ;
}

.flip {
    transform: scaleX(-1) ;
}

.back-btn {
    align-self: flex-start ;
}

.page-checkbox:checked + .page {
    transform: rotateY(-180deg) ;
    z-index: var(--page-index) ;
}*/