@import url('/resources/fonts/SuisseIntl/SuisseIntl.css');
@import url('/resources/fonts/SuisseIntl/SuisseIntlMono.css');
@import url('/resources/fonts/Pretendard/Pretendard.css');
@import url('/resources/fonts/Pretendard/PretendardJP.css');
:root {
  --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji',
    'Android Emoji';
  --sans-serif: 'SuisseIntl', 'Susa60-Variable', 'Pretendard', 'Pretendard-JP',
    var(--emoji), sans-serif;
  --monospace: 'SuisseIntlMono', 'SF Mono', 'Consolas', 'Pretendard',
    'Pretendard-JP', var(--emoji), monospace;
}

body {
  margin: 0;
  background: black;
  color: white;
  overflow: hidden;
  font-family: var(--monospace);
}
main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
}

.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#clock {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#clock-text {
  font-size: 15vw;
  font-family: var(--monospace);
  font-weight: 400;
  line-height: 70%;
  color: white;
  z-index: 1000;
  /*mix-blend-mode: difference;*/
}

#circle {
  display: flex;
  justify-content: center;
  align-items: center;
}

#circle svg {
  height: 90%;
  background-color: transparent;
  padding-left: 2rem;
  padding-right: 2rem;
}

#circle svg circle {
  fill: red;
  stroke: black;
}

#circle svg path {
  fill: black;
  stroke: none;
}

#ui .btn {
  font-size: 7.5vw;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: 400;
  color: white;
  cursor: pointer;
}

#ui .btn:hover {
  color: rgb(255, 255, 0);
}

#btn-start {
  position: fixed;
  bottom: 0vh;
  right: 1.5vw;
}

#btn-clear {
  position: fixed;
  bottom: 0vh;
  left: 1.5vw;
}

@media (min-width: 100vh) {
  #clock-text {
    font-size: 15vh;
  }
  #ui .btn {
    font-size: 7.5vh;
  }
  #btn-start {
    right: 1.5vh;
  }

  #btn-clear {
    left: 1.5vh;
  }
}

@media (max-width: 600px) {
  #clock-text {
    font-size: 42pt;
  }
  #ui .btn {
    font-size: 24pt;
  }
  #btn-start {
    right: 1rem;
  }
  #btn-clear {
    left: 1rem;
  }
}