*{

    box-sizing: border-box;
    
}

.container {

    position: relative;
    
    width: 150px;
    
    height: 110px;   
          
    perspective: top;
    
    perspective-origin: top;   
    
    margin: 0 auto;  
        
}

.book {   
    
    position: relative;
    
    width: 100%;
    
    height: 100%;

    transform: rotateX(20deg);  

    transform-style: preserve-3d;      
    
}

.pages {    
    
    position: absolute;
        
    display: flex;

    flex-direction: row;
    
    justify-items: center;
    
    width: 100%;    
    
    height: 100%;    

    margin: 15% auto;

    box-shadow: 2px 2px 25px rgb(85, 85, 85);

    z-index: 1;

}

.backOfPrevPage, .frontOfNextPage {
    
    width: 50%;
    
    height: 100%;
   
    z-index: 10;        

}

.page {
    
    position: absolute;
    
    display: flex;
    
    flex-direction: row;
    
    justify-items: center;
    
    width: 100%;
    
    height: 100%;     
    
    margin: 15% auto;

    z-index: 0;

}

.page1, .page2 {

    width: 50%;
    
    height: 100%;   
    
}

.page1 {

    backface-visibility: hidden;

}

.backOfPrevPage, .frontOfNextPage, .page1, .page2 {
    
    background-size: cover;
    
    background-repeat: no-repeat;
    
    overflow: hidden;

}

.turnPageIndicator {
    
    position: absolute; 

    width: 25%;
    
    height: 25%;    
  
    z-index: 11;   
  
}


#back:hover, #forward:hover { 

    cursor: pointer;

}

#back {
    
    top: 0;
    
    left: 0; 

}

#forward {
    
    top: 0;
    
    right: 0;  
    
}