* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
}

html,
body {
  font-family: Pretendard, sans-serif;
  font-size: 10vw;
  font-weight: 900;
}

html {
  overscroll-behavior: none;
  background-color: white;
}
html.day {
  background-color: FloralWhite;
}
html.night {
  background-color: midnightblue;
}

.container {
  width: 100vw;
  height: 100dvh;
  /* background-color: white; */
  overflow: hidden;
  transition: background-color 0.5s linear;
}
/* .container.day {
  background-color: FloralWhite;
}
.container.night {
  background-color: midnightblue;
} */

.mode {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: color 0.5s linear;
  color: black;
  user-select: none;
}
.mode.day {
  color: gold;
}
.mode.night {
  color: silver;
}

.wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.date-info {
  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4vw;
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.5s linear;
  text-align: center;
}

html.day .date-info {
  color: rgba(0, 0, 0, 0.5);
}
html.night .date-info {
  color: rgba(255, 255, 255, 0.5);
}