/* Styling for the clock */
.clock {
  width: 150px; /* Behoud de kleinere klokgrootte */
  height: 150px; /* Proportionele hoogte */
  border: 6px solid rgb(65, 57, 57); /* Dikkere rand voor een robuust uiterlijk */
  border-radius: 50%;
  position: absolute; /* Plaats de klok onafhankelijk */
  top: 20px; /* Afstand vanaf de bovenkant */
  right: 50px; /* Afstand vanaf de rechterkant */
  background: #000;
  box-shadow: 
    0px 3px 6px rgba(0, 0, 0, 0.8), /* Externe donkere schaduw */
    inset 0px -3px 6px rgba(255, 255, 255, 0.2); /* Binnenste glans voor 3D-effect */;
}

/* Strepen in de klok */
.marks .mark {
  position: absolute;
  width: 3px; /* Maak de strepen dikker */
  height: 12px; /* Iets langere strepen */
  background: rgb(226, 205, 205); /* Maak de kleur lichter voor betere zichtbaarheid */
  top: 43%; /* Center op de klok */
  left: 50%; /* Center op de klok */
  transform-origin: center bottom; /* Punt van rotatie */
  transform: rotate(0deg) translateY(-62px); /* Plaats op de rand van de cirkel */
}

/* Styling for clock hands */
.hand {
  width: 50%;
  height: 3px; /* Maak de wijzers dikker */
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0% 50%;
  transform: rotate(0deg);
  transition: transform 0.0s linear;
}

/* Hour hand */
.hour {
  width: 30%; /* Proportionele lengte */
  background: rgb(65, 105, 225);
  height: 6px; /* Maak deze wijzer zwaarder */
  z-index: 10;
}

/* Minute hand */
.minute {
  width: 35%; /* Proportionele lengte */
  background: rgb(226, 205, 205);
  height: 4px; /* Maak wijzer dikker */
  z-index: 10;
}

/* Second hand */
.second {
  width: 37%; /* Proportionele lengte */
  background: red;
  height: 2px; /* Maak wijzer iets dikker */
  z-index: 10;
}

/* Styling for clock numbers */
.number {
  position: absolute;
  color: rgb(226, 205, 205); /* Verbeter zichtbaarheid */
  font-size: 20px; /* Kleinere grootte, maar opvallend */
  font-weight: bold;
  text-align: center;
}

/* Styling for the date display */
#date-display {
  position: absolute;
  top: 56%; /* Positie onder het midden */
  left: 67%;
  transform: translate(-50%, -50%) rotate(10deg); /* Bijgehouden aangepaste rotatiehoek */
  color: red; /* Tekst kleur */
  font-size: 14px; /* Iets kleinere tekstgrootte voor balans */
  font-weight: bold;
  background: linear-gradient(145deg, #444, #222); /* Omgekeerde gradient voor indruk-effect */
  padding: 5px 10px; /* Maak de datumbox compact */
  border: 1.5px solid rgba(0, 0, 0, 0.7); /* Dikkere rand */
  border-radius: 5px; /* Gladde hoeken */
  box-shadow: 
    inset 2px 2px 6px rgba(0, 0, 0, 0.8), /* Donkere interne schaduw */
    inset -2px -2px 6px rgba(255, 255, 255, 0.2); /* Lichte interne glans */;
  z-index: 0; /* Zorg dat de box onder de wijzers blijft */
}