@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@100;200;300;400;500;600;700;800;900&display=swap");

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
}

time {
  font-family: "Urbanist", sans-serif;
  font-weight: 300;
  font-size: 7vw;
  padding: 2%;
  background: black;
  display: block;
}

.hours {
  /*   background: lightyellow; */
  color: white;
  font-weight: 400;
  padding-left: 1vw;
  padding-right: 1vw;
  border-radius: 20%;
}

.minutes {
  /*   background: lightpink; */
  color: white;
  font-weight: 400;
  padding-left: 1vw;
  padding-right: 1vw;
  border-radius: 20%;
}

.seconds {
  /*   background: lightblue; */
  color: white;
  font-weight: 400;
  padding-left: 1vw;
  padding-right: 1vw;
  border-radius: 20%;
}

.amOrPM {
  font-weight: 200;
  padding-left: 1vw;
  padding-right: 1vw;
  position: static;
}

span {
  background: black;
  color: white;
  padding-left: 1vw;
  padding-right: 1vw;
}

.month {
  color: white;
}

.dayOfMonth {
  color: white;
}

.year {
  color: white;
}

.dayOfWeek {
  color: white;
}

hr {
  width: 57%;
  margin: 0.15vw;
  border: solid 0.5px;
  /* gradient border fill */
  border-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0)
  );
  border-image-slice: 1;
}