@font-face {
    font-family: "Hand of Sean";
    src: url(Hand_Of_Sean_Demo.ttf);
  }

body {
    display: flex;
    background: no-repeat url(../img/used_desk4.jpg);
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow:hidden;
}

a {
  font-size: 2.2em;
  color:#ff8000;
  font-family: "Hand of Sean";
}

.backTxt {
  margin-left: -70em;
  z-index: 0;
  position: absolute;
  -webkit-text-stroke: black 3px;
}

.book {
    width: 45%;
    height: 60%;
    min-width: 1760px;
    min-height: 760px;
    position: relative;
    perspective: 1500px;
    /*right: -225px;*/
    right: 825px;
    border-radius:15px;
}

.bookLogo{
    margin: 3em;
    position: absolute;
    align-self: center;
    filter: drop-shadow(-2px -3px 20px #0f0f0f)blur(2px) sepia(80%);
}

.coverTCG{
  margin-left: 19em;
  width: 450px;
  margin-top: 19em;
  filter: drop-shadow(4px 5px #ff8205) grayscale(0.7);
  background-color: #1e1200;
  padding: 9px;
}

.card {
    width: 6em;
    height: 8.4em;
    background-color: #ff8000;
    margin-top: 5px;
    min-width: 10em;
    min-height: 14em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    border-radius: 15px;
    min-width: 10em;
    min-height: 14em;
    background: url('/img/Cardback.png');
    background-repeat: no-repeat;
    background-size: 160px 226px;
    filter: grayscale(1);
}       

.notesBack {
    margin-left: 22em;
    position: absolute;
    margin: auto;
    width: 60%;
}

.page {
    width: 50%;
    height: 100%;
    min-height:568px;
    min-width:432px;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s ease;
    cursor: pointer;
    border-radius:5px;
    right: -825px;
    background-image: url('../img/pergament.jpg');
}
.page .front,
.page .back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    background-image: url('../img/pergament.jpg');
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 0.5fr repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px; 
    border-radius:5px;
}

.front_div1 { grid-area: 1 / 2 / 2 / 4; font-family: Arial; font-weight: bold;}
.front_div2 { grid-area: 2 / 1 / 3 / 2; }
.front_div3 { grid-area: 2 / 2 / 3 / 3; }
.front_div4 { grid-area: 2 / 3 / 3 / 4; }
.front_div5 { grid-area: 2 / 4 / 3 / 5; }
.front_div6 { grid-area: 3 / 1 / 4 / 2; }
.front_div7 { grid-area: 3 / 2 / 4 / 3; }
.front_div8 { grid-area: 3 / 3 / 4 / 4; }
.front_div9 { grid-area: 3 / 4 / 4 / 5; }
.front_div10 { grid-area: 4 / 1 / 5 / 2; }
.front_div11 { grid-area: 4 / 2 / 5 / 3; }
.front_div12 { grid-area: 4 / 3 / 5 / 4; }
.front_div13 { grid-area: 4 / 4 / 5 / 5; } 

.page .back {
    transform: rotateY(180deg);
}
.page.flipped {
    transform: rotateY(-180deg);
}
.page:nth-child(1) { transform-origin: left center; z-index: 9; }
.page:nth-child(2) { transform-origin: left center; z-index: 8; }
.page:nth-child(3) { transform-origin: left center; z-index: 7; }
.page:nth-child(4) { transform-origin: left center; z-index: 6; }
.page:nth-child(5) { transform-origin: left center; z-index: 5; }
.page:nth-child(6) { transform-origin: left center; z-index: 4; }
.page:nth-child(7) { transform-origin: left center; z-index: 3; }
.page:nth-child(8) { transform-origin: left center; z-index: 2; }
.page:nth-child(9) { transform-origin: left center; z-index: 1; }


/* Cover */
.cover-front .front { 
    background-color: rgb(66, 33, 9);
    background-image: url(../img/leather.png);
    border: 2px solid gold;
    clip-path: polygon(
      0 0,
      20% 0,
      20% 2px,
      80% 2px,
      80% 0,
      100% 0,
      100% 20%,
      calc(100% - 2px) 20%,
      calc(100% - 2px) 80%,
      100% 80%,
      100% 100%,
      80% 100%,
      80% calc(100% - 2px),
      20% calc(100% - 2px),
      20% 100%,
      0 100%,
      0 80%,
      2px 80%,
      2px 20%,
      0 20%
    );
}
.cover-front .back { 
    background-color: rgb(66, 33, 9);
    background-image: url(../img/leather.png); 
    border: 2px solid gold;
    clip-path: polygon(
      0 0,
      20% 0,
      20% 2px,
      80% 2px,
      80% 0,
      100% 0,
      100% 20%,
      calc(100% - 2px) 20%,
      calc(100% - 2px) 80%,
      100% 80%,
      100% 100%,
      80% 100%,
      80% calc(100% - 2px),
      20% calc(100% - 2px),
      20% 100%,
      0 100%,
      0 80%,
      2px 80%,
      2px 20%,
      0 20%
    );
}

/* Innenseiten */
.page:nth-child(2) .front { filter:hue-rotate(65deg);height: 755px; width: 878px; margin-top:1px}
.page:nth-child(2) .back { filter:hue-rotate(65deg); height: 755px; width: 878px;margin-top:1px}
.page:nth-child(3) .front { filter:hue-rotate(19deg); height: 755px; width: 878px;margin-top:1px}
.page:nth-child(3) .back { filter:hue-rotate(19deg); height: 755px; width: 878px;margin-top:1px}
.page:nth-child(4) .front { filter: hue-rotate(327deg); height: 755px; width: 878px;margin-top:1px}
.page:nth-child(4) .back { filter: hue-rotate(327deg); height: 755px; width: 878px;margin-top:1px}
.page:nth-child(5) .front { filter: hue-rotate(195deg); height: 755px; width: 878px;margin-top:1px}
.page:nth-child(5) .back { filter: hue-rotate(195deg); height: 755px; width: 878px;margin-top:1px}
.page:nth-child(6) .front { filter: hue-rotate(220deg); height: 755px; width: 878px;margin-top:1px}
.page:nth-child(6) .back { filter: hue-rotate(220deg); height: 755px; width: 878px;margin-top:1px}
.page:nth-child(7) .front { filter: hue-rotate(0deg); height: 755px; width: 878px;margin-top:1px}
.page:nth-child(7) .back { filter: hue-rotate(0deg); height: 755px; width: 878px;margin-top:1px}



/* Backcover */
.page:nth-child(8) .front  { 
    background-color: rgb(66, 33, 9);
    background-image: url(../img/leather.png); 
    border: 2px solid gold;
    clip-path: polygon(
      0 0,
      20% 0,
      20% 2px,
      80% 2px,
      80% 0,
      100% 0,
      100% 20%,
      calc(100% - 2px) 20%,
      calc(100% - 2px) 80%,
      100% 80%,
      100% 100%,
      80% 100%,
      80% calc(100% - 2px),
      20% calc(100% - 2px),
      20% 100%,
      0 100%,
      0 80%,
      2px 80%,
      2px 20%,
      0 20%
    );
}
.page:nth-child(8) .back  { 
    background-color: rgb(66, 33, 9);
    background-image: url(../img/leather.png); 
    border: 2px solid gold;
    clip-path: polygon(
      0 0,
      20% 0,
      20% 2px,
      80% 2px,
      80% 0,
      100% 0,
      100% 20%,
      calc(100% - 2px) 20%,
      calc(100% - 2px) 80%,
      100% 80%,
      100% 100%,
      80% 100%,
      80% calc(100% - 2px),
      20% calc(100% - 2px),
      20% 100%,
      0 100%,
      0 80%,
      2px 80%,
      2px 20%,
      0 20%
    );
} 


/*Sticker im Cover*/
.sticker1{
  width: 120px;
  transform: rotate(45deg);
  margin-left: 1.2em;
  margin-top: 1.8em;
}

.sticker3{
  max-height: 230px;
  margin-top: 0em;
}

.progress-container {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    margin: 20px 0;
    background-color: rgb(66, 33, 9);
    background-image: url(../img/leather.png);
  }
  
  .progress-bar {
    height: 20px;
    background-color: #4CAF50;
    text-align: left;
    line-height: 20px;
    color: white;
    transition: width 0.5s ease-in-out;
  }
  
  .progress-bar-fire {
    height: 20px;
    background-color: #af4c4c;
    text-align: left;
    line-height: 20px;
    color: white;
    transition: width 0.5s ease-in-out;
  }

  .tooltip {
    position: relative;
    display: inline-block;
    min-height: 100px;
    min-width: 200px; 
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 15px;
    padding: 5px 0;
    top: -5px;
    left: 0%;
    position: absolute;
    z-index: 1;
    font-size: .8em;
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
  }