/* ========================================
   DIARY PAGE
======================================== */

@font-face{
  
  font-family:"Zawijasy";
  src:url(zawijasy.woff2);
  }


 @font-face{
   
   font-family:"dkjambo";
   src:url(DKJambo.woff2);
   }

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    min-height: 100vh;

    font-family: Arial, sans-serif;

    color: #4b3850;

    background-image:url(https://64.media.tumblr.com/18eed0d725eaca6afaa8aa0ae3b9d8a5/b68721610a3f491a-dc/s75x75_c1/0ffc52f5178d9027542dea53d26c9bb36a2a40d4.gifv)
        ;

    background-size:  60px;

}



/* ========================================
   MAIN PAGE
======================================== */

.diary-page {

    width: 92%;

    max-width: 1000px;

    margin: 35px auto;

}



/* ========================================
   HEADER
======================================== */

.diary-header {
  
    height:250px;

    margin-bottom: 25px;

    border: 2px solid #917067;
        
        position:relative;

}

.header-image,.header-image img{
  
    width:100%;
    height:100%;
    box-sizing:border-box;
    }
  
  .header-image img{
    object-fit:cover;
    }

.diary-header h1 {
    
    font-family:"dkjambo";
    
    font-style:italic;
    
    position:Absolute;
    
    right:20px;
    
    bottom:0;

    font-size: 60px;

    letter-spacing: 5px;

    color: white;
    
    z-index:2;

}



/* ========================================
   TWO COLUMN LAYOUT
======================================== */

.diary-layout {

    display: grid;

    grid-template-columns:
        230px
        1fr;

    gap: 25px;

    align-items: start;

}



/* ========================================
   SIDEBAR
======================================== */

.diary-sidebar {

    display: flex;

    flex-direction: column;

    gap: 18px;

}



/* ========================================
   SIDE BOXES
======================================== */

.side-box {

    background: white;

    border: 2px solid #d98abd;

    padding: 12px;

}


.side-box h3 {

    margin: -12px -12px 12px -12px;

    padding: 7px;

    text-align: center;

    background: #ffd9ef;

    border-bottom: 2px solid #d98abd;

    font-size: 12px;

    letter-spacing: 1px;

    color: #8f4f7c;

}



/* ========================================
   PROFILE
======================================== */

.mini-profile {

    text-align: center;

}


.mini-profile img {

    display: block;

    width: 100px;

    height: 100px;

    object-fit: cover;

    margin: 0 auto 8px;

    border: 2px solid #a68379;

}


.mini-profile p {

    margin: 0;

    font-size: 12px;

    line-height: 1.5;

}




/* ========================================
   CALENDAR
======================================== */

.calendar-box {
    text-align: center;
}


/* ========================================
   CALENDAR HEADER
======================================== */

.calendar-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 5px;

    margin-bottom: 8px;

}


.calendar-header span {

    flex: 1;

    color: #b65b9d;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 1px;

}


/* MONTH BUTTONS */

.calendar-header button {

    width: 22px;

    height: 20px;

    padding: 0;

    border: 2px outset #ffc8e8;

    background: #fff7fc;

    color: #b65b9d;

    font-size: 9px;

    cursor: pointer;

}


.calendar-header button:hover {

    background: #ffd9ef;

}


.calendar-header button:active {

    border-style: inset;

}


/* ========================================
   WEEKDAYS
======================================== */

.calendar-weekdays {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 2px;

    margin-bottom: 3px;

}


.calendar-weekdays span {

    color: #d98abd;

    font-size: 8px;

    font-weight: bold;

}


/* ========================================
   DAYS
======================================== */

.calendar-days {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 3px;

}


.calendar-day,
.calendar-empty {

    position: relative;

    min-height: 23px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 9px;

}


/* ========================================
   NORMAL DAY
======================================== */

.calendar-day {

    color: #6f5668;

    border: 1px solid transparent;

}


/* ========================================
   HOVER
======================================== */

.calendar-day:hover {

    background: #fff0f8;

    border: 1px dotted #d98abd;

    color: #b65b9d;

}


/* ========================================
   DAYS WITH POSTS
======================================== */

.calendar-day.has-post {

    background: #ffd9ef;

    border: 1px solid #eab1d5;

    color: #a44b8b;

    font-weight: bold;

    cursor: pointer;

}


/* ========================================
   LITTLE STAR
======================================== */

.calendar-day.has-post::after {

    content: "✦";

    position: absolute;

    top: -5px;

    right: -2px;

    font-size: 7px;

    color: #d98abd;

}


/* ========================================
   POST HOVER
======================================== */

.calendar-day.has-post:hover {

    background: #ffc8e8;

    transform: scale(1.12);

    z-index: 5;

}


/* ========================================
   TOOLTIP
======================================== */

.calendar-day.has-post::before {

    content: attr(data-title);

    position: absolute;

    bottom: 27px;

    left: 50%;

    transform:
        translateX(-50%)
        scale(0);

    transform-origin: bottom center;

    width: 120px;

    padding: 5px;

    background: #fff7fc;

    border: 2px solid #ffc8e8;

    color: #8a5578;

    font-size: 8px;

    font-weight: normal;

    line-height: 1.3;

    z-index: 20;

    pointer-events: none;

}


/* MOSTRAR TOOLTIP */

