ajustando convite

convite.html

@@ -14,7 +14,6 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
         integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <!-- minhatura -->
     <link rel="shortcut icon" href="./img/logo-mini.ico" type="image/x-icon">
 </head>
 
@@ -66,7 +65,7 @@ <h1 class="headline">
         </div>
     </section>
     <!-- envelope  -->
-    <section>
+    <section class="sectionConvite">
         <div class="container">
             <div class="envelope-wrapper">
                 <div class="envelope">
@@ -82,6 +81,9 @@ <h1 class="headline">
                 </div>
                 <div class="heart"> <img width="30px" height="30px" pointer="" src="./img/lacre.png" alt=""> </div>
             </div>
+            <div>
+                <h1>* flecha para cima *</h1>
+            </div>
         </div>
         <script>
             const envelope = document.querySelector('.envelope-wrapper');
@@ -181,8 +183,8 @@ <h1 class="linkTitle">Resource</h1>
     <script>
         new window.VLibras.Widget('https://vlibras.gov.br/app');
     </script>
-    <script src="./script.js"></script>
     <script src="./timer.js"></script>
+    <script src="./script.js"></script>
 </body>
 
 </html>

styles/envelope.css

@@ -8,11 +8,13 @@
     --txt-color: #444;
     --heart-color: rgb(252, 8, 231);
   }
-  .container {
-    height: 100vh;
-    display: grid;
+
+  .sectionConvite {
     place-items: center;
   }
+
+
+  .container {}
   .container > .envelope-wrapper {
     background: var(--bg-envelope-color);
     box-shadow: 0 0 40px var(--shadow-color);
@@ -65,7 +67,7 @@
   }
   .heart {
     position: absolute;
-    top: 50%;
+    top: 142%;
     left: 50%;
     width: 15px;
     height: 15px;