/* -----------------------------------------------------------
  Colors
----------------------------------------------------------- */
:root {
  --color: rgb(164, 135, 116);; /*nav font color */
  --links: #ffffff;
  --background: url(/media/background/rosyquilt.jpeg);
  --main-border:#e6d4d9;
  --container: #f9f9f9;
  --footer: #bed2c1;
  --checkbg: white;
  --checkn: black;
  --checkhover: rgb(244, 199, 213);
  --cursor-default: url('/images/cursor1.gif'), auto;
  --card-bg:#fff;
  --dash:#bfa68c;
  --dash-w:1px;
  --ridge:#c1aba0;
  --main-pink:#e7d4db;
}

[data-theme='dark'] {
  --color: #9C798B; /* font color */
  --links: #ffffff;
  --background: url(https://i.pinimg.com/1200x/79/de/f7/79def79c69858eadc43edda207d05f38.jpg);
  --main-border:#e6d4d9;
  --container: #f9f9f9;
  --footer: #bed2c1;
  --checkbg: white;
  --checkn: black;
  --checkhover: rgb(244, 199, 213);
  --cursor-default: url('/images/cursor1.gif'), auto;
  --card-bg:#fff;
  --dash:#bfa68c;
  --dash-w:1px;
}



 
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Shadows+Into+Light&display=swap');
 
@font-face {
  font-family: "Willow";
  src: url("/fonts/willow.ttf");
}

@font-face {
  font-family: "Pixel";
  src: url("/fonts/pixel.otf");
}

@font-face {
  font-family: "Cavalhatriz";
  src: url("/fonts/Cavalhatriz.ttf");
}


html, body {
    background: var(--background) repeat top left;
  cursor:url('images/cursor1.gif'),auto; 
    overflow: scroll; /* or auto */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

html {
::view-transition-old(root) {
  animation: fade-out 0.3s;
}


::view-transition-new(root) {
  animation: fade-in 0.3s;
}

 
#diary_widget {
    font-family: willow, cursive;
    color: rgb(120, 95, 80);
        width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

#diary_widget * {
    box-sizing: border-box;
}


 
#diary_layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}
 

#diary_archive {
    flex: 0 0 200px;
    background: #fff7fa;
    border: 1px solid #eecad8;
    border-radius: 12px;
    padding: 14px;
    box-shadow:
        inset 2px 2px 0px 0px #ffffff,
        inset -2px -2px 0px 0px #f9dde9;
    max-height: 480px;
    overflow-y: auto;
}
 
#diary_archiveTitle {
    font-size: 15px;
    text-align: center;
    letter-spacing: 1px;
    margin: 0 0 10px;
    color: #da7fa6;
}
 
#diary_archiveList {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
 
.diary-archiveItem {
    border: 1px solid #eecad8;
    border-radius: 8px;
    background: #ffffff;
    padding: 6px 8px;
    font-family: willow, cursive;
    font-size: 11px;
    text-align: left;
    color: #a57a64;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.container {

            display: flex;
            align-items: center;
}
 
.diary-archiveItem:hover {
    transform: scale(1.03);
}
 
.diary-archiveItem.diary-active {
    background: linear-gradient(to bottom, #fdf4f8 0%, #f9dde9 50%, #f6cfe0 100%);
    border-color: #da7fa6;
    font-weight: bold;
}
 
.diary-archiveItem:focus-visible {
    outline: 2px solid #da7fa6;
    outline-offset: 2px;
}
 

 
#diary_book {
    flex: 1 1 500px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
 
#diary_bookWrap {
    position: relative;
    perspective: 2200px;
}
 

 
#diary_cover {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    aspect-ratio: 1 / 1.35;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    background-image: url('https://i.pinimg.com/736x/e7/49/2d/e7492d1d17cc9e380985a09c7f77bf4a.jpg');
    background-size: 100%;
    
    box-shadow:
        0 6px 18px rgba(80, 40, 60, 0.28),
        inset 0 0 0 6px rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.7s ease;
}
 
#diary_cover:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: -6px;
}
 
.diary-cover-title {
  display: flex;
  content: url('/media/decor/dearest.png');
    font-family: 'Pixel', pixel,  cursive;
    font-weight: 500;
    font-size: 2em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(120, 40, 70, 0.4);
    margin-top: -80;
    padding: 0px;
    margin-left: 40px;
    background: #f8eaec;
}
 
.diary-cover-hint {
    font-family: 'Shadows Into Light', willow, cursive;
    font-size: 15px;
    color: #f2d4de;
    background: #f8eaec;
margin-bottom: -10px;  
margin-left: 40px;

}
 
#diary_book.diary-open #diary_cover {
    transform: translateX(-50%) rotateY(-100deg);
    opacity: 0;
    pointer-events: none;
}
 
