body {
  display:flex;
  height: 100vh;
  margin: auto;
  background-color: #000000;
  font-family: 'Exo 2', sans-serif;
}

/* Divs */

#clock {
  position: absolute;
  background-image: url("images/clock-face.svg");
  width: 100vmin; /* 80% of the minimum of the viewport's height or width */
  height: 100vmin;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #05151b;
  border: 1px solid #ffffff3e;
  border-radius: 10%;
 /* font-size: 1.5vmin;  1.5% of the minimum of the viewport's height or width */
}

#sunrise {
  position: absolute;
}

#sunset {
  position: absolute;
}

#sunriseIcon {
  transform: translateY(-30px) scale(1.5,1.5);
}

#sunsetIcon {
  transform: translateY(-30px) scale(1.5,1.5);
}

#currentTimeHand {
  position: absolute;
  width: 4px;
  height: 50%;
  background-color: #ff0000; /* Adjust the color as needed */
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(0deg);
  z-index: 2; /* Ensure the hand is above the clock face and lines */
}

#currentTimeHand::before {
  content: '';
  position: absolute;
  width: 10px; /* Adjust the size of the arrowhead as needed */
  height: 10px; /* Adjust the size of the arrowhead as needed */
  background-color: #ff0000; /* Adjust the color as needed */
  border-radius: 50%;
  top: 10px; /* Change from bottom to top */
  left: 50%;
  transform: translateX(-50%) translateY(-100%) rotate(45deg); /* Adjust the rotation */
}

/* Classes */

.marker {
  position: absolute;
  font-size: 1.5vmin;
  color: white;
  text-align: center;
}

.icon {
  position: absolute;
  width: 25px; /* Adjust the size as needed */
  height: 25px; /* Adjust the size as needed */
}

.sunriseLine {
  position: absolute;
  width: 2px;
  height: 50%;
  background-color: #00eeff; /* Adjust the color as needed */
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(0deg);
  z-index: 1; /* Ensure the hand is above the clock face and lines */
}

.sunsetLine {
  position: absolute;
  width: 2px;
  height: 50%;
  background-color: #ffbf00; /* Adjust the color as needed */
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(0deg);
  z-index: 2; /* Ensure the hand is above the clock face and lines */
}

.prayerMarker {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #00ff00; /* Adjust the color as needed */
  z-index: 1; /* Ensure the marker is above the clock face */
}