Scaling method and structure refactor

- Unify scaling method based on image height instead of individual elements for better iteration control.

- Restructure layout method to reduce reliance on manual grid definitions, remove unnecessary grid blocks, and improve dynamic layout for simpler iteration

- Breaks layout, needs new polish pass

index.html

@@ -14,6 +14,7 @@
     <main>
       <div class='contentContainer'>
         <img id='MainHeart' src='src/youve_got_mail_whiteheart.png'>
+        <div class='infoWrap'>
           <div class='infoGroup'>
             <div class='infoBox' id='InfoBox1'>
               <h1 id='Timer'>
@@ -31,7 +32,7 @@
                 Discord Watch Party + Puzzles
               </h3>
               <p id='GoalProgress'>
-              1524/3000 Points
+                1/25 Points
               </p>
             </div>
             <div class='infoBox' id='InfoBox3'>
@@ -65,6 +66,7 @@
             </div>
           </div>
         </div>
+      </div>
     </main>
   </body>
 </html>

timer.css

@@ -27,27 +27,27 @@ main {
 
 h1 {
   margin: 0;
-  font-size: 68cqh;
+  font-size: 3.6em;
   color: #404145;
   font-weight: normal;
-  font-style: normal;
 }
 
 h2 {
   margin: 0;
-  font-size: 40cqh;
+  font-size: 1em;
   color: #404145;
 }
 
 h3 {
   margin: 0;
-  font-size: 16cqh;
+  font-size: 1em;
   color: #404145;
+  font-weight: normal;
 }
 
 p {
   margin: 0;
-  font-size: 20cqh;
+  font-size: 1em;
 }
 
  .contentContainer {
@@ -62,7 +62,7 @@ p {
   max-width: 100vw;
  }
 
-.infoGroup {
+.infoWrap {
   container-type: size;
   height: 100%;
   width: 100%;
@@ -71,67 +71,87 @@ p {
   top: 0px;
   display: grid;
   grid-template-columns: 56% 34% 1fr;
+  /*
   grid-template-rows: 11% 28% 16% 16% 1fr;
+  */
+  grid-template-rows: 11% 1fr 29%;
   place-items: center;
+  text-wrap: nowrap;
 }
 
-.infoBox {
-  container-type: size;
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  grid-auto-rows: auto;
-  place-items: center;
-  font-size: 10cqh;
-}
-
-#InfoBox1 {
+.infoGroup {
+  display: block;
+  height: 100%;
   width: 100%;
   grid-column-start: 2;
   grid-column-end: 2;
   grid-row-start: 2;
   grid-row-end: 2;
+}
+
+.infoBox {
+  height: auto;
+  width: 100%;
+  /*
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-auto-rows: auto;
+  place-items: center;
+  */
+  font-size: 4cqh;
+  overflow: hidden;
+}
+
+#InfoBox1 {
+  /*
   justify-self: left;
   align-self: stretch;
+  */
+  /*
   transform: translate(-8%, 5%);
+  */
 }
 
 #InfoBox2 {
+  /*
   display: grid;
   width: 100%;
-  grid-column-start: 2;
-  grid-column-end: 2;
-  grid-row-start: 3;
-  grid-row-end: 3;
   justify-self: left;
   align-self: stretch;
   transform: translate(6%, -24%);
+  */
 }
 
 #InfoBox3 {
   width: 100%;
-  grid-column-start: 2;
-  grid-column-end: 2;
-  grid-row-start: 4;
-  grid-row-end: 4;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 23% 23% 23%;
+  /*
   justify-self: left;
   align-self: stretch;
   transform: translate(0%, -32%);
+  */
+}
+
+#Timer {
+  /*
+  transform: translate(3%, 0%);
+  */
 }
 
 #TimerInfo {
-  transform: translate(0%, -175%);
-  font-size: 9cqh;
+  transform: translate(0%, -60%);
+  font-size: 1em;
+  display: none;
 }
 
 #GoalLabel {
-  transform: translate(0%, -20%);
+  transform: translate(0%, 0%);
 }
 
 #GoalName {
   width: 85%;
-  transform: translate(10%, -110%);
+  transform: translate(0%, 0%);
   color: #32B993;
   text-wrap: nowrap;
   overflow: hidden;
@@ -139,10 +159,16 @@ p {
 }
 
 #GoalProgress {
-  transform: translate(0%, -75%);
-  border-radius: 8cqh;
-  border: 2cqh solid;
+  width: fit-content;
+  padding-left: .5cqh;
+  padding-right: .5cqh;
+  transform: translate(0%, 0%);
+  border-radius: 3cqh;
+  border: .4cqh solid;
   border-color: #404145;
+  font-size: .9em;
+  text-align: center;
+  margin: 0 auto 0 auto;
 }
 
 .giftUserRow {
@@ -154,7 +180,7 @@ p {
   overflow: hidden;
   text-align: left;
   justify-self: left;
-  transform: translate(18%, 0%);
+  transform: translate(0%, 0%);
 }
 
 .giftUserName {