html {
    background-color: unset;
}

/* moves envelop in-line*/
.on-page {
    position: unset;
    width: unset;
    height: unset;
    padding: unset;
}

/* anything within a screen element has pointer events */
/* .screen * {
    pointer-events: auto;
} */

#empty-modal {
    transition: all 1s;
}

#envelope-layer {
    z-index: 99;
}

#envelope-layer.active {
    pointer-events: auto;
}

#card-layer {
    pointer-events: auto;
    z-index: 100;
}

#card-layer {
    display: none;
    position: fixed;
    opacity: 1;
    transition: opacity 0.1s,
        background-color 0.2s;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    z-index: 100;
    transform-origin: top;
    top: 0px;
    width: 100vw;
    height: 100vh;
    justify-content: unset;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-top: calc(2vw + 3.25vw);
}

.sub-card {
    opacity: 0;
}

.paper {
    filter: drop-shadow(1rem 5rem 2rem #00000088);
}


#card-layer, #envelope-layer  {
    opacity: 0;
    transition: opacity 0.1s;
}
#card-layer.active, #envelope-layer.active {
    opacity: 1;
}



@media only screen and (max-width: 600px) {
    #card-layer {
        padding-top: 6rem;
    }
}