#wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center; /* vertically center the envelope */
    position: relative;
}

.envelope {
    width: 500px; /* 2.5× original 200px */
    height: 250px; /* 2.5× original 100px */
    margin: 0px auto 0; /* 2.5× original 130px */
    background: #ddd;
    box-shadow: 0 0 2.5px rgba(0,0,0,0.5), 0 2.5px 7.5px rgba(0,0,0,0.25);
    position: relative;
    perspective: 800px;
}

    .envelope:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border: 0 solid rgba(0,0,0,0.25);
        border-width: 112.5px 250px; /* 2.5× original 45px 100px */
        border-top-color: transparent;
        z-index: 2;
    }

    .envelope .flap {
        position: absolute;
        width: 100%;
        height: 0;
        border: 0 solid transparent;
        border-width: 125px 250px; /* 2.5× original 50px 100px */
        z-index: 3;
    }

        .envelope .flap.front {
            border-left-color: #eee;
            border-right-color: #eee;
            border-bottom-color: #ccc;
            z-index: 3;
        }

            .envelope .flap.front:after {
                content: '';
                width: 100%;
                height: 0;
                position: absolute;
                left: -250px; /* 2.5× original 100px */
                bottom: -125px; /* 2.5× original 50px */
                border: 0 solid transparent;
                border-width: 122.5px 250px; /* 2.5× original 49px 100px */
                border-bottom-color: #eee;
            }

        .envelope .flap.top {
            border-top-width: 137.5px; /* 2.5× original 55px */
            border-top-color: #aaa;
            z-index: 3;
            animation-duration: 1s;
            animation-fill-mode: forwards;
            -webkit-transform-origin-y: top;
            transform-origin-y: top;
            perspective: 800;
            transform-style: preserve-3d;
        }

    .envelope.open .flap.top {
        animation-name: flip;
    }

    .envelope .flap.top:after {
        content: '';
        position: absolute;
        left: -250px; /* 2.5× original 100px */
        top: -137.5px; /* 2.5× original 55px */
        width: 100%;
        height: 0;
        border: 0 solid transparent;
        border-width: 135px 250px; /* 2.5× original 54px 100px */
        border-top-color: #eee;
    }

    .envelope .letter {
        position: absolute;
        width: 481px; /* 2.5× original 194px */
        height: 210px; /* 2.5× original 84px */
        background: #fff;
        top: 20px; /* 2.5× original 8px */
        left: 7.5px; /* 2.5× original 3px */
        border: 1px solid #ccc;
        z-index: 1;
        animation-duration: 2s;
        animation-delay: 1.5s;
        animation-fill-mode: forwards;
        transform-style: preserve-3d;
    }

    .envelope.open .letter {
        animation-name: remove;
    }

    .envelope .letter:before,
    .envelope .letter:after {
        content: '';
        position: absolute;
        width: 480px; /* 2.5× original 192px */
        height: 75%;
        left: 0px; /* 2.5× original -1px */
        background: #fff;
        border: 1px solid #ccc;
        animation-duration: 1s;
        animation-delay: 4s;
        animation-fill-mode: forwards;
        -webkit-transform-origin-y: top;
        transform-origin-y: top;
        transform-style: preserve-3d;
        transform: rotateX(10deg);
    }

    .envelope .letter:before {
        z-index: 1;
    }

    .envelope.open .letter:before {
        animation-name: fold-up;
    }

    .envelope .letter:after {
        animation-delay: 5s;
        animation-fill-mode: forwards;
        -webkit-transform-origin-y: bottom;
        transform-origin-y: bottom;
        transform: rotateX(-5deg);
        bottom: 0;
    }

    .envelope.open .letter:after {
        animation-name: fold-down;
    }

@keyframes flip {
    100% {
        transform: rotateX(180deg);
        z-index: 1;
    }
}

@keyframes remove {
    50% {
        top: -300px; /* 2.5× original -120px */
    }

    100% {
        top: 20px; /* 2.5× original 8px */
        z-index: 3;
    }
}

@keyframes fold-up {
    from {
    }

    to {
        transform: rotateX(140deg);
    }
}

@keyframes fold-down {
    from {
    }

    to {
        transform: rotateX(-140deg);
    }
}

