.background {
  viewport-fill: red;
}

#curMonth {
  font-size: 50;
  font-family: System-Bold;
  text-length: 32;
  text-anchor: middle;
  x: 40%;
  y: 15%+30;
  fill: black;
}
#curDay {
  font-size: 50;
  font-family: System-Bold;
  text-length: 32;
  text-anchor: middle;
  x: 60%;
  y: 15%+30;
  fill: black;
}

#curTime {
  font-size: 76;
  font-family: System-Bold;
  text-length: 32;
  text-anchor: middle;
  x: 40%;
  y: 35%+30;
  fill: white;
}
#clockShadow { 
  font-size: 76;
  font-family: System-Bold;
  text-length: 32;
  text-anchor: middle;
  x: 40%+5;
  y: 35%+35;
  opacity: 0.5;
  fill: black;
}
#amPm {
  font-size: 50;
  font-family: System-Bold;
  text-length: 32;
  text-anchor: middle;
  x: 75%;
  y: 35%+30;
  fill: white;
}
#amPmShadow { 
  font-size: 50;
  font-family: System-Bold;
  text-length: 32;
  text-anchor: middle;
  x: 75%+5;
  y: 35%+30;
  opacity: 0.5;
  fill: black;
}

#curTemp {
  font-size: 16;
  font-family: System-Bold;
  text-length: 22;
  text-anchor: start;
  x: 30;
  fill: black;
}
#weatherImg {
  width:25;
  height:25;
}

#curHumidity {
  font-size: 16;
  font-family: System-Bold;
  text-length: 22;
  x: 78;
  fill: black;
}

#steps {
  font-size: 25;
  font-family: System-Bold;
  text-length: 32;
  text-anchor: start;
  x: 35;
  fill: white;
}
#stepsImg {
  width: 30;
  height: 30;
  fill: red;
}

#calories {
  font-size: 25;
  font-family: System-Bold;
  text-length: 32;
  text-anchor: start;
  x: 35;
  fill: white;
}
#caloriesImg {
  width:30;
  height:30;
 fill: orange;
}

#batLvl {
  font-size: 16;
  font-family: System-Bold;
  text-length: 16;
  text-anchor: end;
  x: 83%;
  y: 23;
  fill: red;
}

#batImg {
  width:"15%";
  height:"5%";
  text-anchor: end;
  x: 70%;
  y: 10;
}

#heartRate {
  font-size: 26;
  font-family: System-Bold;
  text-length: 26;
  text-anchor: start;
  x: 8%;
  y: 58%;
  fill: white;
}

#heart {
  width:"25%";
  height:"15%";
  text-anchor: start;
  opacity: .8;
  x: 6%;
  y: 49%;
}