@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap");

html, body {
    margin: 0;
    height: 100vh;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;    
}

.envelopeOuter {
    cursor: pointer;
    display: block;
    width:   24rem;
    height:  14rem;
    position: relative;
    background-color: #dbdbdb;
    border-radius: 0.5rem;
    background-image: linear-gradient(to left,
    rgba(51, 41, 31, 0.3) 0%,
    rgba(51, 41, 31, 0.2) 5%,
    rgba(51, 41, 31, 0.1) 12%,
    rgba(51, 41, 31, 0.0) 50%,
    rgba(51, 41, 31, 0.1) 88%,
    rgba(51, 41, 31, 0.2) 95%,
    rgba(51, 41, 31, 0.3) 100%),
linear-gradient(to top,
    rgba(51, 41, 31, 0.20) 0%,
    rgba(51, 41, 31, 0.00) 20%,
    rgba(51, 41, 31, 0.00) 50%,
    rgba(51, 41, 31, 0.10) 88%,
    rgba(51, 41, 31, 0.20) 95%,
    rgba(51, 41, 31, 0.40) 100%),
    url('data:image/png;base64,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');
    background-repeat: repeat;
    background-size: auto;
    
}

  .envelope {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    cursor: pointer;
    display: block;
    width:   24rem;
    height:  14rem;
    background-color: #fffaf7;
    position: relative;
    background-image: linear-gradient(215.5deg,
                                            rgba(  0,   0,   0, 0.0) 0%,
                                            rgba(  0,   0,   0, 0.0) 48%,
                                            rgba(  0,   0,   0, 0.17) 49%,
                                            rgba(225, 215, 205, 0.7) 50%,
                                            rgba(225, 215, 205, 0.0) 51%,
                                            rgba(225, 215, 205, 0.0) 100%),
                linear-gradient(-215.5deg,
                                            rgba(225, 215, 205, 0.0) 0%,
                                            rgba(225, 215, 205, 0.0) 48%,
                                            rgba(225, 215, 205, 0.7) 49%,
                                            rgba(  0,   0,   0, 0.17) 50%,
                                            rgba(  0,   0,   0, 0.0) 51%,
                                            rgba(  0,   0,   0, 0.0) 100%),
                linear-gradient(-217.5deg,
                                            rgba(  0,   0,   0, 0.0) 0%,
                                            rgba(  0,   0,   0, 0.0) 48%,
                                            rgba(  0,   0,   0, 0.23) 49%,
                                            rgba(225, 215, 205, 0.5) 50%,
                                            rgba(225, 215, 205, 0.0) 51%,
                                            rgba(225, 215, 205, 0.0) 100%),
                linear-gradient(217.5deg,
                                            rgba(225, 215, 205, 0.0) 0%,
                                            rgba(225, 215, 205, 0.0) 48%,
                                            rgba(225, 215, 205, 0.5) 49%,
                                            rgba(  0,   0,   0, 0.23) 50%,
                                            rgba(  0,   0,   0, 0.0) 51%,
                                            rgba(  0,   0,   0, 0.0) 100%),
                linear-gradient(to left,
                                        rgba(51, 41, 31, 0.3) 0%,
                                        rgba(51, 41, 31, 0.2) 5%,
                                        rgba(51, 41, 31, 0.1) 12%,
                                        rgba(51, 41, 31, 0.0) 50%,
                                        rgba(51, 41, 31, 0.1) 88%,
                                        rgba(51, 41, 31, 0.2) 95%,
                                        rgba(51, 41, 31, 0.3) 100%),
                linear-gradient(to top,
                                        rgba(51, 41, 31, 0.20) 0%,
                                        rgba(51, 41, 31, 0.00) 20%,
                                        rgba(51, 41, 31, 0.00) 50%,
                                        rgba(51, 41, 31, 0.10) 88%,
                                        rgba(51, 41, 31, 0.20) 95%,
                                        rgba(51, 41, 31, 0.40) 100%),
                url('data:image/png;base64,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');
                background-position: 100% 215%,
                    -0% 215%,
                115% -161%,
                    -15% -168%,
                center,
                center,
                center;

                background-size: 12rem 12rem,
                        12rem 12rem,
                        12rem 12rem,
                        12rem 12rem,
                        auto,
                        auto,
                        auto;

                background-repeat: no-repeat,
                            no-repeat,
                            no-repeat,
                            no-repeat,
                            repeat,
                            repeat,
                            repeat;
                box-shadow: 0  1px  0   rgba(255, 255, 255, 0.6) inset,
                            0 -3px  3px rgba(  0,   0,   0, 0.3) inset,
                            0  2px  3px rgba(  0,   0,   0, 0.4),
                            0  6px 12px rgba(  0,   0,   0, 0.2);

                border-radius: 0.5rem;

                text-decoration: none;
            }

            .seal {
                user-select: none;
                display: block;
                width:   4.4rem;
                height:  4.4rem;
              
                position: absolute;
                left:     50%;
                top:      49%;
                margin:   -2.2rem 0 0 -2.2rem;
                border-radius: 2.2rem 1.9rem 2.3rem 2.0rem;
                background:   #e1240b;
                color:        #d22a21;
                border-color: #ed3700;

                box-shadow: 0 -2px 4px rgba(  0,   0,   0, 0.2) inset,
                            0  3px 3px rgba(255, 255, 255, 0.6) inset,
                            0  1px 5px rgba(  0,   0,   0, 0.8);

                text-align: center;
                line-height: 3.7rem;
                font-size:   1.5rem;

                text-shadow: 0.7px 1.5px 2px rgba(0, 0, 0, 0.6);
            }
            .seal .embossed {
                display: block;
                width:   80%;
                height:  80%;
          
                position: absolute;
                top:      10%;
                left:     10%;
                box-shadow: 0  -2px 2px rgba(205, 205, 205, 0.1) inset,
                  0   3px 3px rgba( 30,  30,  30, 0.1) inset,
                  0.7px   0.7px 2px 1px rgba( 30,  30,  30, 0.6) inset;

                border-radius: 999rem;
                background-image: -webkit-linear-gradient(top,
                                                rgba( 51, 51, 51, 0.3) 0%,
                                                rgba( 51, 51, 51, 0.2) 100%);
            }

            .seal:before, .seal:after {
                display: block;
                content: ' ';
                position: absolute;
              
                line-height: 0;
                font-size:   0;
              
                background: inherit;
                overflow:   hidden;
              
                box-shadow: 0 1px 3px rgba(  0,   0,   0, 0.8),
                            0 3px 3px rgba(205, 205, 205, 0.4) inset;
              }

              .seal:after {
                width:   0.7rem;
                height:  0.7rem;
                top:      84%;
                left:     94%;
              
                border-radius: 1rem 0.9rem 0.95rem 0.8rem;
              }
              
              .seal:before {
                width:   0.3rem;
                height:  0.3rem;
                top:      103%;
                left:     85%;
              
                border-radius: 1rem 0.9rem 0.95rem 0.8rem;
              }

              @keyframes shake {
                0% { transform: rotate(0) translateX(0); }
                5% { transform: rotate(-2deg) translateX(-5px); }
                10% { transform: rotate(2deg) translateX(5px); }
                15% { transform: rotate(-2deg) translateX(-5px); }
                20% { transform: rotate(2deg) translateX(5px); }
                25% { transform: rotate(0) translateX(0); }
                100% { transform: rotate(0) translateX(0); }
            }
            .envelope.shake {
                transform-origin: center;
                animation: shake 2.5s linear  infinite;
            }
            
            @keyframes vanish_anim {
                0% {opacity: 1;}

                100% {opacity: 0;}
            }
            .vanish {
                animation: vanish_anim 0.9s linear forwards;
            }
            
            .envelopeOuter.open .flap {
                transform: rotateX(180deg) translate(0, -5px);
                clip-path: polygon(50% 64%, 0% 1%, 99% 1%);
                background-position: 120% 280%,
                                -20% 280%,
                            101% -80%,
                                0% -80%,
                            center,
                            center,
                            center;
            }

            .flap {
                cursor: pointer;
                display: block;
                width:   24rem;
                height:  14rem;
                background-color: #fffaf7;
                position: absolute;
                top:0;
                background-image: linear-gradient(215.5deg,
                                                        rgba(  0,   0,   0, 0.0) 0%,
                                                        rgba(  0,   0,   0, 0.0) 48%,
                                                        rgba(  0,   0,   0, 0.17) 49%,
                                                        rgba(225, 215, 205, 0.7) 50%,
                                                        rgba(225, 215, 205, 0.0) 51%,
                                                        rgba(225, 215, 205, 0.0) 100%),
                            linear-gradient(-215.5deg,
                                                        rgba(225, 215, 205, 0.0) 0%,
                                                        rgba(225, 215, 205, 0.0) 48%,
                                                        rgba(225, 215, 205, 0.7) 49%,
                                                        rgba(  0,   0,   0, 0.17) 50%,
                                                        rgba(  0,   0,   0, 0.0) 51%,
                                                        rgba(  0,   0,   0, 0.0) 100%),
                            linear-gradient(-217.5deg,
                                                        rgba(  0,   0,   0, 0.0) 0%,
                                                        rgba(  0,   0,   0, 0.0) 48%,
                                                        rgba(  0,   0,   0, 0.23) 49%,
                                                        rgba(225, 215, 205, 0.5) 50%,
                                                        rgba(225, 215, 205, 0.0) 51%,
                                                        rgba(225, 215, 205, 0.0) 100%),
                            linear-gradient(217.5deg,
                                                        rgba(225, 215, 205, 0.0) 0%,
                                                        rgba(225, 215, 205, 0.0) 48%,
                                                        rgba(225, 215, 205, 0.5) 49%,
                                                        rgba(  0,   0,   0, 0.23) 50%,
                                                        rgba(  0,   0,   0, 0.0) 51%,
                                                        rgba(  0,   0,   0, 0.0) 100%),
                            linear-gradient(to left,
                                                    rgba(51, 41, 31, 0.3) 0%,
                                                    rgba(51, 41, 31, 0.2) 5%,
                                                    rgba(51, 41, 31, 0.1) 12%,
                                                    rgba(51, 41, 31, 0.0) 50%,
                                                    rgba(51, 41, 31, 0.1) 88%,
                                                    rgba(51, 41, 31, 0.2) 95%,
                                                    rgba(51, 41, 31, 0.3) 100%),
                            linear-gradient(to top,
                                                    rgba(51, 41, 31, 0.20) 0%,
                                                    rgba(51, 41, 31, 0.00) 20%,
                                                    rgba(51, 41, 31, 0.00) 50%,
                                                    rgba(51, 41, 31, 0.10) 88%,
                                                    rgba(51, 41, 31, 0.20) 95%,
                                                    rgba(51, 41, 31, 0.40) 100%),
                            url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAA1CAYAAADRarJRAAAD8GlDQ1BJQ0MgUHJvZmlsZQAAOMuNVd1v21QUP4lvXKQWP6Cxjg4Vi69VU1u5GxqtxgZJk6XpQhq5zdgqpMl1bhpT1za2021Vn/YCbwz4A4CyBx6QeEIaDMT2su0BtElTQRXVJKQ9dNpAaJP2gqpwrq9Tu13GuJGvfznndz7v0TVAx1ea45hJGWDe8l01n5GPn5iWO1YhCc9BJ/RAp6Z7TrpcLgIuxoVH1sNfIcHeNwfa6/9zdVappwMknkJsVz19HvFpgJSpO64PIN5G+fAp30Hc8TziHS4miFhheJbjLMMzHB8POFPqKGKWi6TXtSriJcT9MzH5bAzzHIK1I08t6hq6zHpRdu2aYdJYuk9Q/881bzZa8Xrx6fLmJo/iu4/VXnfH1BB/rmu5ScQvI77m+BkmfxXxvcZcJY14L0DymZp7pML5yTcW61PvIN6JuGr4halQvmjNlCa4bXJ5zj6qhpxrujeKPYMXEd+q00KR5yNAlWZzrF+Ie+uNsdC/MO4tTOZafhbroyXuR3Df08bLiHsQf+ja6gTPWVimZl7l/oUrjl8OcxDWLbNU5D6JRL2gxkDu16fGuC054OMhclsyXTOOFEL+kmMGs4i5kfNuQ62EnBuam8tzP+Q+tSqhz9SuqpZlvR1EfBiOJTSgYMMM7jpYsAEyqJCHDL4dcFFTAwNMlFDUUpQYiadhDmXteeWAw3HEmA2s15k1RmnP4RHuhBybdBOF7MfnICmSQ2SYjIBM3iRvkcMki9IRcnDTthyLz2Ld2fTzPjTQK+Mdg8y5nkZfFO+se9LQr3/09xZr+5GcaSufeAfAww60mAPx+q8u/bAr8rFCLrx7s+vqEkw8qb+p26n11Aruq6m1iJH6PbWGv1VIY25mkNE8PkaQhxfLIF7DZXx80HD/A3l2jLclYs061xNpWCfoB6WHJTjbH0mV35Q/lRXlC+W8cndbl9t2SfhU+Fb4UfhO+F74GWThknBZ+Em4InwjXIyd1ePnY/Psg3pb1TJNu15TMKWMtFt6ScpKL0ivSMXIn9QtDUlj0h7U7N48t3i8eC0GnMC91dX2sTivgloDTgUVeEGHLTizbf5Da9JLhkhh29QOs1luMcScmBXTIIt7xRFxSBxnuJWfuAd1I7jntkyd/pgKaIwVr3MgmDo2q8x6IdB5QH162mcX7ajtnHGN2bov71OU1+U0fqqoXLD0wX5ZM005UHmySz3qLtDqILDvIL+iH6jB9y2x83ok898GOPQX3lk3Itl0A+BrD6D7tUjWh3fis58BXDigN9yF8M5PJH4B8Gr79/F/XRm8m241mw/wvur4BGDj42bzn+Vmc+NL9L8GcMn8F1kAcXi1s/XUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABbmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgrlPw1BAAAFcUlEQVRo3o2auU5rQRBE+yv4CYfv/yMSEhISEhIShISQkBABJDzaUqHjonrmBle2587Sa/Uyru/v76uf5/Tz/Ovn7e3t/Pn09PTv4+Pjd+zr6+v8XWP6TM/t7e3ve1+nvTm/3/UZ/cl1Wvvy8uJnnJ6fn6/q8/PzxJf9/QiBZJSPDuTz+Ph4QfRqDt81LTojrDkVuU8Ea1MSqo36nSR2fX19Jo6H9DsKRtLs+ZqXGOG4C0j79Xj5oknaPu5EuTZcYpyz02jvPTElYfZTlAK5lNT66QU8kGt2jGpea0UHp/du186AtMr9arLVZM+Tw+0eNyd31JUv8bvvUyT84eHhgrAep/r5TuNJisk0JufuM309LSH5WiS+D7y/v99K0gkTk3T6leaoPcIj93A7l1nxfYlzctVjrrokSSew14l52md/Bqz+M296uF6COdv8TkKEpoQcfvCEJJMAEjwyUHENY9BZ8rLlCXcTMcRrjtEEfO0ErQ4A/o5oJAH0/P5dyQlXaDNt7mtIrEtdpsr5/Z5aPoKCtbPJlbNOwUR7MRJrTITrt8MufYBnUQA6t/zAPshNIhGmxI0RzyW0c8QkFEk27evwXJOzrDYWEx40pPq7u7vorIkZ2e/ElJiQUKmtohN4RkeC3EScEEqq57Z5KLWYAhjPSLFjlTCeHdadKCVYLhkxm/A+zdWYC2ACBWnJCdbvX8n3JKlZWkj4O220s2GCgWecFIzDrjC9v7f2mBxKm5XUrsU0qaGi+YMIKyZ2ObtXbA6ZYkjzakKEVATQNqeEzE0lBSMSSN9Ids/g5yZ8UYy0+bB2naJrYrCJUGXlEtehU/DZaYVmTYZKnJOjnT1PeQlzDxE91ase7OjUq8BJky73Ytoac3lWVsrqkh+IWKbW8icX0JQCC8GS9i6CVFLzFCyStLWp1wE+t9+v0l/GkxQ/kj+U8o6UAMmhqI2pnEsRlD0gotcRnPe407//VFJuMqk+naTlBxzJ4903aEJKOY7GlPJOV2oSqTx0IlJhzci7iqoT1LJuduZjDTvh8yroeDrgxQZNhoVOqgfkoJ4HMSARJi9yG3oybdvVm7JMHn4kRZjQ6cjjWiw/mI6RJJWwd8JjaVJOz/2nDoRHV5quzylxs8r4KN2U2srRHUm8YTRJlI7vaciUGJ6DlKs7Fc2MeqnH4sU7JZYg1osbMsaiI+X6EnLPq1VLbupc+fubm5uxHuWYDp4qKu/YJXunIEtcNHdevrnNybHZIfPDJgLShcKqyeQFfNJUkaBdb9x7l17O0R7ppEfa5EceN8Fz3yYlYm5GCXXEwK7TmyLuLp6w2Pb+zkXHzHvkmixb3uUYq87DCjEmje7iyp8I632Syak88gkNkgaYt/u9V+rQeZfa8yIvaCpleVSZw1qKCZPtTg2klH1yjPN5Pok/pwdcyAIjNU130fVI6y+hWWpeHUGh2i2iY2ohCwRJZJWnH2mT0Ly8Ykoo9ZuYHbljorn4/NR7WaHN6vJAhUtK+Nz+a5e5Mf/mRqxLp7gwOXyCS7YGadfSSjLZcg+ewvzqzmjXknbTcCa8+CGqub9wbU2ZoOcgDWFEn1WqnGz+iB9M1zxTv6cmQojjRwoGRyxK1pErtTUSmvjZvq52F1q0v5Si8jbRtZUuCFYXbh6JmRp4Vdbn1urmYZWY7eDPr9o9K0x1Q1pD4fjfWSpdEaYqitc+iYCk9iMtlNUYb+YToNQULI6o2m9DdsXz6ndiYndPW9Otg2/i5dkU2FKnoIucqW03RVzfX8GLAFCvr68nZofsWvEmYvKDVUc3EaRWnv7C4kTuYFbnNN31/v5+JQYmk/C7IuX5freazGxq36WCR0T6fuk/Zj/P1X8GU07lyzj+XAAAAABJRU5ErkJggg==');
                            background-position: 120% 280%,
                                -20% 280%,
                            100% -80%,
                                0% -80%,
                            center,
                            center,
                            center;
            
                            background-size: 12rem 12rem,
                                    12rem 12rem,
                                    12rem 12rem,
                                    12rem 12rem,
                                    auto,
                                    auto,
                                    auto;
            
                            background-repeat: no-repeat,
                                        no-repeat,
                                        no-repeat,
                                        no-repeat,
                                        repeat,
                                        repeat,
                                        repeat;
                            box-shadow: 0  1px  0   rgb(236 56 121 / 60%) inset,
                                        0 -3px  3px rgba(  0,   0,   0, 0.3) inset,
                                        0  2px  3px rgba(  0,   0,   0, 0.4),
                                        0  6px 12px rgba(  0,   0,   0, 0.2);
            
                            border-radius: 0.5rem;
            
                            text-decoration: none;
                            clip-path: polygon(50% 66%, 0% 0%, 98% 0%);
                            transition: all 2.5s;
                            transform-origin: top;
            }
            
            .letterContent {
                -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
                font-family: "Dancing Script", cursive;
                background-color: #fff9f9;
                padding: 1rem;
                box-shadow: 0px 1px 2px;
                height: 180px;
                user-select: none;
            }

            #envelope .letterContent {
                position: absolute;
                top:55%;
                left:50%;
                transform: translate(-50%, 0);
                width: 80%;
                
                display: none;
            }

            .letterContent h2 {
                margin-top: 1rem;
            }

            .clipped_bottom_letter {
                position: absolute;
                top: 0;
                clip-path: polygon(-10% 110%, -10% -10%, 4% 0%, 42.5% 50%, 50% 41%, 57.5% 50%, 100% -6%, 110% 110%);
                box-shadow: 0 -3px  3px rgba(  0,   0,   0, 0.3) inset,
                                        0  2px  3px rgba(  0,   0,   0, 0.4),
                                        0  6px 12px rgba(  0,   0,   0, 0.2);
            }
            .contentBorder {
                height: 100%;
                border: 4px solid #f9434c;
                text-align: center;
                position: relative;
                align-content: center;
                /* overflow: hidden; */
            }

            .signature {
                position: absolute;
                bottom: 1rem;
                right: 2.6rem;
            }
            .signatureUnderline {
                position: absolute;
                bottom: -0.2rem;
                right: -2rem;
                transform: rotate(-20deg);
            }

            .envelopeContentContainer {
                position: relative;
                overflow: hidden;
                height: 200%;
                transform: translateY(-50%);
            }

            @keyframes toBack{
                50% {transform: scale(1);}
                100% {
                    transform: scale(0.7);
                } 
            }

            .animatedTransform {
                transition: transform 1s ease-in-out;
            }
            
            .background {
                animation: toBack 2s ease-in-out forwards;
                pointer-events: none;

            }

            .dec_img {
                position: absolute;
                top: -120px;
                right: -50px;
                height: 350px;
                transform: rotate(334deg) scale(0.35);
                opacity: 0.95;
            }

            @media (max-width: 30rem) {
                body > .envelope, body > .envelopeOuter, body > .letterContent {
                    scale: 0.9;
                }
            }

            .emoji {
                position: absolute;
                font-size: 24px;
                transition: transform 5s cubic-bezier(0.12, 0, 0.39, 0);
                animation: float 0.8s ease-in-out infinite alternate;
                
                pointer-events: none;
                white-space: nowrap;
                font-family: "Cambria", "Cochin", "Georgia", "Times", 'Times New Roman', "serif";
            }

            .backgroundEmoji {
                filter: brightness(1.4) contrast(1.05) sepia(0.4) saturate(0.9);
                z-index: -100;
            }

            .backgroundEmoji::after{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
                opacity: 0.3;
                pointer-events: none;
            }

            @keyframes float {
                0% { translate: 0px 0px; }
                100% { translate: 12px 0px;  }
            }