.calendar-day.has-post:hover::before {

    transform:
        translateX(-50%)
        scale(1);

}


/* ========================================
   POST HIGHLIGHT
======================================== */

.post-highlight {

    animation:
        diaryPostFlash 1.5s ease;

}


@keyframes diaryPostFlash {

    0% {

        transform: scale(1);

    }

    30% {

        transform: scale(1.03);

        box-shadow:
            0 0 15px #ffc8e8;

    }

    100% {

        transform: scale(1);

    }

}
/* ========================================
   MOOD
======================================== */

.mood {

    text-align: center;

}


.mood-face {

    margin: 5px 0;

    font-size: 22px;

}


.mood p {

    margin: 0;

    font-size: 11px;

}



/* ========================================
   MUSIC
======================================== */

.music-box {

    text-align: center;

}


.music-disc {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50px;

    height: 50px;

    margin: 5px auto;

    border-radius: 50%;

    background: #ffd9ef;

    border: 2px solid #d98abd;

    font-size: 22px;

}


.music-box p {

    margin: 4px 0;

    font-size: 11px;

}


.song-name {

    color: #a46c91;

}


.music-controls {

    margin-top: 8px;

    padding: 5px;

    background: #fff0f8;

    border: 1px solid #edb9d8;

    font-size: 10px;

}



/* ========================================
   TAGS
======================================== */

.tags {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

}


.tags a {

    padding: 4px 6px;

    background: #fff0f8;

    border: 1px solid #edb9d8;

    color: #9b5d86;

    text-decoration: none;

    font-size: 10px;

}


.tags a:hover {

    background: #ffd9ef;

}



/* ========================================
   ENTRIES
======================================== */

.diary-entries {

    min-width: 0;

}


.diary-entry {

    margin-bottom: 28px;

    padding: 18px;

    background: white;

    border: 2px solid #917067;

}



/* ========================================
   ENTRY HEADER
======================================== */

.entry-header {

    padding-bottom: 10px;

    border-bottom: 2px dashed #917067;

}


.entry-date {

    display: block;

    margin-bottom: 5px;

    color: #a46c91;

    font-size: 11px;

}


.entry-header h2 {

    margin: 0;

    color: #917067;

    font-size: 19px;

    letter-spacing: 2px;

}



/* ========================================
   ENTRY INFO
======================================== */

.entry-info {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 12px 0;

}


.entry-info span {

    padding: 5px 8px;

    background: #fff0f8;

    border: 2px solid #917067;

    font-size: 10px;

}



/* ========================================
   ENTRY IMAGE
======================================== */

.entry-image {

    margin: 15px 0;

    text-align: center;

}


.entry-image img {

    max-width: 100%;

    width: 300px;

    border: 2px solid #d98abd;

}



/* ========================================
   CONTENT
======================================== */

.entry-content {

    font-size: 14px;

    line-height: 1.7;

}


.entry-content p {

    margin: 12px 0;

}



/* ========================================
   ENTRY TAGS
======================================== */

.entry-tags {

    margin-top: 15px;

    padding-top: 10px;

    border-top: 1px dashed #917067;

    color: #a46c91;

    font-size: 10px;

    word-spacing: 8px;

}



/* ========================================
   ENTRY FOOTER
======================================== */

.entry-footer {

    margin-top: 15px;

    text-align: center;

    color: #d77bb9;

    letter-spacing: 7px;

}



/* ========================================
   NAVIGATION
======================================== */

.diary-navigation {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 25px;

    margin: 30px 0;

}


.diary-navigation a {

    padding: 8px 12px;

    background: #ffd9ef;

    border: 2px solid #b65b9d;

    color: #7e4670;

    text-decoration: none;

    font-size: 11px;

    font-weight: bold;

}


.diary-navigation a:hover {

    transform: translate(2px, 2px);

    box-shadow:
        1px 1px 0 #b65b9d;

}


.diary-navigation span {

    color: #d77bb9;

}



/* ========================================
   FOOTER
======================================== */

.diary-footer {

    margin-top: 35px;

    padding: 20px;

    text-align: center;

    background: white;

    border: 4px solid #917067;

}


.footer-sparkles {

    margin-bottom: 10px;

    color: #d77bb9;

    letter-spacing: 7px;

}


.diary-footer a {

    display: inline-block;

    padding: 9px 16px;

    background: #ffd9ef;

    border: 2px solid #b65b9d;

    box-shadow:
        3px 3px 0 #b65b9d;

    color: #7e4670;

    text-decoration: none;

    font-size: 12px;

    font-weight: bold;

}


.diary-footer a:hover {

    transform: translate(2px, 2px);

    box-shadow:
        1px 1px 0 #b65b9d;

}


.diary-footer p {

    margin-bottom: 0;

    font-size: 11px;

    color: #a46c91;

}



/* ========================================
   MOBILE
======================================== */

@media (max-width: 700px) {

    .diary-page {

        width: 94%;

        margin: 20px auto;

    }


    .diary-layout {

        grid-template-columns: 1fr;

    }


    .diary-sidebar {

        order: 2;

    }


    .diary-entries {

        order: 1;

    }


    .diary-header h1 {

        font-size: 23px;

        letter-spacing: 3px;

    }


    .entry-info {

        flex-direction: column;

    }


    .diary-navigation {

        flex-wrap: wrap;

    }

}