Completed v2

- aligned elements to graphic

- minimized wasted space (lots of small manual adjustments)

- extra wrappers for better formatting

- tested various text lengths to ensure static elements sizing

index.html

@@ -33,17 +33,18 @@
               </h3>
               <div id='GoalProgressWrap'>
                 <p id='GoalProgress'>
-                  0000/0000 Points
+                  1234/5678
                 </p>
               </div>
             </div>
             <div class='infoBox' id='InfoBox3'>
               <h2 id='TopUsers'>
-                Top 3:
+                Leaderboard
               </h2>
+              <div class='giftUserWrap'>
                 <div class='giftUserRow' id='GiftUserRow1'>
                   <p class='giftUserNum' id='GiftUserNum1'>
-                  1.
+                    1
                   </p>
                   <p class='giftUserName'id='GiftUserName1'>
                     Usernamethatisverylong
@@ -51,7 +52,7 @@
                 </div>
                 <div class='giftUserRow' id='GiftUserRow2'>
                   <p class='giftUserNum' id='GiftUserNum2'>
-                  2.
+                    2
                   </p>
                   <p class='giftUserName'id='GiftUserName2'>
                     Usernamethatisverylong
@@ -59,7 +60,7 @@
                 </div>
                 <div class='giftUserRow' id='GiftUserRow3'>
                   <p class='giftUserNum' id='GiftUserNum3'>
-                  3.
+                    3
                   </p>
                   <p class='giftUserName'id='GiftUserName3'>
                     Usernamethatisverylong
@@ -69,6 +70,7 @@
             </div>
           </div>
         </div>
+      </div>
     </main>
   </body>
 </html>

timer.css

@@ -125,6 +125,7 @@ p {
 #InfoBox3 {
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 23% 23% 23%;
+  transform: translate(0%, -16%) scale(1, 1);
   /*
   justify-self: left;
   align-self: stretch;
@@ -147,68 +148,72 @@ p {
 }
 
 #GoalName {
-  width: 95%;
+  width: 100%;
   transform: translate(8%, -10%) scale(1, 1.4);
   color: #32B993;
   text-wrap: nowrap;
   overflow: hidden;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+  mask-image: linear-gradient(to right, black 85%, transparent 100%);
 }
 
 #GoalProgressWrap {
   width: fit-content;
-  padding-left: .5cqh;
-  padding-right: .5cqh;
-  transform: translate(6%, 0%) scale(1, 1.2);
+  padding-left: .8cqh;
+  padding-right: .8cqh;
+  transform: translate(7%, 0%) scale(1, 1);
   border-radius: 3cqh;
   border: .4cqh solid;
   border-color: #404145;
-  font-size: .9em;
-  text-align: center;
   margin: 0 auto 0 auto;
 }
 
 #GoalProgress {
-  /*
-  width: fit-content;
-  padding-left: .5cqh;
-  padding-right: .5cqh;
-  transform: translate(6%, 0%) scale(1, 1.2);
-  border-radius: 3cqh;
-  border: .4cqh solid;
-  border-color: #404145;
-  font-size: .9em;
+  transform: translate(0%, -8%) scale(1, 1.4);
+  font-size: 1.3em;
   text-align: center;
-  margin: 0 auto 0 auto;
-  */
+  font-weight: bold;
+}
+
+#TopUsers {
+  transform: translate(6%, 0%) scale(1.2, 1.2);
+  font-weight: normal;
+  font-size: 1.1em;
+}
+
+.giftUserWrap {
+  transform: translate(18%, -8%) scale(1, 1);
 }
 
 .giftUserRow {
   width: 100%;
   display: grid;
-  grid-template-columns: 10% 1fr;
+  grid-template-columns: 8% 1fr;
   grid-template-rows: 1fr;
   text-wrap: nowrap;
   overflow: hidden;
   text-align: left;
   justify-self: left;
-  transform: translate(0%, 0%);
+  text-align: center;
+  transform: translate(0%, 0%) scale(1, 1.2);
+  font-size: 1.4em;
+  line-height: 90%;
 }
 
 .giftUserName {
   margin-left: 0%;
   color: #32B993;
+  text-align: left;
 }
 
 #GiftUserName1 {
-  width: 54%;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+  width: 24cqw;
+  mask-image: linear-gradient(to right, black 85%, transparent 100%);
 }
 #GiftUserName2 {
-  width: 46%;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+  width: 20cqw;
+  mask-image: linear-gradient(to right, black 75%, transparent 100%);
 }
 #GiftUserName3 {
-  width: 38%;
-  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+  width: 14cqw;
+  mask-image: linear-gradient(to right, black 60%, transparent 100%);
 }