/* 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: #f4eae1; 
    font-family: Georgia, "Times New Roman", serif;
    margin: 0;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}

.diario-page {
    max-width: 700px;
    width: 100%;
    background-color: #fffdf9; 
    
   
    background-image: linear-gradient(#e8dfd5 1px, transparent 1px);
    background-size: 100% 28px;
    line-height: 28px; 
    
    padding: 40px 50px;
    border: 1px solid #dcd1c4;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.05); 
    position: relative;
    text-align: center; 
}


.diario-page::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    width: 1px;
    background-color: rgba(255, 100, 100, 0.4); 
    pointer-events: none;
}


h1 {
    font-family: "Times New Roman", Georgia, serif;
    font-size: 36px;
    font-style: italic;
    font-weight: normal;
    color: #8c6239;
    margin-bottom: 20px;
    margin-top: 10px;
}


h2 {
    font-family: "Times New Roman", Georgia, serif;
    font-size: 24px;
    font-weight: normal;
    color: #5c4033;
    margin-top: 28px;
    margin-bottom: 28px;
}


p {
    font-size: 16px;
    color: #4a3b32;
    margin: 0 0 28px 0; 
}


.data {
    font-family: "Comic Sans MS", cursive;
    font-size: 14px;
    color: #a1887f;
    letter-spacing: 1px;
}


.Foto-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 40px 0;
}

.polaroid {
    background: white;
    padding: 16px 16px 32px 16px; /* Più bordo bianco intorno */
    border: 1px solid #e0d7cd;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.08);
    max-width: 280px; /* Prima era 180px, ora è molto più grande! */
    width: 100%;
    transition: transform 0.3s;
}

.polaroid img {
    width: 100%;
    height: 250px; /* Aumentata l'altezza per rendere la foto grande */
    object-fit: cover;
}

.polaroid:hover {
    transform: rotate(0deg) scale(1.05); 
}

.polaroid img {
    width: 100%;
    height: 150px;
    object-fit: cover; 
}

.polaroid .didascalia {
    font-family: "Comic Sans MS", cursive;
    font-size: 12px;
    color: #776555;
    margin-top: 10px;
}

.busta-wrapper {
    position: relative;
    width: 280px;
    height: 160px;
    background-color: #f1dfcf; 
    margin: 40px auto;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
    overflow: visible; 
    
   
    will-change: height;
    transform: translateZ(0); 
}


.busta-wrapper::before {
    content: '';
    position: absolute;
    top: -1px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 140px solid transparent;
    border-right: 140px solid transparent;
    border-top: 100px solid #e5cfbe; 
    transform-origin: top;
    
   
    z-index: 3; 
    
    transition: transform 0.5s ease, border-top-color 0.5s ease, z-index 0s 0.25s; 
    
    will-change: transform;
    transform: translateZ(0);
}


.busta-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 140px solid transparent;
    border-right: 140px solid transparent;
    border-bottom: 90px solid #f1dfcf; 
    
   
    z-index: 4; 
}


.sigillo {
    position: absolute;
    top: 60px; 
    left: 50%;
    transform: translateX(-50%);
    
    
    z-index: 5; 
    
    font-size: 30px;
    transition: all 0.5s ease;
    
    will-change: transform, opacity;
}


.lettera-contenuto {
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    background: #ffffff;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px dashed #d1c7bd;
    
    
    z-index: 2; 
    
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; 
    
    will-change: transform;
    transform: translateZ(0);
}


.busta-wrapper:hover {
    height: 180px; 
}


.busta-wrapper:hover::before {
    transform: rotateX(160deg); 
    border-top-color: #f6efe9; 
    
    
    z-index: 1; 
}


.busta-wrapper:hover .lettera-contenuto {
    transform: translateY(-80px); 
    
 
}


.busta-wrapper:hover .sigillo {
    transform: translateX(-50%) translateY(30px) scale(0.5);
    opacity: 0;
    
}

.busta-wrapper {
    position: relative;
    width: 280px;
    height: 160px;
    background-color: #f1dfcf;
    margin: 40px auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    overflow: visible;
    border: 1px solid #e5cfbe;
    box-sizing: border-box;
}

.sigillo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    font-size: 32px;
    transition: opacity 0.3s ease;
}

.lettera-contenuto {
    position: absolute;
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    background: #ffffff;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px dashed #d1c7bd;
    border-radius: 6px;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.busta-wrapper:hover .sigillo {
    opacity: 0;
}

.busta-wrapper:hover .lettera-contenuto {
    transform: translateY(-95px);
    z-index: 10;
}