/* =========================
      Estética
========================= */

.diary-entry{

    background:#85cddb;

    border:3px solid white;
    outline:3px solid #8a78ff;

    padding:30px;

    box-shadow:
    0 0 10px #8a78ff,
    0 0 20px rgba(138,120,255,.3);
}

/* =========================
        Cabezara
========================= */

.entry-header{
    margin-bottom:25px;
}

.entry-header h1{

    color:#5c3cfd;

    font-size:2.8rem;

    margin-bottom:10px;
}

/* =========================
        Estado de ánimo
========================= */
.mood{

    display:inline-block;

    background:white;

    color:#5c3cfd;

    padding:5px 12px;

    border-radius:20px;

    border:2px solid #8a78ff;

    font-size:1.3rem;
}

/* =========================
        Texto
========================= */

.entry-content{

    font-size:1.6rem;

    line-height:1.8;

    color:#2f2f2f;
}

/* =========================
        Imágen
========================= */

.entry-image{

    width:280px;

    border:3px solid white;

    outline:2px solid #8a78ff;

    margin-bottom:10px;
}


/* =========================
        Derecha
========================= */

.entry-image.right{

    float:right;

    margin-left:20px;
}

/* =========================
        Izquierda
========================= */

.entry-image.left{

    float:left;

    margin-right:20px;
}



.entry-content::after{
    content:"";
    display:block;
    clear:both;
}


.day-info{

    display:flex;
    gap:10px;
    flex-wrap:wrap;

    margin-bottom:20px;
}

.day-info span{

    background:white;

    padding:5px 10px;

    border:1px solid #8a78ff;
}


.diary-page{

    max-width:900px;

    margin:40px auto;

    padding:25px;
}






.diary-system{

    text-align:center;

    margin-bottom:25px;
}

.diary-system h2{

    color:#5c3cfd;

    font-size:2rem;
}

.diary-system p{

    opacity:.8;
}





/* VOLVER FOOTER */

.entry-footer{

    margin-top:30px;

    text-align:center;
}

.back-button{

    display:inline-block;

    background:#85cddb;

    color:#5c3cfd;

    text-decoration:none;

    padding:10px 18px;

    border:2px solid white;
    outline:2px solid #8a78ff;

    box-shadow:
        0 0 8px rgba(138,120,255,.4);

    transition:.2s ease;
}

.back-button:hover{

    transform:translateY(-2px);

    background:white;

    box-shadow:
        0 0 12px rgba(138,120,255,.6);
}