.book img{
    background-image: url("../img/book_covers/default.png");
    background-size: cover;
    background-position: center;
    border-left: 1.5px solid #5558;
}

section h2{
    margin:0;
    font-size:2em;
}

section h3{
    margin:0 0 0.3em;
}

/* Hero */
section.hero{
    height:70vh;
    width:100%;
    overflow:hidden;
    /* background-image: var(--hero); */
    background-size: 100%;
    background-position: center;
    position:relative;
}

section.hero .view-circles{
    position:absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    gap:0.1em;
}

section.hero .view-circles .view-circle{
    height: 5.5px;
    width: 5.5px;
    aspect-ratio:1;
    background: #ddd;
    border-radius:100%;
}

section.hero .view-circles .view-circle.active{
    height: 8px;
    width: 8px;
    background: #fff;
}


/* Continue reading */
section.continue-reading{
    margin-top:1em;
}

section.continue-reading .head small{
    font-size:0.7em;
    margin-top:-0.5em;
}


section.continue-reading .shuffle{
    margin-top:1em;
    /* padding-top:0.5em; */
    width:100%;
    overflow-x:auto;
    /* height:15em; */
    padding-block:0.5em;
    scrollbar-width:none;
    white-space:nowrap;
}

section.continue-reading .shuffle .book-card{
    height: 12em;
    aspect-ratio:2.1/1;
    min-width: 28em;
    background: var(--bg);
    border: var(--color);
    position:relative;
    border-radius:0.5em;
    font-size:0.8em;
    margin:0 0 0 1em;
    padding:0.5em 0.8em;
    white-space:wrap;
    display:inline-flex;
}

section.continue-reading .shuffle .book-card:hover{
    outline: 1px solid var(--primary);
    box-shadow: 0 2px 5px 2px var(--bg);
    cursor:pointer;
}

section.continue-reading .shuffle .book-card:hover .book-cover{
    box-shadow: 0px 2px 3px 1px #0004;
    transform: scale(1.05);
}

section.continue-reading .shuffle .book-card .book-cover{
    height: 110%;
    aspect-ratio:3.5/5;
    /* min-width: 8em; */
    position:relative;
    bottom: -10%;
    flex:1;
    border-radius:0.5em;
}




section.continue-reading .shuffle .book-card .details span{
    font-size:0.8em;
    margin-bottom:0.5em;
}

section.continue-reading .shuffle .book-card .btn{
    border-radius: 1em;
    padding:0.5em 1em;
    border:1px solid #000;
    background: var(--color);
}



/* Trending Tags */
section.trending-tags{
    margin-top:1em;
    padding:1em 4em;
    font-size:0.9em;
}

section.trending-tags .tags{
    font-size:0.9em;
    overflow-x:auto;
    scrollbar-width:none;
    width:100%;
    white-space:nowrap;
    height:5em;
    padding-block:0.5em;
}

/* section.trending-tags .tags .tag{
    white-space:nowrap;
} */

section.trending-tags .tag{
    padding: 0.5em;
    border-radius:2em;
    transition: 0.2s all;
    display:inline-flex;
    margin-left: 0.5em;
}

section.trending-tags .tag:hover{
    outline: 1px solid var(--color);
    cursor:pointer;
}

section.trending-tags .tag .tag-icon{
    color: var(--color);
    background:var(--bg);
    height:2em;
    min-width:2em;
    font-size:1.2em;
    border-radius:100%;

    display:flex;
    align-items:center;
    justify-content:center;    
}


