Metrics not showing on watchface

[rothstradamus04]

First attempt at making a watch face and I have 0 coding experience. I'm using this file- https://github.com/gpfrello/FitbitOS-Really-Basic - as a basis to add in HR, steps and battery level to a watch face I'm developing. Have added in the app/index.js and common/utils.js as well as resources/styles.css and resources/300x300~styles.css folders to my face already. Problem is, none of these metrics are showing up overtop of my background image.

Coding is all below!

styles.css is 

.background {
  viewport-fill: red;
}

#myLabel {
  font-size: 48;
  font-family: Fabrikat;
  text-length: 32;
  text-anchor:middle;
  x: 50%;
  y: 92%;
  fill: red;
}
#heartrateLabel {
  font-size: 24;
  font-family: System-Bold;
  text-length: 3;
  text-anchor: middle;
  x: 15;
  y: 250;
  fill: white;

}
#stepsLabel {
  font-size: 24;
  font-family: System-Bold;
  text-length: 10;
  text-anchor: start;
  x: 260;
  y: 270;
  fill: white;
}


{
  "fitbit": {
    "appType": "app",
    "appDisplayName": "HR-Meter",
    "wipeColor": "#e91e63",
    "requestedPermissions": [
      "access_heart_rate"
    ],
    "buildTargets": [
      "higgs",
      "meson"
    ]
  }
}

styles~300x300.css is:

.background {
  viewport-fill: black;
}

#timeLabel {
  font-size: 70;
  font-family: System-Bold;
  text-length: 8;
  text-anchor: start;
  x: 15;
  y: 100;
  fill: grey;
}

#heartrateLabel {
  font-size: 50;
  font-family: System-Bold;
  text-length: 3;
  text-anchor: middle;
  x: 20%;
  y: 80%;
  fill: red;
}

#batteryLabel {
  font-size: 15;
  font-family: System-Bold;
  text-length: 32;
  text-anchor: start;
  x: 5%;
  y: 5%;
  fill: blue;
}


#stepsLabel {
  font-size: 20;
  font-family: System-Bold;
  text-length: 10;
  text-anchor: start;
  x: 50%;
  y: 80%;
  fill: white;
}

Coding for the index.gui is as follows 

<svg class="background">
  <image href="Stayontarget.jpg" />
   <image href="rebels.png" x="05" y="250" width="30" height="30" />
   <image href="tiefightr.png" x="270" y="225" width="30" height="30" />
   <image href="xwing.png" x="270" y="270" width="30" height="30" />
  <text id="myLabel"></text>
  <text id="timeLabel"/>
  <text id="dateLabel" />
  <text id="heartrateLabel" />
  <text id="batteryLabel" />
  <text id="stepsLabel" />
</svg>