/* @import '/base-css/base-styles.css'; */
@import 'menu.css';

@font-face {
    font-family: 'ferrum';
    src: url('fonts/ferrum.otf') format('opentype');
}

:root {
    /* --normal_bg: #A8A77A;*/ 
    font-size: 16px;
}

body {
	/* position: relative; */
    /* height: 100%;
    width: 100%;
    margin: 0;*/
    position: relative;
    padding: 55px 0 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
}

h1 {
    font-size: 1.5rem;
    line-height: 1.7rem;
    /*color: #efefef;*/
    /* text-align: center; */
}
h2 {
    font-size: 1.2rem;
}

.buttonMe {
    border: 1px solid;
    border-radius: 20px;
    padding: 5px 10px;
    text-decoration: none;
    color: #202022;
    cursor: pointer;
    text-align: center;
}
.buttonMe:hover {
    /* border-color: #101010; */
    background: #b7b7b7;
    /* color: #101010; */
}

.smooth {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.flexMe {
    display: flex;
}

.flexMeSpaceAround {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.centerText { text-align: center; }

.popOut_btn {
    background: #3a3a3a;
    padding: 5px 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    line-height: 28px;
    cursor: pointer;
}
.popOut_btn:hover {
    background: #6f6f6f;
}

.popOut_overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.65);
    z-index: 11;
    display: none;
}
.popOut_overlay.active {
    display: block;
}
.popOut_content {
    background: #8c8c8c;
    border: 5px solid #4c4c4c;
    border-radius: 10px;
    position: relative;
    z-index: 13;
    width: 600px;
    min-height: 200px;
    margin: 10% auto;
    padding: 15px;
}
.popOut_header {
    width: 100%;
    background: #c7c7c7;
    padding: 5px 0;
    font-size: 1.2rem;;
    color: #4c4c4c;
    border-radius: 5px;
}

.mainBg {
    /* background: #fff url(../images/scroll_background.jpg) center no-repeat; */
    background: #fafafa;
    /* background-size: 100%; */
    /* background: #0fbb0f; */
    background-size: cover;
    /* background-repeat: no-repeat; */
}

.topHeader {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
    background:rgba(181, 183, 187, 0.74);
    /* background: linear-gradient( to top, #eee 0%, #eee 46%, #000 46%, #000 54%, #d00 54%, #d00 100% ); */
    border-bottom: 3px solid #000;
    display: flex;
    justify-content: space-between;
    padding: 0 2vw;
    max-width: 96vw;   
}

.logoBox a {
    display: inline-flex;
    color: #121212;
    /* font-weight: 800; */
    -webkit-text-stroke-width: 0.7px;
    -webkit-text-stroke-color: #121212;
    text-decoration: none;
    font-size: 2em;
    font-family: ferrum, serif;
    line-height: 1.6em;
    letter-spacing: 0.1rem;
    /* transition: ease-in-out 0.4s; */
}

.logoBox a:hover {
    color: #3b39bd;;
    -webkit-text-stroke-width: 0.8px;
    /* -webkit-text-stroke-color: #121212; */
    /* transform: scale(0.95); */
}

.logoBox #logo {
    max-height: 35px;
    margin: auto 10px auto 0;
}

#mainContent {
    flex: 1 0 auto;
    position: relative;
    padding: 0.5%;
    /* text-align: center; */
    /* color: #004eff; */
    /* width: 1000px; */
    /* max-width: 90%; */
    /* margin: 25px auto; */
    /* background: rgba(181, 183, 187, 0.74); */
    /*min-height: 400px;*/
    /* z-index: 1; */
    /* font-size: 1.2rem; */
}

.featuredBookBox,
.bookBox,
.otherBox {
    display: flex;
    max-width: 1500px;
    margin: 0 auto 50px;
    /* padding: 10px; */
}
#featuredBookBox .bookBox{
    max-height: 80vh;
    font-size: 1.5rem;
}

.otherBox {
    justify-content: space-around;
    flex-wrap: wrap;
}

#libraryBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 95vw;
    margin: 25px auto 0;
}

#libraryBox .bookBox {
    flex-direction: column;
    background: rgb(201 201 201 / 70%);
    border: 1px solid;
    border-radius: 5px;
    width: 45vw;
    max-width: 750px;
}

#libraryBox .bookBox > * {
    /* max-height: 300px; */
    width: auto;
    margin: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
}

.bookBox > * {
    width: 44vw;
    padding: 3vw;
    display: flex;
    align-items: center;    
    flex-direction: column;
    justify-content: space-around;
}

.bookBox img {
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
    box-shadow: 3px 5px 13px 3px #000;
}

.bookBox:not(.featuredBook) img {
    /* box-shadow: 3px 5px 13px 3px #000; */
    width: auto;
    /* max-width: 100%; */
    max-height: 400px;
}

.bookBox .titleDiv {
    font-size: 2rem;
    display: flex;
    flex-direction: column;
}

.bookBox .bookRelDate {
    /* margin: 0 10px; */
    font-size: 0.75rem;
    text-align: center;
}

