q{
    color: #d400b8;
    font-weight: 100;
    text-decoration: underline;
}

.go_to_and_scroll{
    color: #07d400;
    font-weight: 100;
    text-decoration: underline;
}
/* ----------------------------------Image reference table-----------------------------------*/

.image_reference_table{
    border: 3px solid black;
    border-collapse: collapse;
    width:50%;
    overflow:hidden;
    float: right;
}
.image_reference_table thead tr{
    background-color:#2f3bac;
    color: white;
    text-align: center;
    font-weight: bold;
}
.image_reference_table th{
    text-align: center;
    padding: 12px 15px;
}
.image_reference_table td{
    text-align: left;
    padding: 12px 15px;
}

.image_reference_table img {
    width:80%;
    height: 80%;
}
.image_reference_table .image_reference{

    text-align: center;
}
.image_reference_table tbody tr {
    border: 3px solid black;
}

.image_reference_table tbody tr:nth-of-type(even){
    background-color: #797685;
}
.image_reference_table tbody tr:nth-of-type(odd){
    background-color: #4b4a59;
}
/* ----------------------------------Image reference table-----------------------------------*/
/* ----------------------------------left table-----------------------------------*/
.left_table{
    border: 3px solid black;
    border-collapse: collapse;
    width:50%;
    overflow:hidden;
    float: left;
}
.left_table thead tr{
    background-color:#2f3bac;
    color: white;
    text-align: center;
    font-weight: bold;
}
.left_table th{
    text-align: center;
    padding: 12px 15px;
}
.left_table td{
    text-align: left;
    padding: 12px 15px;
    border-left: 1px solid black;
}
.left_table tbody tr {
    border: 3px solid black;
}
.left_table tbody tr:nth-of-type(even){
    background-color: #797685;
}
.left_table tbody tr:nth-of-type(odd){
    background-color: #4b4a59;
}
/* ----------------------------------regular table-----------------------------------*/
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    height:100vh;
    display:flex;
    justify-content: center; 
    align-items: center;

    font-family: sans-serif;
    background-color: blanchedalmond; 
}
#front_cover,
#back_cover,
#front_cover_seperator,
#back_cover_seperator{
    background-color: #2f3bac;
}
#front_cover,
#back_cover{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0px 4px 4px 0px;
    transform-origin: left;
    transition-duration: 1.5s;
}
.book{
    position: relative;
    width:35%;
    height:95%;
    transition:transform 0.5s ;
}

 .paper{
    border: 1px solid black;
    position: absolute;
    width: 97.5%;
    height: 95%;
    top: 2.5%;
    left: 0;
    transform-origin: left;
    transition-duration: 1.5s;
    background-color:white;
    border-radius: 0px 7px 7px 0px;
    overflow: hidden;
}
 
#front_cover_content,
#front_cover_inside_content,
#back_cover_content,
#back_cover_inside_content,
.front_content,
.back_content{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#front_cover_content,
#back_cover_content,
.front_content{
    backface-visibility: hidden;
}
.seperator{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color:white;
}
#front_cover_seperator,
#back_cover_seperator{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
}
#front_cover_inside_content,
#back_cover_content,
.back_content{
    backface-visibility: hidden;
    transform: scaleX(-1);
    
}

/* Paper flip effect*/
.flipped{
    transform: rotateY(-180deg);
}

button{
    border: none;
    background-color: transparent;
    cursor: pointer;
    margin-inline: 1.5px;
    transition:transform 0.5s ;
    display: inline-flex;
    width: 4.5%;
    height: 45%;
}
button img{
    width: 30%;
}

.scroll_div{
    height: 90%;
    width: 95%;
    overflow: hidden;
    overflow-y: scroll;
}

.front_page_number{
    position: absolute;
    left:80%;
    bottom:-12px;
    height:30px;
    width:100%;
}
.back_page_number{
    position: absolute;
    left:2.5%;
    bottom:-12px;
    height:30px;
    width:100%;
}

/* Paper stack order*/
#page_000{
    z-index: 43;
}
#front_content_000{
    z-index: 42;
}
#seperator_000{
    z-index: 41;
}
#back_content_000{
    z-index: 40;
}
/* -----------Page_001------------------*/
#page_001{
    z-index: 39;
}
#front_content_001{
    z-index: 38;
}
#seperator_001{
    z-index: 37;
}
#back_content_001{
    z-index: 36;
}

/* -----------Page_002------------------*/
#page_002{
    z-index: 35;
}
#front_content_002{
    z-index: 34;
}
#seperator_002{
    z-index: 33;
}
#back_content_002{
    z-index: 32;
}

/* -----------Page_003------------------*/
#page_003{
    z-index: 31;
}
#front_content_003{
    z-index: 30;
}
#seperator_003{
    z-index: 29;
}
#back_content_003{
    z-index: 28;
}

/* -----------Page_004------------------*/
#page_004{
    z-index: 27;
}
#front_content_004{
    z-index: 26;
}
#seperator_004{
    z-index: 25;
}
#back_content_004{
    z-index: 24;
}
/* -----------Page_005------------------*/
#page_005{
    z-index: 23;
}
#front_content_005{
    z-index: 22;
}
#seperator_005{
    z-index: 21;
}
#back_content_005{
    z-index: 20;
}
/* -----------Page_006------------------*/
#page_006{
    z-index: 19;
}
#front_content_006{
    z-index: 18;
}
#seperator_006{
    z-index: 17;
}
#back_content_006{
    z-index: 16;
}
/* -----------Page_007------------------*/
#page_007{
    z-index: 15;
}
#front_content_007{
    z-index: 14;
}
#seperator_007{
    z-index: 13;
}
#back_content_007{
    z-index: 12;
}
/* -----------Page_008------------------*/
#page_008{
    z-index: 11;
}
#front_content_008{
    z-index: 10;
}
#seperator_008{
    z-index: 9;
}
#back_content_008{
    z-index: 8;
}
/* -----------Page_009------------------*/
#page_009{
    z-index: 7;
}
#front_content_009{
    z-index: 6;
}
#seperator_009{
    z-index: 5;
}
#back_content_009{
    z-index: 4;
}/* -----------Page_010------------------*/
#page_010{
    z-index: 3;
}
#front_content_010{
    z-index: 2;
}
#seperator_010{
    z-index: 1;
}
#back_content_010{
    z-index: 0;
}