.clock {
  text-align: center;
  justify-content: center;
  font-size: min(20vw, 20vh);
  color: white;
  width: 100%;
  font-weight: 500;
  flex-direction: row;
  display: flex;
  height: min(22vw, 22vh);
  transition: 0.5s;
}

.analogue{
  height: auto;
  stroke: white;
  stroke-width: 10px;
  aspect-ratio: 1 / 1;

  transition: 0.5s;

  #a-sec, #ea-sec {
    stroke-width: 2.5px;
  }
}

.analogue:hover {
  transform: scale(1.15);
}

.clock-hand {
  stroke-width: 2px;
  fill: black;
  transition: transform 0.05s, fill 0.5s;
}

.clock-centre {
  stroke: white;
  fill: black;
}

.min-panel {
  stroke-width: 1px;
}

.min-centre {
  stroke-width: 2px;
}

.analogue:hover .clock-hand {
  fill: white;
}

.elapsed {
  text-align: center;
  justify-content: center;
  font-size: min(10vw, 10vh);
  color: white;
  width: 100%;
  font-weight: 500;

  flex-direction: row;
  display: flex;
  height: min(11vw, 11vh);
}

@media (max-width: 1180px) {
  .clock {
    flex-direction: column;
    height: min(77vw, 77vh);
  }
  .clock .digital {
    font-size: min(15vw, 15vh);
  }
  .elapsed {
    height: min(9vw, 9vh);
    font-size: min(8vw, 8vh)
  }
}

body>main {
  margin: 0;
  box-sizing: content-box;
  width: 90%;
  height: auto;
  padding: 0 5%;
  background-color: #00000000;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;

  transition: 0.5s;
}

body {
  background: #000000;
  height: 100%;
  align-items: center;
  justify-items: stretch;
  transition: 0.5s;
}

.fixed-pos {
  position: fixed;
  bottom: 10px;
  left: 10px;
  right: auto;
  justify-content: space-around;
  align-content: center;
  background-color: #ffcf43;
  border-radius: 50vw;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  
  transition: 0.5s;
}

.clickity {
  aspect-ratio: 1/1;
  height: 100%;
  justify-content: center;
  align-content: center;
  background-color: #004750;
  border-radius: 50%;
  padding: 5px;
  margin: 5px;
  transition: 0.5s;
}

.toggle-checkbox {display: none;}

.caret {
  text-align: center;
  justify-content: center;
  align-content: center;
  height: 100%;
  width: 100%;
  color: #ffcf43;
  
}

.clickity:hover {
  transform: scale(1.1);
}

.clickity:active {
  transform: scale(0.7);
  opacity: 0.8;
}

/* Full Screen Checkbox*/
.caret-show {
  display: none;
}

.caret-hide {
  display: inline
}

.toggle-checkbox#full-screen:checked ~ .dropdown-identify {
  .caret-show {display: inline;};
  .caret-hide {display: none;};
}

body:has(.toggle-checkbox#full-screen:checked) :is(header, nav.navigation, footer) {
  display: none;
}

body:has(.toggle-checkbox#full-screen:checked) {
  grid-template-rows: 1fr;
  .fixed-pos {
    background-color: rgb(123, 108, 134);
  };
  .clickity {
    background-color: #2e2a25;
  };
  .caret {
    color: white;
  }
}

/* Stopwatch/Timer Toggle */
.caret-show {
  display: none;
}

.caret-hide {
  display: inline
}

.toggle-checkbox#stopwatch-timer:checked ~ .dropdown-identify {
  .caret-show {display: inline;};
  .caret-hide {display: none;}
}

body:has(.toggle-checkbox#stopwatch-timer:checked) {
  :is(div.elapsed) {
    display: none;
  };
  :is(.placeholder) {
    display: flex;
  }
}

/* Stopwatch reset */
.clickity:has(#stopwatch-reset:hover) {
  transform: rotate(-45deg) scale(1.1);
  
}

path {
  transition: 1.0s;
}

.clickity:has(#stopwatch-reset:active) {
  transform: rotate(330deg) scale(0.7);
  background-color: rgb(212, 46, 18);
  path {
    stroke: #2e2a25;
  }
}

path {
  transition: 1.0s;
}