/* Mid section */
section.mid-section{
    background-image:linear-gradient(to bottom, #fff, #eee);
    padding: 2em 4em;
    margin: 2em 0em;
    /* border-top:1px solid var(--border-color); */
}

divider.light{
    background:var(--border-color);
    height:1px;
    width:100%;
    display:block;
}

section.mid-section .box-card{
    border:1px solid var(--border-color);
    background:#fff;
    padding:1em;
    border-radius:1em;
    font-size:0.9em;
}

section.mid-section .box-card .icon-circle{
    height:2.5em;
}


/* Mid section left */
section.mid-section > .main{
    margin-top:2em;
}

section.mid-section > .main > .left{
    flex:1;
    width:30%;
}

section.mid-section > .main > .left .user{
    font-size:0.9em;
}

section.mid-section > .main > .left .user .in-icon{
    font-size:0.4em;
    color:var(--border-color);
}

section.mid-section > .main > .left .user .username{
    font-weight:600;
}

section.mid-section > .main > .left .user small{
    font-size:0.8em;
    color:var(--grey);
}

/* fast rising */
@media (min-width: 768px){
    section.mid-section > .main > .left .fast-rising .box-card{
        padding-block: 2em;
    }
}
section.mid-section > .main > .left .fast-rising .number-circle{
    background: var(--primary);
    color: #fff;
    height:2.3em;
    aspect-ratio:1;
    font-size:0.8em;
    border-radius:100%;

    display:flex;
    align-items:center;
    justify-content:center;
}

section.mid-section > .main > .left .fast-rising .book:last-child .number-circle{
    background:var(--grey);
}

section.mid-section > .main > .left .fast-rising .book {
    gap:0.5em;
}

section.mid-section > .main > .left .fast-rising .book:hover{
    cursor:pointer;
}
section.mid-section > .main > .left .fast-rising .book .details > b.title{
    text-transform:capitalize;
}
section.mid-section > .main > .left .fast-rising .book:hover .details > b.title{
    transform:scale(1.05) translateX(5px) translateY(-1px);
    font-size:900;
    /* color:var(--primary); */
    /* text-shadow: 0 0 0.5px #3335; */
}

section.mid-section > .main > .left .fast-rising .book:hover img{
/* section.mid-section > .main > .left .fast-rising .book:hover .book-cover{ */
    outline: 1px solid var(--primary);
    box-shadow: var(--shadow-primary);
    transform:scale(1.02);
}

/* section.mid-section > .main > .left .fast-rising .book .book-cover{ */
section.mid-section > .main > .left .fast-rising .book img{
    height: 7.5em;
    height: 8.5em;
    aspect-ratio:3.6/5;
    border-radius:0.2em;

    /* background-image: url('../img/book_covers/default.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
}



section.mid-section > .main > .left .fast-rising .book .details{
    font-size:0.7em;
}

section.mid-section > .main > .left .fast-rising .book .details .genre{
    color: var(--primary);
}

section.mid-section > .main > .left .fast-rising .book .details .description{
    color: var(--grey);
}



/* Mid-section right */
section.mid-section > .main > .right{
    flex:2.5;
    width:70%;
}

section.mid-section > .main > .right .genres{
    overflow-x:auto;
    scrollbar-width:none;
}

section.mid-section > .main > .right .genres .genre{
    color:var(--grey);
    font-size:0.85em;
}

section.mid-section > .main > .right .genres .genre.active{
    font-weight: 800;
    color:#000;
    display: flex;
    flex-direction: column;
    align-items: center;
}
section.mid-section > .main > .right .genres .genre.active::after{
    content:'';
    height:4px;
    width:25px;
    border-radius:1em;
    background-image:linear-gradient(to right, var(--primary), var(--primary-dark));
    display:inline-block;
}
section.mid-section > .main > .right > .head{
    padding-right: 1em;
}

section.mid-section > .main > .right > .books{
    display:grid;
    grid-template-columns: auto auto;
    gap:3em 1em;
    margin-top:3.5em;
}

section.mid-section > .main > .right > .books .book{
    background: #fff;
    box-shadow: 0 0 1px 1px #00000004, 0 2px 1px 10px #00000001;
    border-radius:1em;
    padding:1em;
    font-size:0.9em;
    position:relative;
}

section.mid-section > .main > .right > .books .book .title{
    text-transform:capitalize;
}

section.mid-section > .main > .right > .books .book img{
    height: 10.5em;
    aspect-ratio:3.5/5;
    top:-2.5em;
    position:relative;
    border-radius:0.2em;
}

/* section.mid-section > .main > .right > .books .book .book-cover {
    height: 10.5em;
    aspect-ratio:3.5/5;
    top:-2.5em;
    position:relative;
    border-radius:0.2em;

    background-image: url('../img/book_covers/default.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
} */

/* section.mid-section > .main > .right > .books .book .book-cover  */
/* .book-cover-img {
    width: 100%;
    height: 100%;
    border-radius:0.2em;
} */

section.mid-section > .main > .right > .books .book:hover{
    outline: 1px solid var(--primary-light);
    cursor:pointer;
}

section.mid-section > .main > .right > .books .book:hover img{
/* section.mid-section > .main > .right > .books .book:hover .book-cover{ */
    /* box-shadow: 0 0 1px 1px var(--primary), 0 2px 1px 10px var(--primary-light); */
    outline: 1px solid var(--primary);
    box-shadow: var(--shadow-primary);
    transform:scale(1.03);
}

section.mid-section > .main > .right > .books .book .ratings{
    color:var(--primary);
    font-size:0.8em;
}

section.mid-section > .main > .right > .books .book .description{
    color:var(--grey);
    font-size:0.8em;
    font-weight:400;
}

section.mid-section > .main > .right > .books .book .community-indication{
    /* margin-top:-0.5em; */
    font-size:0.9em;
}

section.mid-section > .main > .right > .books .book .community-indication .icon-circles .icon-circle:last-child{
    margin-left:-25%;
    position:relative;
    background:#fff;
    z-index:2;
}

section.mid-section > .main > .right > .books .book .community-indication .friends{
    margin-left:-3%;
}



/* Random Section */
section.random-section{
    padding:1.5em 3em 3em;
    overflow:hidden;
}

section.random-section .mini-head{
    color:var(--grey);
    margin-top:-0.8em;
}

section.random-section .books{
    padding:2em 2em;
    padding-inline:0.5em 2em;
}

section.random-section .book{
    width: 12em;
    min-width:12em;
    font-size:0.9em;
    justify-content: space-between;
}

section.random-section .book > .top{
    gap:0.15em;
}

section.random-section .book .name{
    line-height:16px;
    font-weight:800;
    margin-top:0.5em;
}

section.random-section .book .status{
    font-size:0.8em;
    color:var(--grey);
}

section.random-section .book .tags{
    display:flex;
    gap:0.3em;
    align-items:center;
    font-size:0.7em;
    flex-wrap:wrap;
}

section.random-section .book .tags .tag{
    color: var(--primary);
    display:flex;
    gap:0.3em;
    align-items:center;
    font-weight:700;
    text-transform:capitalize;
}

section.random-section .book img{
/* section.random-section .book .book-cover{ */
    /* height: 12em; */
    width:100%;
    aspect-ratio:3.5/5;
    border-radius:0.4em;
    /* border-left: 1.5px solid #5555; */

    /* background-image: url('../img/book_covers/default.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
}

/* section.random-section .book img::after{
    content: "1";
} */

section.random-section .book:hover{
    /* outline: 1px solid var(--primary-light); */
    cursor:pointer;
}

section.random-section .book:hover img{
/* section.random-section .book:hover .book-cover{ */
    /* box-shadow: 0 0 1px 1px var(--primary), 0 2px 1px 10px var(--primary-light); */
    outline: 1px solid var(--primary);
    box-shadow: var(--shadow-primary);
    transform:scale(1.1) translateY(-7px);
}

section.random-section .book .tags .tag:not(:last-child)::after{
    height:4px;
    aspect-ratio:1;
    border-radius:1em;
    background: var(--border-color);
    content:"";
    display:inline-block;
}

section.random-section .book .ratings{
    color:var(--grey);
    font-size:0.8em;
}



/* Subscribe */
section.subscribe{
    background-color: var(--primary);
    background-image: url("../img/props/books.png");
    padding:3em 0;
    background-size:100% 100%;
}

section.subscribe > form{
    width:60%;
    color:#fff;
    text-align:center;
}

section.subscribe > form .writeup{
    font-size:0.8em;
    width:60%;
    text-align:center;
    margin:-1em 0 0.5em;
}

section.subscribe > form input,
section.subscribe > form button{
    width:60%;
    border:1px solid #000;
    padding:0.8em 1em;
    border-radius:5em;
    color: #000;
}

section.subscribe > form button{
    width:60%;
    background:#000;
    color: #fff;
}

@media (max-width: 1080px){
    section.hero{
        height: 40vh;
        background-size:cover;
    }

    section.continue-reading .head{
        margin-top:1.5em;
        font-size:0.9em;
    }

    section.continue-reading .shuffle .book-card{
        min-width:25em;
    }

    section.trending-tags{
        padding-inline:1.5em;
    }

    /* Mid-section */
    section.mid-section{
        padding-inline:2em;
        margin-top:0em;
        padding-top:0;
    }

    section.mid-section > .main{
        flex-direction:column;
    }

    section.mid-section > .main > .left{
        flex:1;
        width:100%;
    }

    section.mid-section > .main > .right{
        flex:1;
        width:100%;
    }


    /* Mid-section left*/
    section.mid-section > .main > .left .fast-rising .box-card{
        flex-direction: row;
        overflow:auto;
        border:0;
        width: calc(100% + 2em);
        background: #fff0;
        scrollbar-width:none;
    }  

    section.mid-section > .main > .left .fast-rising .box-card .book .description{
        min-width: 10em;
    } 
    
    section.mid-section > .main > .right .head .genres{
        white-space:nowrap;
        font-size:0.9em;
    }   
}

@media (max-width: 768px){   
    /* Mid-section right */
    section.mid-section > .main > .right .head h3{
        display:none;
    }     

    section.mid-section > .main > .right .books{
        grid-template-columns: auto;
        margin-top:3em;
    }    
    
    /* Random section */
    section.random-section{
        padding-inline:2em;
    }
    
    section.random-section .books{
        width:calc(100% + 2em);
        overflow:auto;
        /* padding-right:1em; */
        scrollbar-width:none;
    }     
    
    section.random-section .books .book{
        width:10em;
        min-width:10em;
        font-size:0.85em;
    }  

     /* Subscribe section */
    section.subscribe{
        padding-inline: 2em;
        background-size:cover;
        background-blend-mode:multiply;
    }

    section.subscribe > form{
        width:100%;
        text-shadow: 0 0 1px #0003;
    }

    section.subscribe > form .writeup{
        width:90%;
    }

    section.subscribe > form input,
    section.subscribe > form button{
        width:80%;
    }
}