/* Book */
.book {
    position: relative;
    width: 42vw;
    height: 30vw;
    transition: transform 0.7s;
}

.paper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    perspective: 100vw;

}

.front,
.back {
    
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: left;
    transition: transform 2s;
}

.front {
    z-index: 1;
    backface-visibility: hidden;
    border-left: .5vw solid white;
}

.back {
    z-index: 0;
}

.front-content,
.back-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-content {
    transform: rotateY(180deg)
}

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

/* Controller Buttons */
.book-button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    margin: 5vw;
    transition: transform .2s;
}

.book-button:focus {
    outline: none;
}

.book-button:hover i {
    color: #636363;
}

.book-i {
    font-size: 4vw;
    color: gray;
}

/* Paper stack order */
#page1 {
    z-index: 10;
}
#page2 {
    z-index: 9;
}
#page3 {
    z-index: 8;
}
#page4 {
    z-index: 7;
}
#page5 {
    z-index: 6;
}
#page6 {
    z-index: 5;
}
#page7 {
    z-index: 4;
}
#page8 {
    z-index: 3;
}
#page9 {
    z-index: 2;
}
#page10 {
    z-index: 1;
}
.book-image {
    width: 42vw;
    height: 30vw;

}