style.css

@font-face {
  font-family: 'BPmono';
  src: url(font/BPmono/BPmono.ttf) format('truetype');
  /*font-family: 'JosefinSans-Regular';*/
  /*src: url(font/JosefinSans/JosefinSans-Regular.ttf) format('truetype');*/
}
html {
  width: 100%;
  height: 100%;
  perspective: 900px;
  overflow-y: scroll;
  background-color: #dce7eb;
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
#timer-number {
  font-family: 'BPmono', monospace;
  font-size: 32px;
  height: 2em;
  display: flex;
  align-items: center;
  justify-content: center
}
.button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center
}
.button-color-blue {
  background: #4676d7;
  color: #fff;
}
.button-color-blue:hover {
  background: #1d49aa;
}
.button-color-red {
  background: #d74646;
  color: #fff;
}
.button-color-red:hover {
  background: #aa1d1d;
}
.button {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  min-width: 100px;
  border: 0;
  border-radius: 5px;
  padding: 10px 16px;
  font-size: 1rem;
  margin: 4px;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.button:focus {
  outline: none;
  box-shadow: 0 0 0 4px #cbd6ee;
}
@media (prefers-color-scheme: dark) {
  html {
    background:  #333333;
    color: white; }
}

@media (prefers-color-scheme: light) {
  html {
    background:  #dce7eb;
    color: black;
  }
}