#reset {
    background: #eee;
    display: inline-block;
    margin-top: -250px; /* 2.5× original -100px */
    text-align: center;
    padding: 25px 50px; /* 2.5× original 10px 20px */
    border: 1px solid #ddd;
    border-radius: 62.5px; /* 2.5× original 25px */
    background: linear-gradient(#eee, #ccc);
    color: #333;
    text-shadow: 0 1px 0 #fff;
    cursor: pointer;
    float: right;
}

    #reset:hover {
        opacity: 0.8;
    }

    #reset:active {
        background: linear-gradient(#ccc, #eee);
    }

.NamePicked {
    width: 100%;
    justify-items: center;
    text-align: center;
    font-size: 80px;
    margin-top: 9%;
    font-family: 'ChristmasBell', sans-serif;
}

.button-frame {
    background: #cc0000;
    border-radius: 50%;
    box-shadow: 0 0 8em rgba(189, 246, 163, .75), 0 0 8em rgba(189, 246, 163, .75), 0 0 .25em rgba(0, 0, 0, .9), inset 0 .25em .125em rgba(255, 255, 255, .3), inset 0 -.25em .125em rgba(0, 0, 0, .3);
    display: block;
    height: 5.8em;
    width: 5.8em;
    padding: .55em;
    position: absolute; /* absolute inside envelope */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* perfect center */
    z-index: 20;
}

.the-button {
    border-radius: 50%;
    box-shadow: 0 0 .5em rgba(0,0,0,1), inset 0 .25em .3em rgba(255,255,255,.3), inset 0 -.25em .3em rgba(0,0,0,.5);
    cursor: pointer;
    font: inherit;
    height: 100%;
    width: 100%;
    position: relative;
}

    .the-button:before {
        background: linear-gradient(to bottom, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
        border-radius: 50%;
        content: " ";
        height: 80%;
        width: 80%;
        left: 10%;
        top: 10%;
        position: absolute;
    }

    .the-button:active {
        box-shadow: 0 0 .5em rgba(0,0,0,1), inset 0 .1em .3em rgba(0,0,0,.5), inset 0 -.1em .3em rgba(0,0,0,.5);
    }

        .the-button:active:before {
            top: 11.5%;
        }

.button-frame.fade-out {
    animation: fadeOutShrink 0.5s forwards; /* 0.5s animation */
}

@keyframes fadeOutShrink {
    0% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

.Open-text {
    color: #ccc;
    font-weight: 700;
    justify-content: center;
    display: flex;
    padding-top: 20px;
    font-size: 20px;
}

.snowflake {
    color: #fff;
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px #000;
}

    .snowflake, .snowflake .inner {
        animation-iteration-count: infinite;
        animation-play-state: running
    }

@keyframes snowflakes-fall {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(110vh)
    }
}

@keyframes snowflakes-shake {
    0%, 100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(80px)
    }
}

@media (max-width: 768px) {
    .envelope {
        width: 300px; /* 1.5x original 200px */
        height: 150px; /* 1.5x original 100px */
        margin: 0px auto 0; /* adjust top margin for smaller envelope */
    }

        .envelope:after {
            border-width: 67.5px 150px; /* 1.5x original 45px 100px */
        }

        .envelope .flap {
            border-width: 75px 150px; /* 1.5x original 50px 100px */
        }

            .envelope .flap.front:after {
                left: -150px;
                bottom: -75px;
                border-width: 73.5px 150px; /* 1.5x original 49px 100px */
            }

            .envelope .flap.top {
                border-top-width: 82.5px; /* 1.5x original 55px */
            }

                .envelope .flap.top:after {
                    left: -150px;
                    top: -82.5px;
                    border-width: 81px 150px; /* 1.5x original 54px 100px */
                }

        .envelope .letter {
            width: 288px; /* 1.5x original 194px */
            height: 126px; /* 1.5x original 84px */
            top: 12px; /* 1.5x original 8px */
            left: 4.5px; /* 1.5x original 3px */
        }

            .envelope .letter:before,
            .envelope .letter:after {
                width: 288px; /* 1.5x original 192px */
                left: -1.5px; /* 1.5x original -1px */
            }

    .button-frame {
        height: 3.8em;
        width: 3.8em;
        padding: .45em;
    }

    .Open-text {
        padding-top: 11px;
        font-size: 12px;
    }

    .NamePicked {
        font-size: 50px;
        margin-top: 8%;
    }
}