/*#featuredBookBox  .bookBox .titleDiv {*/
/*    font-size: 2.5Rem;*/
/*}*/
/*#featuredBookBox .bookBox .bookRelDate {*/
/*    font-size: 1.75rem;*/
/*}*/

.bookBox .bookDesc {
    padding: 5%;
    margin: 0;
    text-align: justify;
}

.bookBox .linkDiv {
    display: flex;
    flex-direction: column;
}

.bookBox .linkDiv a {
    margin: 5px;
}

.featuredBookTitle {
    text-align: center;
    font-size: 2.2rem;
}

.featuredBookDesc {
    font-size: 1.2rem;
}

.italQuote {
    font-style: italic;
}

.linkDiv a {
    text-transform: uppercase;
}

.otherBox .mainAreas {
    background: rgb(128 128 128 / 75%);
    min-width: 170px;
    margin: 3vh 1vw;
    padding: 15px 20px;
    border-radius: 10px;
    border: 3px solid #3c3c3c;
    box-shadow: 3px 5px 13px 3px #4c4c4c;
    position: relative;
    overflow: hidden;
}

.otherBox .mainAreas:hover {
    transform: translate(2px, 2px);
    box-shadow: 1px 2px 5px 2px #4c4c4c;
    cursor: pointer;
}

.mainAreas .imageBox {
    /* width: 85%; */
    min-height: 250px;
    /* margin: 0 auto; */
}

.mainAreas .imageBox.onePlace {
    background: transparent url(../images/book_3.png) center no-repeat;
    /* background: #fff url(../images/book_shelf_1.jpg) center no-repeat; */
    background-size: contain;
}

.mainAreas .imageBox.twoPlace {
    background: transparent url(../images/book_9.png) center no-repeat;
    /* background: #fff url(../images/book_heart.jpg) center no-repeat; */
    background-size: contain;
}

.mainAreas .imageBox.threePlace {
    background: transparent url(../images/book_4.png) center no-repeat;
    /* background: #fff url(../images/book_man.jpg) center no-repeat; */
    background-size: contain;
}

.mainAreas .imageBox.anotherPlace {
    background: transparent url(../images/book_6.jpg) center no-repeat;
    /* background: #fff url(../images/library_2.jpg) center no-repeat; */
    background-size: contain;
}

.mainAreas .areaTitle {
    text-align: center;
    background: rgba(255,255,255,0.7);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 -15px;
    font-size: 1.8rem;
    line-height: 2.8rem;
}

/* ***** FOOTER ****** */
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 10px 2%;
    z-index: 98;
    background: rgba(181, 183, 187, 0.74);
    border-top: 3px solid #000;
}

.socMed,
#menu .socMed {
    display: flex;
    justify-content: space-between;
    width: 30vw;
    max-width: 300px;
    align-self: center;
    background: transparent;
}

#menu .socMed {
    width: 90%;
}

#menu .socMed a {
    margin: 0;
    width: auto;
}

#menu .socMed a:hover {
    box-shadow: none;
}

.socMed > * {
    margin-right: 20px;
}

.socMed svg {
    border-radius: 24%;
    width: 20px;
    /* height: 40px; */
}

.socMed svg path {
    fill: #808080;
}

.socMed svg path.ig_w {
    fill: #FFF;
}

.socMed svg:hover path {
    fill: #4c4c4c;
}

.socMed svg:hover path.gr {
    fill: #f8f7f2;
    stroke: #f8f7f2;
    /* color: #4d4022; */
}

.socMed svg:hover path.fb {
    fill: #1877f2;
}

.socMed svg:hover path.amz_1 {
    fill: #000;
}

.socMed svg:hover path.amz_2 {
    fill: #FF9900;
}

.socMed svg:hover path.ig_c {
    fill:url(#ig_c);
}

.socMed svg:hover path.ig_d {
    fill:url(#ig_d);
}

.socMed svg:hover path.ig_w {
    fill: #FFF;
}

.socMed svg:hover path.msp {
    fill: rgb(24.708557%, 31.759644%, 70.979309%);
}

.socMed svg:hover path.tw {
    fill: #3BA9EE;
}

.socMed svg:hover path.d20 {
    fill: #f53d3d;
}

a.madByLink {
    font-weight: 800;
    -webkit-text-stroke-width: 0.4px;
    -webkit-text-stroke-color: #000;
    text-decoration: none;
    color: #6a6a6a;
    transition: color 0.3s ease;
    align-self: center;
    font-size: 0.75rem;
}

a.madByLink:hover {
    color: #3232ff;
}

@media screen and ( max-width: 657px ) {
    :root { 
        font-size: 18px;
    }
    
    .topHeader a {
        font-size: 1.5em;
        line-height: 2em;
    }

    .bookBox {
        margin-top: 50px;
        flex-direction: column;
        align-items: center;
    }

    #libraryBox .bookBox {
        width: 95vw;
    }

    .bookBox > * {
        width: 90vw;
        padding: 3vw;
    }

    /* .bookBox img {
        width: 96vw;
        max-width: 100%;
    } */

    .otherBox .mainAreas {
        min-width: 250px;
    }

}