body {
  margin: 0;
  overflow: hidden;
  user-select: none;
  /* 需要设置等宽字体 */
}

.time {
  display: flex;
  height: 100%;
  width: 100%;
  
  justify-content: center;
  align-items: center;
  align-content: center;
  font-family: 'Ubuntu Mono', monospace;
  font-size: min(30vw,100vh);
  gap: 2vw;
}
body.v .time{
  flex-direction: column;
  font-size: min(100vw,30vh);
}

.time>* {
  line-height: 1;
}

.settings {
  position: fixed;
  top: 10px;
  right: 10px;
}
.settings>*{
  cursor: pointer;
  color: #8888;
}

.hour{
  color: #888;
}

.minute{
  color: #444;
}

.second{
  color: #000;
}

body.dark{
  background: #000;
}

body.dark .minute{
  color: #aaa;
}

body.dark .second{
  color: #eee;
}

*{
  transition: .6s ease-in-out;
  box-sizing: border-box;
}

.setTime{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2vw;
  padding: 1vmin;
  background: #fff8;
  opacity: 0;
  pointer-events: none;
}
body.dark .setTime{
  background: #0008;
}
body.v .setTime{
  flex-direction: column;
}
.setTime.show{
  opacity: 1;
  pointer-events: all;
}

.filter{
  position: fixed;
  bottom: 0;
  right: 0;
  height: 100vh;
  backdrop-filter: invert(100%);
  pointer-events: none;
  width: calc(100vw * var(--p,0));
}
body.v .filter{
  width: 100vw;
  height: calc(100vh * var(--p,0));
}
.filter.low{
  backdrop-filter: invert(10%);
}