*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    background-image: url('https://images.unsplash.com/photo-1437419764061-2473afe69fc2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80');
    background-size: cover;
}


/* Book */

h1{
    font-size: 28px;
}

h2{
    font-size: 20px;
}


.book{
    /* border: 1px solid black; */
    position: relative;
    width: 350px;
    height: 500px;
    top:0;
    left: 0;
    transition: transform 0.5s;
}

.paper{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    perspective: 1500px;
}

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

.front{
    z-index: 1;
    backface-visibility: hidden;
    border-left: 3px solid rgb(0, 0, 0) ;
}

.back{
    z-index: 0;
    box-shadow: 5px 3px 2px 0px;
}

.front-content,
.back-content{
    width: 100%;
    height: 100%;
    display: flex; 
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    /* padding: 10px; */
    color: white;
    background-image: url('https://images.unsplash.com/photo-1528459105426-b9548367069b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8Ym9vayUyMHRleHR1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60');
}

img{
    border: solid white;
}

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

#b1, #f2, #b2, #f3{
    background-image: url('https://images.unsplash.com/photo-1615800098779-1be32e60cca3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cGFwZXIlMjB0ZXh0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60');
    /* background-image: url('https://images.unsplash.com/photo-1528458876861-544fd1761a91?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8ODl8fHBhcGVyJTIwdGV4dHVyZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60'); */
}

@import url('https://fonts.googleapis.com/css2?family=Labrada&display=swap');

h3{
   
    color: black;
    font-style: italic;
}

p{
    padding: 20px;
    color:black;
    font-family: 'Labrada', serif;
    letter-spacing: 0.5px;
}

#b3 p{
    color:white;
}

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

/* Controller Buttons */
button{
    border:none;
    background-color: transparent;
    cursor: pointer;
    margin: 10px;
    transition:transform 0.5s;
    opacity: 0.8;
    
}

button:focus{
    outline: none;
}

button:hover{
    color:rgb(255, 255, 255);
}

/* Paper stack order */
#p1{
    z-index: 3;
}

#p2{
    z-index: 2;
}

#p3{
    z-index: 1;
}