@media (prefers-reduced-motion: reduce) {
    #diary_cover {
        transition: opacity 0.3s ease;
    }
    #diary_book.diary-open #diary_cover {
        transform: translateX(-50%);
    }
}
 

#diary_controls {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease 0.4s;
}
 
#diary_book.diary-open #diary_controls {
    opacity: 1;
    pointer-events: auto;
}
 
#diary_closeBtn {
    margin-left: auto;
}
 
#diary_spread {
    position: relative;
    display: flex;
    aspect-ratio: 2 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease 0.25s;
    /* the spine shadow, sitting under everything */
    background: linear-gradient(to right, transparent 49%, rgba(80, 40, 60, 0.15) 50%, transparent 51%);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(80, 40, 60, 0.18);
    perspective: 2200px;
}
 
#diary_book.diary-open #diary_spread {
    opacity: 1;
    pointer-events: auto;
}
 

.diary-paper {
    background-color: #fffdf6;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 31px,
        #e7d9dc 32px
    );
    background-position: 0 78px;
    padding: 28px 28px 28px 52px;
    position: relative;
    overflow: hidden;
    border: 15px #f8eaec solid;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;}
 
.diary-paper::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 36px;
    width: 1px;
    background: #f0b8c8;
    opacity: 0.7;
}
 

.diary-page {
    flex: 1 1 50%;
    box-shadow: inset 0 0 0 1px #eecad8;
}
 
.diary-page-left {
    border-radius: 14px 0 0 14px;
}
 
.diary-page-right {
    border-radius: 0 14px 14px 0;
}
 
.diary-loading,
.diary-empty,
.diary-cover {
    text-align: center;
    color: #a08a86;
    font-size: 14px;
    margin-top: 140px;
    font-family: 'Shadows Into Light', willow, cursive;
}


.diary-title {
    margin: 0 0 2px;
    font-family: Cavalhatriz, cursive;
    font-weight: 100;
    font-size: 1.5em;
    color: #efd7e2;
}

.diary-title::before {
  content: url('/media/decor/sakura.gif');
}
 
.diary-date {
    display: block;
    font-family: 'Shadows Into Light', willow, cursive;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #a08a86;
    margin-bottom: 16px;
}
 
.diary-body {
    font-family: 'Caveat', willow, cursive;
    font-size: 15px;
    line-height: 30px; 



}
 
.diary-body p {
    margin: 0;
        overflow-y: scroll;
        overflow-x: hidden;
            height: 500px;
}
 
.diary-body img {
    max-width: 100%;
    border-radius: 8px;
    border: 4px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 10px 0;
}
 

 
.diary-leaf {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: left center;
    transition: transform 0.6s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: 5;
    pointer-events: none;
    border-radius: 0 14px 14px 0;
}
 
.diary-leaf.diary-leaf-active {
    display: block;
}
 
.diary-leaf-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    box-shadow: inset 0 0 0 1px #eecad8;
    border-radius: 0 14px 14px 0;
}
 

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

.diary-leaf-face::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(60, 30, 45, 0.35), transparent 55%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    border-radius: inherit;
}
 
.diary-leaf.diary-turning .diary-leaf-face::after {
    opacity: 1;
}
 
@media (prefers-reduced-motion: reduce) {
    .diary-leaf {
        transition: none;
    }
}
 

#diary_controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
 
#diary_controls button {
    border: 1px solid #eecad8;
    border-radius: 20px;
    background: linear-gradient(to bottom, #fdf4f8 0%, #f9dde9 50%, #f6cfe0 100%);
    box-shadow: inset 1px 1px 0px 0px #ffffff, inset -1px -1px 0px 0px #f9dde9;
    padding: 8px 16px;
    font-family: willow, cursive;
    font-size: 12px;
    color: #a57a64;
    cursor: pointer;
    min-height: 40px;
}
 
#diary_controls button:hover:not(:disabled) {
    transform: scale(1.04);
}
 
#diary_controls button:disabled {
    opacity: 0.4;
    cursor: default;
}
 
#diary_controls button:focus-visible {
    outline: 2px solid #da7fa6;
    outline-offset: 2px;
}
 
#diary_pageIndicator {
    font-size: 11px;
    color: #a08a86;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: willow, cursive;
}
 

 
@media (max-width: 700px) {
    #diary_layout {
        flex-direction: column;
    }
 
    #diary_archive {
        width: 100%;
        max-height: 160px;
    }
 
    .diary-page-left,
    .diary-leaf {
        display: none !important;
    }
 
    #diary_spread {
        aspect-ratio: unset;
        min-height: 500px;
        background: none;
        box-shadow: none;
    }
 
    .diary-page-right {
        border-radius: 14px;
        flex: 1 1 100%;
    }
 
    .diary-paper {
        padding: 20px 20px 20px 44px;
        background-position: 0 70px;
    }
 
    .diary-paper::before {
        left: 24px;
    }
}