body{background-image:url(../images/Stars-In-Space.jpg);background-repeat: no-repeat;background-attachment:fixed;font-family:'Roboto';font-size:15px;color:#fff;width:100%;margin:0;padding:0;text-align:center;}
.prev{position:fixed;top:50%;cursor:pointer;transform:translate(calc(88vh*-.44),-50%);filter: drop-shadow(0 0 3px #000);-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;}
.next{position:fixed;top:50%;cursor:pointer;transform:translate(calc(88vh*.44),-50%);filter: drop-shadow(0 0 3px #000);-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;}
.half{opacity:.3;cursor:default;}

#book{position:fixed;height:100vh;width:100vw;top:0;left:0;margin:0;align-items:center;justify-content:center;display:flex;z-index:10000;}
.book{position:fixed;perspective:180vw;margin-right:calc(88vh*.36);top:50%;transform:translateY(-50%);}
.book.turn{animation: book 2s ease-in-out forwards;}
.book.last{animation: last 2s ease-in-out forwards;}
.book.lastback{animation: lastback 2s ease-in-out forwards;}
.book.turnback{animation: turnback 2s ease-in-out forwards;}
.book.odd{animation: odd 2s ease-in-out forwards;}
.book.even{animation: even 2s ease-in-out forwards;}

@keyframes book{0%{margin-right:calc(88vh*.36);}5%{margin-right:calc(88vh*.36);}75%{margin-right:0;}100%{margin-right:0;}}
@keyframes last{0%{margin-right:0;}5%{margin-right:0;}75%{margin-right:calc(-1*(88vh*.36));}100%{margin-right:calc(-1*(88vh*.36));}}
@keyframes lastback{0%{margin-right:calc(-1*(88vh*.36));}5%{margin-right:calc(-1*(88vh*.36));}75%{margin-right:0;}100%{margin-right:0;}}
@keyframes turnback{0%{margin-right:0;}5%{margin-right:0;}75%{margin-right:calc(88vh*.36);}100%{margin-right:calc(88vh*.36);}}


.book .pages{height:88vh;width:calc(88vh*.72);transform-style:preserve-3d;backface-visibility:hidden;}

.book .page{position:absolute;width:50%;height:100%;transform-origin: left 0;transform-style:preserve-3d;user-select:none;}

.front,.back{position:absolute;backface-visibility:hidden;}
.back{transform:rotateY(180deg);}

#page1,#page2,#page3,#page4,#page5,#page6,#page7,#page8{height:100%;width:100%;background-size:cover;}

#page1{box-shadow: inset 14px 0 18px -14px rgba(0,0,0,0.3);}
#page2{box-shadow: inset -14px 0 18px -14px rgba(0,0,0,0.3);}
#page3{box-shadow: inset 14px 0 18px -14px rgba(0,0,0,0.3);}#page3.turn{animation: t2 2s ease-in-out forwards;}#page3.turnback{animation: tb2 2s ease-in-out forwards;}
#page4{box-shadow: inset -14px 0 18px -14px rgba(0,0,0,0.3);}
#page5{box-shadow: inset 14px 0 18px -14px rgba(0,0,0,0.3);}#page5.turn{animation: t4 2s ease-in-out forwards;}#page5.turnback{animation: tb4 2s ease-in-out forwards;}
#page6{box-shadow: inset -14px 0 18px -14px rgba(0,0,0,0.3);}
#page7{box-shadow: inset 14px 0 18px -14px rgba(0,0,0,0.3);}#page7.turn{animation: t6 2s ease-in-out forwards;}#page7.turnback{animation: tb6 2s ease-in-out forwards;}
#page8{box-shadow: inset -14px 0 18px -14px rgba(0,0,0,0.3);}

#p1,#p2,#p3,#p4{right:0;}
#p1.turn{animation: p1 2s ease-in-out forwards;}#p1.turnback{animation: pb1 2s ease-in-out forwards;}
#p2.turn{animation: p2 2s ease-in-out forwards;}#p2.turnback{animation: pb2 2s ease-in-out forwards;}
#p3.turn{animation: p3 2s ease-in-out forwards;}#p3.turnback{animation: pb3 2s ease-in-out forwards;}
#p4.turn{animation: p4 2s ease-in-out forwards;}#p4.turnback{animation: pb4 2s ease-in-out forwards;}

@keyframes p1{
  0%{transform:rotateY(0deg);z-index:5;}
  21%{transform:rotateY(-20deg);}
  75%{transform:rotateY(-180deg);z-index:5;}
  76%{z-index:-5;}
  100%{transform:rotateY(-180deg);z-index:-5;}
}
@keyframes pb1{
  0%{transform:rotateY(-180deg);z-index:-5;}
  21%{transform:rotateY(-160deg);}
  74%{z-index:-5;}
  75%{transform:rotateY(0deg);z-index:5;}
  100%{transform:rotateY(0deg);z-index:5;}
}

@keyframes t2{
  22%{box-shadow: inset 220px 0 180px -180px rgba(0,0,0,0.3),2px 3px 3px rgba(0,0,0,0.1);}
  68%{box-shadow:inset 14px 0 18px -14px rgba(0,0,0,0.3),2px 3px 3px rgba(0,0,0,0.1);}
}
@keyframes tb2{
  23%{box-shadow:inset 14px 0 18px -14px rgba(0,0,0,0.3),2px 3px 3px rgba(0,0,0,0.1);}
  68%{box-shadow: inset 220px 0 180px -180px rgba(0,0,0,0.3),2px 3px 3px rgba(0,0,0,0.1);}
}

@keyframes p2{
  0%{transform:rotateY(0deg);z-index:4;}
  21%{transform:rotateY(-20deg);}
  75%{transform:rotateY(-180deg);z-index:4;}
  76%{z-index:-4;}
  100%{transform:rotateY(-180deg);z-index:-4;}
}
@keyframes pb2{
  0%{transform:rotateY(-180deg);z-index:-4;}
  21%{transform:rotateY(-160deg);}
  74%{z-index:-4;}
  75%{transform:rotateY(0deg);z-index:4;}
  100%{transform:rotateY(0deg);z-index:4;}
}

@keyframes t4{
  22%{box-shadow: inset 220px 0 180px -180px rgba(0,0,0,0.3),3px 4px 5px rgba(0,0,0,0.1);}
  68%{box-shadow:inset 14px 0 18px -14px rgba(0,0,0,0.3),3px 4px 5px rgba(0,0,0,0.1);}
}
@keyframes tb4{
  23%{box-shadow:inset 14px 0 18px -14px rgba(0,0,0,0.3),3px 4px 5px rgba(0,0,0,0.1);}
  68%{box-shadow: inset 220px 0 180px -180px rgba(0,0,0,0.3),3px 4px 5px rgba(0,0,0,0.1);}
}

@keyframes p3{
  0%{transform:rotateY(0deg);z-index:3;}
  21%{transform:rotateY(-20deg);}
  75%{transform:rotateY(-180deg);z-index:3;}
  76%{z-index:-3;}
  100%{transform:rotateY(-180deg);z-index:-3;}
}
@keyframes pb3{
  0%{transform:rotateY(-180deg);z-index:-3;}
  21%{transform:rotateY(-160deg);}
  74%{z-index:-3;}
  75%{transform:rotateY(0deg);z-index:3;}
  100%{transform:rotateY(0deg);z-index:3;}
}

@keyframes t6{
  22%{box-shadow: inset 220px 0 180px -180px rgba(0,0,0,0.3),1px 2px 2px rgba(0,0,0,0.2);}
  68%{box-shadow:inset 14px 0 18px -14px rgba(0,0,0,0.3),1px 2px 2px rgba(0,0,0,0.2);}
}
@keyframes tb6{
  23%{box-shadow:inset 14px 0 18px -14px rgba(0,0,0,0.3),1px 2px 2px rgba(0,0,0,0.2);}
  68%{box-shadow: inset 220px 0 180px -180px rgba(0,0,0,0.3),1px 2px 2px rgba(0,0,0,0.2);}
}

@keyframes p4{
  0%{transform:rotateY(0deg);z-index:2;}
  21%{transform:rotateY(-20deg);}
  75%{transform:rotateY(-180deg);z-index:2;}
  76%{z-index:-2;}
  100%{transform:rotateY(-180deg);z-index:-2;}
}
@keyframes pb4{
  0%{transform:rotateY(-180deg);z-index:-2;}
  21%{transform:rotateY(-160deg);}
  74%{z-index:-2;}
  75%{transform:rotateY(0deg);z-index:2;}
  100%{transform:rotateY(0deg);z-index:2;}
}

@media screen and (max-width:820px){
.prev{transform:translate(calc(88vh*-.41),-50%);height:60px;}
.next{transform:translate(calc(88vh*.41),-50%);height:60px;}
}
@media screen and (max-width:780px) and (max-height:780px){
.prev{transform:translate(calc(88vh*-.50),-50%);}
.next{transform:translate(calc(88vh*.50),-50%);}
}
@media screen and (max-width:740px){
.prev{transform:translate(calc(88vh*-.24),-50%);}
.next{transform:translate(calc(88vh*.24),-50%);}
@keyframes odd{0%{margin-right:calc(88vh*.36);}5%{margin-right:calc(88vh*.36);}75%{margin-right:calc(-1*(88vh*.36));}100%{margin-right:calc(-1*(88vh*.36));}}
@keyframes even{0%{margin-right:calc(-1*(88vh*.36));}5%{margin-right:calc(-1*(88vh*.36));}75%{margin-right:calc(88vh*.36);}100%{margin-right:calc(88vh*.36);}}
}