@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');

body {
    font-family: 'Indie Flower', cursive !important;
    background: #fda7d3; /* CAPE HONEY */
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;  
    text-rendering: optimizeLegibility;
}

::selection {
    background: transparent;
}

h4 {
    font-size: 26px;
    line-height: 1px;
    font-family: 'Amatic SC', cursive !important;
    text-align: center;
}

.color1 { color: #1BBC9B; } /* MOUNTAIN MEADOW */
.color2 { color: #C0392B; } /* TALL POPPY */

.card {
    color: #013243; /* SHERPA BLUE */
    position: relative;
    width: 300px;
    height: 400px;
    perspective: 2000px; /* Gives the 3D depth */
    transform-style: preserve-3d;
    box-shadow: 20px 20px 40px rgba(0,0,0,0.2); 
    
    /* This keeps the whole book permanently tilted */
    transform: rotate(-10deg); 
}

/* --- THE PAGES --- */
.page {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: left center; /* Hinges the page on the left side */
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
    transform-style: preserve-3d;
    cursor: pointer; /* Turns mouse into a clicking hand */
}

/* This is the class Javascript adds when you click to flip it */
.page.flipped {
    transform: rotateY(-180deg);
}

/* --- FRONT & BACK OF PAGES --- */
.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffffff;
    backface-visibility: hidden; /* Hides the back side until it flips */
    box-sizing: border-box;
}

/* Flips the back of the page so it isn't backward when turned */
.back {
    transform: rotateY(180deg);
    border-right: 2px solid #BAC1BA; /* Creates a slight spine shadow */
}

/* --- IMAGES ON THE BACK (LEFT SIDE) --- */
.back img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Makes the image fill the page nicely without stretching */
    box-sizing: border-box;
}

/* --- CONTENT STYLING --- */
.imgBox img {
    width: 100%;
    height: 60%;
    object-fit: fill;
}

.extra {
    padding: 20px;
    border-left: 1px solid #BAC1BA;
}

.details {
    padding: 10px 10px 10px 20px;
}

.details p {
    font-size: 15px;
    line-height: 5px;
    transform: rotate(-10deg);
    padding: 0 0 0 10px;
}

.text-right {
    text-align: right;
}

.hint {
    color: #888;
    font-size: 12px;
    text-align: center;
    margin-top: 50px;
}
/* --- CENTERED SQUARE LAYOUT (IMAGES ON BACK PAGES) --- */
.split-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* This pushes everything to the perfectly middle of the page */
    padding: 20px;
    box-sizing: border-box;
    height: 100%; /* Needs to be 100% so it knows where the middle is */
}

.split-pic {
    width: 85%; /* Fits nicely inside the card width */
    aspect-ratio: 1 / 1; /* Forces a perfect square shape! */
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Slightly softer shadow */
}

.split-text {
    margin-top: 15px;
    text-align: center;
    width: 100%;
}

.split-text h4 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
}

.split-text p {
    margin: 5px 0 0 0;
    font-size: 16px;
    color: #333;
}