:root {
  --bg-color: #f0f0f0;
  --face-color: rgb(255, 192, 192);
  --border-color: #333;
  --hand-hour: #333;
  --hand-minute: #333;
  --hand-second: #e74c3c;
  --tick-color: #666;
}

.link_main{
    font-family: 'Courier New', Courier, monospace;
    font-style: bold;
	color: rgb(228, 223, 212);
    text-decoration: none;
	top: 0;
	padding: .5rem;
	border: block;
	background-color: rgb(189, 101, 101);
	border-radius: 13px;
	border-width: 3px;
    margin: 3%;
    box-shadow: 0 0 20px
        rgba(0, 0, 0, 0.2);
    top: 0;
  margin: 2rem;
}
.link_main:hover{
    color: #c7c7c7;
    background-color: black;
}

.dark {
  --bg-color: #1e1e1e;
  --face-color: #2b2b2b;
  --border-color: #ccc;
  --hand-hour: #ccc;
  --hand-minute: #ccc;
  --hand-second: #e74c3c;
  --tick-color: #888;
}
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  transition: background 0.3s;
  font-family: sans-serif;
  flex-direction: column;
}
.clock {
  position: relative;
  width: 300px;
  height: 300px;
  background: var(--face-color);
  border: 8px solid var(--border-color);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.hand {
  position: absolute;
  width: 50%;
  height: 6px;
  top: 50%;
  left: 50%;
  transform-origin: 0% 50%;
  border-radius: 3px;
}
.hand.hour   { height: 8px; width: 35%; background: var(--hand-hour); }
.hand.minute { background: var(--hand-minute); }
.hand.second { background: var(--hand-second); height: 4px; }
.center-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--border-color);
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  z-index: 10;
}
.tick {
  position: absolute;
  width: 4px;
  height: 12px;
  background: var(--tick-color);
  top: 0;
  left: 50%;
  transform-origin: 50% 150px;
}
.tick.minor {
  height: 8px;
  width: 2px;
}
.toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 8px 12px;
  background: var(--face-color);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  color: var(--border-color);
  user-select: none;
  transition: background 0.3s, color 0.3s;
}