.envelope {
    position: fixed;
    width: 200px;
    height: 100px;
    background: #fd7e14;
    margin: 50px auto;
    box-shadow: -10px 5px 20px rgba(0, 0, 0, 0.8);
    animation: desplazar-envelope 1s 3s forwards;
    left: 24%;
}

@media (min-width: 768px) {
    .envelope {
        left: 45%;
    }
}

.flap {
    position: absolute;
    width: 200px;
    height: 100px;
    background: #007bff;
    top: 0;
    clip-path: polygon(0 0, 100% 0, 50% 75%);
    transition: all 0.3s ease-in-out;
    transform-origin: top;
    transform: rotateX(180deg);
    animation: close-flap 1s 1s forwards;
}

.flap-2 {
    position: absolute;
    width: 200px;
    height: 100px;
    background: #eae4e4;
    top: 0;
    clip-path: polygon(0 0, 100% 0, 50% 75%);
}

.letter {
    position: absolute;
    width: 180px;
    height: 80px;
    top: 10px;
    left: 10px;
    z-index: -1;
}

@keyframes close-flap {

    0% {
        transform: rotateX(180deg);
    }

    100% {
        transform: rotateX(0deg);
        display: none;
    }
    
}

@keyframes desplazar-envelope {

    0% {
        transform: translateX(0px) rotate(-5deg);
        box-shadow: -10px 5px 20px rgba(0, 0, 0, 0.8);
    }

    100% {
        transform: translateX(100vw);
        box-shadow: none;
    }
    
}