:root {
  --first-color: #dbdbd1;
  --second-color: #aa6e1c;
  --third-color: #76b39d;
  --dark-color: rgb(59, 0, 0);
  --box-shadow: 0px 0px 62px 19px rgba(56, 37, 31, 0.75);
  --gradient-1: linear-gradient(
    90deg,
    rgba(235, 216, 109, 1) 0%,
    rgba(255, 154, 154, 1) 50%,
    rgb(72, 167, 159) 100%
  );
}

body {
  background-image: url(time-img.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  font-family: "Handjet", sans-serif, serif, "Playfair";
}
.container-md {
  max-width: 100%;
  margin: 20px auto;
  padding: 10px 10px;
  line-height: 30px;
}
h1 {
  font-size: 60px;
  color: black;
  font-weight: 500;
  border: solid 2px var(--first-color);
  border-radius: 10px;
  text-align: center;
  padding: 20px 20px;
  background: var(--gradient-1);
}

.hoursApp {
  font-size: 20px;
  font-weight: 300;
  width: 65%;
  margin: 10px auto;
  margin-top: 50px;
  padding: 20px 40px;
  background-color: var(--second-color);
  text-align: center;
  border: solid 1px var(--second-color);
  border-radius: 10px;
  color: var(--dark-color);
  box-shadow: var(--bo);
}

.cities {
  color: var(--dark-color);
  background-image: var(--gradient-1);
  margin: 5px auto;
  border: solid 1px var(--third-color);
}
#city {
  font-weight: 400;
  text-transform: uppercase;
}
.num {
  font-size: 26px;
}

#currentClock {
  color: var(--dark-color);
  margin: 10px auto;
  padding: 10px 20px;
  font-size: 30px;
  font-weight: 500;
}