#interactive-book{
transform: rotate(-45deg);
}
        .left {
            float: left;
            box-shadow: 3px 3px 12px -4px #000,-23px 0px 20px -15px #ffffff99 inset, 3px 3px 12px -4px #000,100px 0px 70px -15px #7b574c48 inset;     
           }

        .right {
            float: right;
            box-shadow: 3px 3px 12px -4px #000,23px 0px 20px -15px #7b574c99 inset;
        }

 


        

.front {
--lining: #eeac56;

width: 200px;
height:350px;
border-radius: 0px 17px 7px 0px;
background: linear-gradient(180deg,rgba(166, 75, 41, 1) 18%, rgba(153, 96, 96, 1) 47%, rgba(166, 75, 41, 1) 76%), url("images/bg/noise.png");
box-shadow:8px 8px 14px -4px #ffbb91 inset, -1px -1px 26px -11px #000000 inset, 3px 3px 12px -4px #000000, 1px 1px 3px 2px inset black;
background-blend-mode:overlay;
  border-left: ridge #ea9a9a 5px;
  padding:3px;
} 
.back {
--lining: #eeac56;

width: 200px;
height:350px;
border-radius: 0px 17px 7px 0px;
background: linear-gradient(180deg,rgba(166, 75, 41, 1) 18%, rgba(153, 96, 96, 1) 47%, rgba(166, 75, 41, 1) 76%), url("images/bg/noise.png");
box-shadow:8px 8px 14px -4px #ffbb91 inset, -1px -1px 26px -11px #000000 inset, 3px 3px 12px -4px #000000, 1px 1px 3px 2px inset black;
background-blend-mode:overlay;
  border-left: ridge #ea9a9a 5px;
  padding:3px;
} 
.front > *{
position: relative;
  size: 100%;
  width: 86%;
  height: 90%;
  margin: auto;
  top: 16px;
  border: ridge var(--lining);
  text-align:center;
  }
  .front:hover > *{
--borderw: 7px;
  position: relative;
  size: 100%;
  width: 90%;
  margin: auto;
  top: 16px;
  border-right: ridge var(--lining) var(--borderw);
  border-left: ridge var(--lining) var(--borderw);
  left: -0px;
  transform: scaleX(82%);
  
  }
.front:hover{
--shadow: #2f1707; /* local scope */
  width: 180px;
  transform: rotate3d(0, 1, 0, 20deg);
  /* translate: -5%; */
  border-left: solid  #ea9a9a 3px;
  border-right: solid var(--shadow) 5px;
  border-radius: 0px 3px 3px 0px;
  background: linear-gradient(180deg,rgba(166, 75, 41, 1) 18%, rgba(153, 96, 96, 1) 47%, rgba(166, 75, 41, 1) 76%), url("images/bg/noise.png");
  box-shadow:8px 8px 14px -4px #ffbb91 inset, -1px -1px 26px -11px #000000 inset, 3px 3px 12px -4px #000000, 1px 1px 3px 2px inset black;
}

.page:not(.front,.back){

  /* box-shadow: 3px 3px 12px -4px #000, inset 0 0 0 1000px rgba(255, 239, 193, 0.73); */
  background-blend-mode: overlay;
  border-left: solid 2px #c3a57e;
  border-bottom: double burlywood 3px;
  border-right: double burlywood 3px;
  background: linear-gradient(180deg,rgb(255, 222, 210) 18%,  rgb(255, 251, 199) 76%), url("images/bg/canvas.jpg");
}
  

  .page{
    float: left;
  width: 200px;
  height: 350px;
  }