@font-face {
  font-display: swap;
  font-family: "Gabriela";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/gabriela-v23-latin-regular.woff2") format("woff2");
}

body {
    overflow-x: hidden; /* to fix the horizontal scroll bar issue caused by library images row position. */
}

.hamburger {
    height: 4.0625rem;
    width: 4.0625rem;
    background: #9c0000;
    position: fixed;
    top: 1.875rem; /* top and right properties moves the hamburger to the right of the page. */
    right: 1.875rem;
    z-index: 200; /* set to a higher/high value (200) inorder to bring it in front of the book crest at the top of the page. */
    border-radius: 50%; /* to make it round (circle). */
    outline: none !important; /* !important is added inorder to enforce the styling (override bootstrap rule). */
    transition: all 0.5s; /* for smooth changing of background color. */
}

.line1, .line2, .line3 {
    height: 0.125rem;
    width: 1.875rem;
    background: #000000;
    margin: 0.3125rem;
    transition: all .5s;
}

.bgCover {
    background: rgba(0, 0, 0, .95);
    height: 3.4375rem;
    width: 3.4375rem;
    position: fixed;
    top: 2.1875rem; /* top and right set, inorder to place it behind the hamburger. */
    right: 2.1875rem;
    z-index: 100;
    border-radius: 50%;
    transition: all 0.5s; /* to make page covering effect smooth. */
}

.changee .line1 {
    transform: rotate(-405deg) translate(-0.3125rem, 0.3125rem); /* -405deg (45 + 360) for line to circle before making the -45deg. Translate to position it well. */
    background: #000000; /* background color to change on click. */
}

.changee .line2 {
    opacity: 0; /* to hide line. */
}

.changee .line3 {
    transform: rotate(405deg) translate(-0.3125rem, -0.3125rem); /* 405deg for line to circle opposite direction. */
    background: #000000; /* background color to change on click. */
}

.changee .hamburger { /* to change background color of hamburger on click. */
    background: #ffffff;
}

.changee .bgCover {
    transform: scale(150); /* to increase size of background cover. */
}

.navContent {
    position: fixed;
    z-index: 150; /* this z-index value needs to be greater than bgCover's z-index (100) and less than hamburger's z-index (200). */
    width: 100%;
}

.linkItem {
    font-size: 1.25rem;
    font-weight: bold;
    color: #9c0000;
    border-bottom: 0.0625rem groove #ffffff;
}

.linkItem:hover {
    color: #ffffff;
    border-bottom: 0.0625rem groove #9c0000;
    border-radius: 50% 50% 0 0;
    background: rgba(177, 174, 174, 0.1);
    transition: all .5s;
}
/*! navigation end */

header {
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .8)), url("../imgz/header-bg.jpeg") fixed no-repeat center /cover;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); /* for cutting images. */
}

.bannerHeading::first-letter { font-family: gabriola, 'Times New Roman', times, serif; font-size: 7rem; }
.bannerHeading img { animation: beating 2s infinite; }

@keyframes beating { /* animation for heart (love) image. */
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.1);
    }
    60% {
        transform: scale(1.05);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
/*! header end */

.commonTitle {
    display: inline-block; /* for heading to take up only space required, so effect will be exactly on the text. */
    font-size: 2.7rem;
    font-weight: 500;
    text-shadow: 0.125rem 0.125rem 0.3125rem #aaaaaa;
    transition: .7s; /* for a better "transform" effect, smooth up and left movement. */
}

.commonTitle::first-letter {
    font-family: gabriola;
    font-size: 5rem;
    margin-top: 0.625rem;
    margin-right: 0.6rem;
}

.commonTitle:hover {
    transform: translate(-0.3125rem, -0.1875rem); /* to move heading up and left. */
    text-shadow: 0.125rem 0.3125rem 0.5rem #9c0000;
}
/*! commonTitle, for all Headings end */

.galleryImg {
    backface-visibility: hidden; /* to make shape of image look good after size increase. */
    transition: all .7s; /* for smooth increament of image size. */
}

.galleryImg:hover {
    transform: scale(1.1); /* to increase image size. */
}

.firstRow, .secondRow { opacity: 0; transition: all 2.5s; }

.change .firstRow, .change .secondRow { /* ".change" class is added/removed in javascript file. */
    opacity: 1; /* to make library images visible again. */
}
/*! gallery end */

.famousWriters {
    background: linear-gradient(rgba(250, 250, 250, .6), rgba(250, 250, 250, .7)), url("../imgz/writers-bg.jpeg") fixed no-repeat center /cover;
}
/*! famous writers end */

.suggestedBooks { height: 100vh; background: url("../imgz/wood-bg.jpeg") no-repeat center /cover; }

.books { position: relative; }

.book {
    width: 35%;
    position: absolute;
    box-shadow: 0.3125rem 0.3125rem 0.9375rem #444444;
    border-right: 0.3125rem solid #777777;
    border-bottom: 0.625rem solid #444444;
    transition: all .7s ease-in-out;
}
.book:hover {
    transform: scale(1.5) rotateX(20deg);
    z-index: 50; /* to make each book completely visible, on hover. */
    box-shadow: 0.3125rem 0.3125rem 1.5625rem #444444;
    border-right: 0.625rem solid #dddddd;
    border-bottom: 1.25rem solid #bbbbbb;
}

.book1 { top: 5%; left: 20%; transform: rotate(-45deg); }
.book2 { top: 20%; left: 50%; transform: rotate(40deg); }
.book3 { top: 40%; left: 40%; transform: rotate(55deg); }
.book4 { top: 35%; left: 10%; transform: rotate(-38deg); }
/*! suggested books end */

.popularBooks { position: relative; }

.videoContainer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: .8;
}

