/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(#fff0f6, #ffe6ef);
    display: flex;
    justify-content: center; /* centers notebook horizontally */
    align-items: flex-start; /* keeps top space for header/lock */
    color: #5a2a3a;
    font-family: "Indie Flower", cursive;
    perspective: 1200px;
}

.notebook {
    width: 900px;
    max-width: 90%;       /* keeps it responsive */
    height: 520px;
    background: #f8cdda;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    display: none;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
}

.pages {
    flex: 1;
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.page {
    width: 50%;
    padding: 40px 35px;   /* more space for text inside */
    box-sizing: border-box;
    font-family: "Indie Flower", cursive;
    font-size: 1rem;
    line-height: 28px;
    background: repeating-linear-gradient(
        to bottom,
        #fffafc 0px,
        #fffafc 28px,
        #f7dbe6 29px
    );
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left;
    transition: transform 0.6s ease;
    overflow-y: auto;
    white-space: pre-wrap;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* aligns text to top */
}

.page.left {
    border-right: 1px solid #f0c2d1;
    width: 50%;
    z-index: 2;
}

.page.right {
    left: 50%;
    width: 50%;
    z-index: 1;
}

.page h2 {
    font-family: "Indie Flower", cursive;
    margin-bottom: 8px;
    text-align: left;      /* aligns titles left */
}

.date {
    font-size: 0.7rem;
    color: #9a5c72;
    margin-bottom: 12px;
    text-align: left;
}

.heart {
    position: absolute;
    color: #ff8fb1;
    font-size: 0.8rem;
    right: 15px;
    top: 15px;
}