/*!
 * Flipbook Library - http://joerezendes.com/flipbook-library
 * Version - 1.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Github - https://github.com/joerez/flipbook-library
 *
 * Copyright (c) 2018 Joe Rezendes
 */



/*This is your book world. Change the height, width, and position as needed.
Please keep perspective at 2000px*/
.bookContainer {
  position: absolute;
  height: 100%;
  width: 100%;
  perspective: 2000px;
}

/*Here is the book. You can play with the size of it, but you'll need to adjust your other values when you do.
By default the book is displayed in the center of your bookContainer*/
.book {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 400px;
  width: 300px;
  perspective: 1400px;
  border: solid 1px rgb(206, 248, 18);
  transition: all 1s;
  transform-style: preserve-3d;
  /*Here is your default book state, change as you wish*/
  

  /*uncomment this to spin your book around on page load.*/
  /*animation: rotate 10s infinite linear;*/
}




/*here is the top of your book. Feel free to change the #9198e5 value to
whatever you want.*/
.bookTop {
  height: 110px;
  width: 300px;
  border: solid 1px rgba(0, 0, 0, 0.514);
  border-top: solid 1px rgba(0, 0, 0, 0.582);
  position: absolute;
  right: 0;
  left: 0px;
  top: -400px;
  bottom: 0;
  margin: auto;
  background: repeating-linear-gradient(#000, #000 1px, #9198e5 1px, #9198e5 4px);
  transform: rotateX(90deg) rotateY(0deg) translateY(-54px);
  color: white;
  border-right: none;
    }


/*This is the side of your book that has your cover. Feel free to change the background color*/
.bookSide {
    content: "";
    height: 397px;
    width: 100px;
    position: absolute;
    right: 0;
    left: -300px;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #202bd8; /* ye book ke side color ke liye tha */
    transform: rotateY(-90deg) translateY(0px) translateX(-54px);
    border: solid 3px black;
    color: white;
    text-align: center;
    font-size: 90%;
    transform-style: preserve-3d;
}

/*This is the side that looks like pages. Feel free to change the #9198e5 value*/
.bookSide2 {
  content: "";
  height: 400px;
  width: 107px;
  position: absolute;
  right: 0;
  left: 243px;
  top: 0;
  bottom: 0;
  margin: auto;
  background: repeating-linear-gradient(90deg, #000, #000 1px, #9198e5 1px, #9198e5 4px);
  transform: rotateY(90deg) translateX(54px);
  border: solid 3px black;
  color: white;
  text-align: center;
  font-size: 90%;
  transform-style: preserve-3d;
  border-top: none;
  border-bottom: none;
}

/*Here is what every page looks like. Set a new background color if you like*/
.page {
  width: 100%;
  border: solid 1px black;
  height: 400px;
  background: rgba(54, 42, 165, 0.836);
  position: absolute;
  top: 0;
  color: white;
}

/*Here is your cover. Feel free to change the flexbox values*/
.cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  font-size: 140%;
  position: absolute;
  transition: all 1s ease-in-out;
  transform-origin: left;
  transform: rotateY(0deg);
  left: 0px;
  z-index: 25;
  border: solid 0px black;
  border: solid 1px black;
}

/*Every page will look like this. Feel free to change flexbox values. By default everything is in the middle*/
.pagecontent {
  display: flex;
  position: absolute;
  transition: all 1s ease-in-out;
  transform-origin: left;
  transform: rotateY(0deg);
  left: 0px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}



/* --- Arrow buttons --- */
.nav-arrows {
    position: fixed;
    bottom: 18px;
    left: 0;
    right: 0;
    width: 100%;
    pointer-events: none; /* Sirf buttons clickable rahenge */
}

    .nav-arrows .prev,
    .nav-arrows .next {
        pointer-events: auto;
        position: absolute;
        bottom: 0;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.15);
        border-radius: 999px;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
        cursor: pointer;
        transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    }

    .nav-arrows .prev {
        left: 24px;
    }

    .nav-arrows .next {
        right: 24px;
    }

        .nav-arrows .prev:hover,
        .nav-arrows .next:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 26px rgba(0,0,0,0.16);
            background: #f7f7f7;
        }


/* --- Page corner curl visual hint (optional) --- */
.pagecontent::after,
.cover::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 22px;
    height: 22px;
    background: radial-gradient(12px 12px at 100% 100%, rgba(0,0,0,0.15), transparent 40%), linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.85) 50%);
    transform: rotate(0deg);
    opacity: 0.6;
    pointer-events: none;
}