*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#ffd6e7,#ffeecf);

    overflow:hidden;

    font-family:Arial,Helvetica,sans-serif;
}

.container{

    

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:20;


}

/* ==========================
        ENVELOPE
========================== */

.envelope{

    position:relative;

    width:420px;
    height:280px;

    z-index:20;



}

/* back */

.envelope-back{

    position:absolute;

    width:100%;
    height:100%;

    background:#d84b4b;

    border-radius:12px;

    box-shadow:0 20px 40px rgba(0,0,0,.25);
}

/* paper */

.letter{


    position:absolute;

    left:20px;
    top:20px;

    width:380px;
    height:240px;

    background:white;

    border-radius:12px;

    padding:25px;

    z-index:1;

    box-shadow:
        0 8px 25px rgba(0,0,0,.15);

    transition:
        transform 1.2s ease,
        box-shadow 1.2s ease;

    transform:translateY(0) ;


}

.letter h1{

    color:#e91e63;

    margin-bottom:15px;
}

.letter p{

    color:#444;

    line-height:1.6;
}

/* Left Fold */

.left-fold{

    position:absolute;

    width:0;
    height:0;

    border-top:140px solid transparent;
    border-bottom:140px solid transparent;
    border-left:210px solid #c53c3c;

    z-index:3;
}

/* Right Fold */

.right-fold{

    position:absolute;

    right:0;

    width:0;
    height:0;

    border-top:140px solid transparent;
    border-bottom:140px solid transparent;
    border-right:210px solid #c53c3c;

    z-index:3;
}

/* Bottom Fold */

.bottom-fold{

    position:absolute;

    bottom:0;

    width:0;
    height:0;

    border-left:210px solid transparent;
    border-right:210px solid transparent;
    border-bottom:140px solid #ef6a6a;

    z-index:4;
}

/* Top Flap */

.top-flap{


    position:absolute;

    width:0;
    height:0;

    border-left:210px solid transparent;
    border-right:210px solid transparent;
    border-top:140px solid #b92d2d;

    transform-origin:top center;

    transition:transform 0.8s ease;

    z-index:5;
}

/* Open animation */

.envelope.open .top-flap{

    transform:rotateX(180deg);

}

.envelope.open .letter{


    transform:
        translateY(-240px)
        rotate(-3deg);

    z-index:10;

    box-shadow:
        0 20px 40px rgba(0,0,0,.30);

}

.envelope{

    transition:transform .4s ease;

}

.envelope:hover{

    transform:translateY(-8px);

}
/* ==========================
      FLOATING BALLOONS
========================== */

#balloons{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    overflow:hidden;
    pointer-events:none;
    
    inset:0;


    z-index:1;

}

.balloon{

    position:absolute;

    width:60px;
    height:75px;

    border-radius:50%;

    bottom:-120px;

    animation:floatUp linear infinite;

    opacity:.9;
    box-shadow:
    inset -8px -8px 15px rgba(0,0,0,.15),
    inset 8px 8px 15px rgba(255,255,255,.35);

background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), transparent 40%);

}

.balloon::before{

    content:"";

    position:absolute;

    width:2px;

    height:80px;

    background:#666;

    left:50%;

    top:75px;

}

@keyframes floatUp{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-120vh);

    }

}


   /* ==========================
      FLOATING PHOTOS
========================== */

#photoContainer{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100%;

    pointer-events:none;

    inset:0;

    z-index:5;



}

.photo{

    position:absolute;

    width:130px;
    height:130px;

    object-fit:cover;

    border-radius:15px;

    border:5px solid white;

    box-shadow:0 15px 25px rgba(0,0,0,.3);

    animation:float 5s ease-in-out infinite;

}

/* Positions */

.photo1{

    top:10%;
    left:5%;

}

.photo2{

    top:10%;
    right:5%;

    animation-delay:1s;

}

.photo3{

    bottom:10%;
    left:5%;

    animation-delay:2s;

}

.photo4{

    bottom:10%;
    right:5%;

    animation-delay:3s;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}
.confetti{
    position:fixed;
    width:10px;
    height:15px;
    top:-20px;
    animation:confettiFall linear forwards;
}

@keyframes confettiFall{

0%{
    transform:translateY(0) rotate(0deg);
    opacity:1;
}

100%{
    transform:translateY(110vh) rotate(720deg);
    opacity:0;
}

}
/* ==========================
      RESPONSIVE DESIGN
========================== */

/* Tablets */
@media (max-width: 768px){

    .envelope{

        width:320px;
        height:215px;

    }

    .letter{

        width:280px;
        height:180px;

        left:20px;
        top:15px;

        padding:15px;

    }

    .letter h1{

        font-size:28px;

    }

    .letter h3{

        font-size:18px;

    }

    .letter p{

        font-size:14px;

    }

    .photo{

        width:90px;
        height:90px;

    }

}

/* Phones */
@media (max-width: 480px){

    body{

        padding:15px;

    }

    .envelope{

        width:280px;
        height:190px;

    }

    .letter{

        width:240px;
        height:160px;

        left:20px;
        top:15px;

        padding:12px;

    }

    .letter h1{

        font-size:22px;

    }

    .letter h3{

        font-size:16px;

    }

    .letter p{

        font-size:12px;
        line-height:1.4;

    }

    .photo{

        width:70px;
        height:70px;

    }

    .photo1{

        top:4%;
        left:2%;

    }

    .photo2{

        top:4%;
        right:2%;

    }

    .photo3{

        bottom:4%;
        left:2%;

    }

    .photo4{

        bottom:4%;
        right:2%;

    }

}