/* to remove */
:root {
    --envelope-color: white;
    --card-color: white;
}

#card-layer {
    display: none;
}

#invite {
    opacity: 0.0;
}

#envelope {
    background-color: var(--envelope-color);
    width: 75%;
    aspect-ratio: 7 / 5;
    /* overflow: hidden; */
    display: grid;
    grid-template-columns: 1fr;
    filter: drop-shadow(0.25rem 0.25rem 0.75rem #000000be);
    z-index: 0;
    line-height: 0px;
    max-width: 700px;
    /* transition: all 0.15s; */
}

#env-card h3 img {
    max-width:100%;
    max-height: 100%;
}

#envelope div {
    grid-row-start: 1;
    grid-column-start: 1;
    z-index: 10;
}

#envelope label {
    grid-row-start: 1;
    grid-column-start: 1;
}

input#flap {
    display: none;
}


.left svg polygon {
    fill: var(--envelope-color);
    stroke: var(--envelope-color);
    stroke-width: 2;
    stroke-linejoin: round;
    /* filter: drop-shadow(0.25rem -0.25rem 0.75rem #00000028) brightness(97%); */
}

.right svg polygon {

    fill: var(--envelope-color);
    stroke: var(--envelope-color);
    stroke-width: 2;
    stroke-linejoin: round;
    filter: drop-shadow(0.25rem -0.25rem 0.75rem #00000028) brightness(0.93);    
    /* -webkit-filter: drop-shadow(0.25rem -0.25rem 0.75rem #00000028) brightness(0.93);     */
}

.bottom svg polygon {
    fill: var(--envelope-color);
    stroke: var(--envelope-color);
    stroke-width: 10;
    stroke-linejoin: round;
    /* filter: brightness(95%) drop-shadow(0rem -0.0rem 0.5rem #00000020) */
}

.flap svg polygon {
    fill: var(--envelope-color);
    stroke: var(--envelope-color);
    stroke-width: 10;
    stroke-linejoin: round;
    /* filter: drop-shadow(0.25rem 0.25rem 0.75rem #00000022) brightness(98%);; */
    transform: rotateX(0deg);
    transition: all 0.1s;
    cursor: pointer;
    pointer-events: all;
}

.flap {
    transform-origin: top center;
    transition: all 0.1s;
    transition-delay: 0.1s;
    pointer-events: none;
    z-index: 20;
}

.flap svg polygon:hover {
    filter: drop-shadow(0.25rem 0.25rem 0.75rem #00000028);
    transform: rotateX(20deg);
}

#flap:checked+.flap {
    transform: rotateX(180deg);
    filter: drop-shadow(0.25rem 0.25rem 0.75rem #0000000c);
    z-index: 0;
    transition-delay: 0.0s;
}

#env-card {
    background-color: var(--card-color);
    grid-row-start: 1;
    grid-column-start: 1;
    /* width: 95%; */
    /* height: 95%; */
    margin: 2.5%;
    z-index: 5;
    filter: drop-shadow(0.25rem 0.25rem 0.75rem #0000000c);
    transition: all 0.15s;
    transition-delay: 0.0s;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    word-break: break-word;
    line-height: 1.0;

    overflow: hidden;
    padding: 1%;
}


#flap:checked~#env-card {
    transform: translateY(-25vh);
    filter: drop-shadow(2px 7px 2px #0000002d);
    transition-delay: 0.1s;
}

/* polygon {
    fill: url(#img1)!important;
    stroke-width: 0!important;
} */

.animateFadeInZoom {
    opacity: 1;
    -webkit-animation: fadeInZoom 0.1s forwards; /* for less modern browsers */
    animation: fadeInZoom 0.1s linear 0.0s 1 normal forwards;
}

@keyframes fadeInZoom {
    from {
        transform: scale(0.75);
    }

    to {

        transform: scale(1);
        opacity: 1
    }
}




.animateFadeOutDown {
    -webkit-animation: fadeOutDown 0.1s forwards; /* for less modern browsers */
    animation: fadeOutDown 0.1s linear 0.0s 1 normal forwards;

}

@keyframes fadeOutDown {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {

        transform: translate3d(0, 40px, 0);
        opacity: 0
    }
}






/*from tablet down*/
@media screen and (max-width: 768px) {

    #flap:checked~#env-card {
        transform: translateY(-15vh);
        filter: drop-shadow(2px 7px 2px #0000002d);
        transition-delay: 0.1s;
    }

}