Add UI layout and placeholder graphic

HTML:
- doc structure
- static placeholder content
- add fonts (VT323, Silkscreen)

CSS:
- full v1 styling
- dynamically scales content based on image size
- clean cutoff of overflow text for usernames and goal names

timer.css

@@ -4,33 +4,177 @@
   --background-color: transparent;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 html, body {
   height: 100%;
   margin: 0;
   padding: 0;
-  font-family: 'VT323', sans-serif;
+  font-family: 'Inter', sans-serif;
   background-color: var(--background-color);
   overflow: hidden;
 }
 
-
-.timer-box {
-  height: 175px;
-  width: 397px;
-  padding: 5px;
-}
-
-.timer-time {
-  font-size: clamp(6rem, 22vw, 16rem);
+main {
+  font-family: "VT323", monospace;
   font-weight: 400;
-  color: var(--time-color);
-  line-height: 1;
+  font-style: normal;
+  font-size: 1em;
+  color: #EA4045;
+  height: 100%;
 }
 
-.timer-details {
-  display: fill;
-  font-weight: 600;
-  color: var(--details-color);
-  font-size: 16px;
-  overflow-wrap: break-word;
+h1 {
+  margin: 0;
+  font-size: 68cqh;
+  color: #404145;
 }
+
+h2 {
+  margin: 0;
+  font-size: 40cqh;
+  color: #404145;
+}
+
+h3 {
+  font-family: "Silkscreen", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  margin: 0;
+  font-size: 16cqh;
+  color: #404145;
+}
+
+p {
+  margin: 0;
+  font-family: "Silkscreen", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 20cqh;
+}
+
+ .contentContainer {
+  height: fit-content;
+  width: fit-content;
+  position: relative;
+  text-align: center;
+ }
+
+ #MainHeart {
+  max-height: 100vh;
+  max-width: 100vw;
+ }
+
+.infoGroup {
+  container-type: size;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  display: grid;
+  grid-template-columns: 56% 34% 1fr;
+  grid-template-rows: 11% 28% 16% 16% 1fr;
+  place-items: center;
+}
+
+.infoBox {
+  container-type: size;
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-auto-rows: auto;
+  place-items: center;
+}
+
+#InfoBox1 {
+  width: 100%;
+  grid-column-start: 2;
+  grid-column-end: 2;
+  grid-row-start: 2;
+  grid-row-end: 2;
+  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%);
+}
+
+#TimerInfo {
+  transform: translate(0%, -175%);
+  font-size: 9cqh;
+}
+
+#GoalLabel {
+  transform: translate(0%, -20%);
+}
+
+#GoalName {
+  width: 85%;
+  transform: translate(10%, -110%);
+  color: #32B993;
+  text-wrap: nowrap;
+  overflow: hidden;
+  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+}
+
+#GoalProgress {
+  transform: translate(0%, -75%);
+  border-radius: 8cqh;
+  border: 2cqh solid;
+  border-color: #404145;
+}
+
+.giftUserRow {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 10% 1fr;
+  grid-template-rows: 1fr;
+  text-wrap: nowrap;
+  overflow: hidden;
+  text-align: left;
+  justify-self: left;
+  transform: translate(18%, 0%);
+}
+
+.giftUserName {
+  margin-left: 0%;
+  color: #32B993;
+}
+
+#GiftUserName1 {
+  width: 54%;
+  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+}
+#GiftUserName2 {
+  width: 46%;
+  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+}
+#GiftUserName3 {
+  width: 38%;
+  mask-image: linear-gradient(to right, black 70%, transparent 100%);
+}