html {
    /* overflow: hidden; */
    scroll-behavior: smooth;
    min-height:100%;
    margin: 0;
    padding: 0;    
}

body {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    background-image: url("../images/old-paper-texture.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    font-family: "Work Sans", sans-serif;
    font-weight: 800;
    color: #000;
    margin:0;
    padding:0;
    
    }
    .page-container{
        display:block;
        min-width:100%;
        height:auto;
    }
    .content{
        min-height: 100%;
    }
    .blog-name{
        font-family: "Spectral", serif;
        font-size: clamp(1rem,1.5rem,2rem);
        width:auto;
        height: auto;
        /* font-weight: 200;
        font-style: normal; */

    }

    .title-block{
        background-image: url("../images/old-paper-texture.jpeg");
    }

    select{
        background-color: transparent;
    }

    .genre-block{
        max-height: auto;
        max-width: 26%;
        
    }

    .genre-block img{
        /* max-width:26%; */
        height: auto;
        border:1px solid #000;
        box-shadow: 6px 6px 10px 3px #000 ;
    }

    .card-container a{
        text-decoration: none;
        color:#000;

    }

    .card{
        background-image: url("../images/old-paper-texture.jpeg");
        box-shadow: 6px 6px 10px 3px #000 ;
        
    }
    .card-title{
        font-family: "Spectral", serif;
        font-weight: 200;
        font-style: normal;
    }

    .card-body{
        max-width:70%;
        max-height:auto;
        /* background-image: url("../images/aged-paper.jpeg");
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;
        background-clip: inherit; */
    }

    .card img{
        max-width:50%;
        height: auto;
        filter: drop-shadow(10px 7px 10px #000);
        padding: 1rem 0 0 0;
    }


    .author img{
        max-width:125px;
        height: auto;
        border-radius: 50%;
        flex-wrap: wrap;
    }

    .type-logo{
        max-width:100px;
        height:auto;
    }

    .cw-read-container{
        max-width:95vw;
        max-height:auto;
        overflow-x: hidden;
    }
    .side-well{
        max-height: auto;
        background-color:#EEEEEE ;
        max-width: 100%;
    }

    .side-well a{
        display: block;
    }

    .content-container{
        max-width:90vw;
        max-height: auto;
        background-color: bisque;
        /* overflow-y: scroll; */
        /* background-image: url("../images/old-paper-texture.jpeg"); */
        overflow-wrap:break-word;
        hyphens: auto;
        overflow-y: scroll;
        overflow-x: hidden;
        /* box-sizing: content-box; */
        scrollbar-width: none;
    }
.info>div{
    max-width: 100%;
    overflow-wrap: break-word;
    text-align:center;
}
.info{
    position: relative;
    cursor: pointer;
}

    .share-btn{
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
    }
    .share-pop{
        display: flex;
        width:7rem;
        height: auto;

        flex-direction: column;
        position: absolute;
        top:-1rem;
        left:50%;
        opacity: 0;
        background-color: #EEEEEE;
        border-radius: 15px;
        margin: 1rem 1rem 1rem 1rem;
        transition:opacity 1000ms ease-in-out;
    }

    .share-visible{
        opacity: 1;
    }

    #genres ul{list-style: none;}
    /* #genres ul>li{
        display: inline-block;

    } */
    #tags ul{list-style: none;}
    /* #tags ul>li{
        display: inline-block;
        
    } */

    @media(min-width:768px){
        .side-well{
            /* max-height: 50vh; */
            background-color:#EEEEEE ;
            box-shadow: 6px 6px 10px 3px #000 ;
        }
        form{
            background-color: transparent;
        }
        form label{
            background-color: transparent;
        }

        /* .genre-block{
            position: sticky;
        } */

        .card{
            background-image: url("../images/old-paper-texture.jpeg");
            box-shadow: none;
            transition: box-shadow ease-in 350ms;

            
        }

        .card:hover{
            box-shadow: 6px 6px 10px 3px #000 ;
        }
        .share-pop:hover{
            opacity: 1;
        }
        #share:hover~#share-popper{
            opacity: 1;

        }
    }