body{
    background:#e32f21;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    overflow:hidden;
    padding: 20px;
}

    .envelope{
    position:relative;
    width:520px;
    height:300px;
    background:linear-gradient(145deg,#ece9e9,#e4e0e1);
    border-radius:0 0 8px 8px;
    box-shadow:0 20px 40px rgba(0,0,0,0.25);
    padding:20px;
    transition:0.8s;
    border:3px solid black;
    }

    .envelope::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    border-left:255px solid transparent;
    border-right:260px solid transparent;
    border-top:150px solid white;
    transform-origin:top;
    transition:1s;
    }

    .envelope.aberto::before{
    transform:rotateX(180deg);
    }

    .campo{
    position:absolute;
    color:white;
    font-size:15px;
    }

    .campo label{
    width:45px;
    font-size:1.1rem;
    color:#e32f21;
    }

    .de{ top:200px; }

    .para{ bottom:20px; }

    input{
    border:none;
    padding:6px;
    margin-left:5px;
    background:none;
    border-bottom:2px solid #e32f21;
    color:#e32f21;
    width:180px;
    font-size:1.1rem;
    padding: 0;
    }

    .btn-enviar{
    background:white;
    border:none;
    color:#e32f21;
    padding:10px 18px;
    border-radius:30px;
    font-weight:600;
    transition:.5s;
    }

    .btn-enviar:hover{
    background:white;
    transform:scale(1.2);
    color:#e32f21;
    }

    .heart-envelope{
    position:absolute;
    font-size:40px;
    color:red;
    opacity:0;
    transform:translateY(0) scale(1);
    transition:all 1.5s ease;
    }

    .heart-envelope.animar{
    opacity:1;
    transform:translateY(-200px) scale(2);
    }

    .heart-envelope.explodir{
    transform:scale(40);
    }

    .erro{
    color:white;
    margin-top:10px;
    font-weight:bold;
    }

    .titulo-bonito{
    font-family: "Great Vibes", cursive;
    color: white;
    font-size: 4rem;
    text-align: center;
    }
    .eu-te-amo{
        color: white;
        font-size: 2.5rem;
        text-align: center;
    }

    @media (max-width:900px){
        .titulo-bonito{
            font-size: 3rem;
        }
        .eu-te-amo{
            font-size: 1.8rem;
        }   
    }

    @media (max-width:560px){
        .envelope{
            width:400px;
            height:250px;
        }

        .envelope::before{
            border-left:195px solid transparent;
            border-right:200px solid transparent;
        }

        .de{ top:165px; }

        .para{ bottom:15px; }
    }

    @media (max-width:430px){
        .envelope{
            width:300px;
            height:200px;
        }

        .envelope::before{
            border-left:145px solid transparent;
            border-right:150px solid transparent;
            border-top:120px solid white;
        }

        .de{ top:125px; }

        .para{ bottom:5px; }
    }


    /* container dos corações */
.hearts{
    position:fixed;
    width:100%;
    height:100%;
    pointer-events:none;
}

/* coração */
.heart{
    position:absolute;
    color:white;
    font-size:20px;
    animation:fall linear forwards;
}

/* animação de queda */
@keyframes fall{
    0%{
        transform:translateY(-10vh);
        opacity:1;
    }

    100%{
        transform:translateY(110vh);
        opacity:0.3;
    }
}