/*
  TOP
*/

/*--------------------------------------------------------------
EMBEDDED FONTS
--------------------------------------------------------------- */
@font-face{font-family: "LLPixel"; src: url(/public/LLPIXEL3.ttf); }
html, h1, h2, h3, h4 { font-family: "LLPixel", Arial, sans-serif; }


/* Body padding required by bootstrap top navbar (to avoid content overlay) */
body { padding-top: 20px; padding-left: 30px; padding-right: 20px; background-color: #000; color: #fff}
.navbar {height: 40px; }
.navbar-brand { padding-top: 12px; }
.social { margin-top: 0; }
.social > a { font-size: 2.5em; }
.page-header { padding-left: 20px; height: 46px; border-radius: 2em 0em 0em 2em; background-image: url(/public/rainbow_background.gif); 
}
/* Fix navigation links background on phone browser */
@media ( max-width: 768px ) { .navbar-blog-collapse { background-color: rgb(255, 255, 255); } }
/* Allows FontAwesome icons in simplemenu labels */
.simple-menu a:before { 
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}
/* Then add .liX > a:before { content: "\YYYY\20"; } with X the index of the menu entry
   and YYYY the hexadecimal unicode of the icon (http://fontawesome.io/icons/) and \20 add a space after the icon
   ex : .li1 > a:before { content: "\f02c\20"; } adds the fa-tags icon before the 1st entry label
   to add an icon after the label, use `after` instead of `before` */

/*
  ENTRIES
*/
.post-info a { color: rgb(255, 255, 255);}
.post-info a:hover, .post-info-co a:hover { text-decoration: none; }
.pagination-block {
  width: 100%;
  text-align: center;
}
/* responsive images */
.post-content img { max-width: 100%; height: auto; }

/*
  TAGS - CATEGORY
*/
.tag-list { line-height: 2.2em; }
.tag-list a:hover, .subcategories a:hover  { text-decoration: none; }
.tag-list .label { font-size: 1em; }
.tag-list .badge { color: rgb(92, 184, 92); background-color: rgb(255, 255, 255); }


/*DEBUT BOOK */

.book-container {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 700px;
}

@keyframes initAnimation {
  0% {
    transform: rotateY(-16deg);
  }
  100% {
    transform: rotateY(-36deg);
  }
}

.book {
  width: 225px;
  height: 325px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-36deg);
  transition: 1.5s ease;
  animation: 1s ease 0s 1 initAnimation;
}

.book:hover {
  transform: rotateY(-16deg);
}

.book > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  width: 225px;
  height: 325px;
  transform: translateZ(37.5px);
  background-color: #0a5781;
  border-radius: 0 1px 1px 0;
  box-shadow: 5px 5px 20px #666;
}

.book::before {
  position: absolute;
  content: ' ';
  background-color: blue;
  left: 0;
  top: 9px;
  width: 73px;
  height: 307px;
  transform: translateX(178.5px) rotateY(90deg);
  background: linear-gradient(90deg, 
    #fff 0%,
    #f9f9f9 5%,
    #fff 10%,
    #f9f9f9 15%,
    #fff 20%,
    #f9f9f9 25%,
    #fff 30%,
    #f9f9f9 35%,
    #fff 40%,
    #f9f9f9 45%,
    #fff 50%,
    #f9f9f9 55%,
    #fff 60%,
    #f9f9f9 65%,
    #fff 70%,
    #f9f9f9 75%,
    #fff 80%,
    #f9f9f9 85%,
    #fff 90%,
    #f9f9f9 95%,
    #fff 100%
    );
}

.book::after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  width: 225px;
  height: 325px;
  transform: translateZ(-37.5px);
  background-color: #0a5781;
  border-radius: 0 1px 1px 0;
  box-shadow: -10px 0 50px 10px #666;
}

/* FIN BOOK */