.bgVideo {
    height: 100%;
    width: 100%;
    object-fit: cover; /* specifies how video should be resized to fit the container. */
}

.bookCard {
    position: relative;
    box-shadow: 0.3125rem 0.9375rem 3.125em  #9c0000;
    max-width: 26.25rem;
    overflow: hidden; /* to make back contents invinsible while coming from the top to cover front side. */
    transition: all 1s;
}

.rotate {
    perspective: 100rem; /* to create kinda 3D effect while flipping back and front side of card. */
}

.back {
    position: absolute;
    top: -100%; /* to make back contents be on top of front contents. */
    background:  #9c0000;
    height: 100%; /* set to 100% so it will cover the front side. */
    width: 100%; /* set so to cover front side too. */
    opacity: 0; /* to hide the back contents. */
    user-select: none; /* to disable user from selecting (clicking) while contents are hidden. */
    pointer-events: none; /* to disable pointer while contents are hidden. */
    transform: rotateY(180deg); /* for back contents to be displayed correctly. */
    transition: top 1s, opacity .2s; /* for smooth movement of back side covering front side. */
}

.rotate:hover .bookCard {
    transform: rotateY(180deg); /* whole card (front and back) rotate. */
}

.rotate:hover .back {
    opacity: 1; /* to make back contents visible (show) on hover. */
    top: 0; /* for contents to be placed in front of the book image (i.e back side to cover front side.). */    
    user-select: auto; /* to enable user selecting (clicking) when contents are visible. */
    pointer-events: auto; /* to enable pointer when contents are visible. */
}

.backContent {
    position: absolute;
    top: 50%; /* centers contents vertically, when position is absolute, using transform below. */
    left: 50%; /* centers contents horizontally, when position is absolute, using transform below. */
    transform: translate(-50%, -50%);
}
/*! popular books end */

.contact { background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .8)), url("../imgz/header-bg.jpeg") fixed no-repeat center /cover; }

.itemsWrapper {
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .6)), url("../imgz/items-wrapper-bg.jpg") fixed no-repeat center /cover;
    border-radius: 0.3125rem;
}

.floatingItem { background: rgba(0, 0, 0, .65); border-radius: 0.3125rem; }

.item1 { animation: float 15s infinite; }
.item2 { animation: float 20s ease-in infinite; }
.item3 { animation: float 40s linear infinite; }
.item4 { animation: float 30s infinite; }
.item5 { animation: float 20s ease-in-out infinite; }

@keyframes float { /* to float items 1 to 5. */
     0% {
         transform: translateX(0);
     }
     
     50% {
         transform: translateX(-3.75rem);
     }
     
     100% {
         transform: translateX(0);
     }
}

.contactForm input[type="text"], .contactForm input[type="email"], .contactForm textarea {
    background: transparent;
    font-size: 1.125rem;
    color: #9c0000;
    border-radius: 0.3125rem;
    box-shadow: none;
}

.contactForm input:focus, .contactForm textarea:focus { background: rgba(250, 250, 250, .7); box-shadow: none; }
/*! contact end */

footer .developer, #developer { font: bold 1.2rem "Gabriela"; color: #ffffff; text-shadow: 1px 1px 2px #ffd700, 0 0 25px #000000, 0 0 5px #000000; }
footer #developer { letter-spacing: 0.4rem; }