.variables {
  --GraphAnime:"";
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  font-family: "Lato","Hiragino Sans";
  font-weight: normal;
  background-color: #343838;
  color: #fffefe;
}

main {
  width: 100%;
  height: 100%;
}

figcaption {
  text-align: center;
}

.title {
  position: absolute;
  top: 50px;
  left: 50px;
  font-size: 25px;
}

.date, .leftover {
  width: 100%;
  height: 10%;
  font-size: 40px;
}

.graph {
  width: 100%;
  height: calc(90% - 10% * 3);
}

.chart {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: var(--GraphAnime);
}

.badges img {
  width: 150px;
  height: auto;
}

.googleplay, .appstore {
  display: none;
}

.qrcode {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 50px;
  bottom: 50px;
}

.qrcode figure, .qrcode img {
  width: 100%;
  height: 100%;
}

.googleplay {
  transform: scale(1.15) translateY(-120%);
}

.number {
  width: calc(400px * 0.9);
  height: calc(400px * 0.9);
  border-radius: 50%;
  background-color: #343838;
  font-size: 80px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}

.switchmode {
  position: absolute;
  top: 70px;
  right: 100px;
  width: 50px;
  height: 8px;
  border-radius: 50px;
  background-color: #818181;
}

.switchmode .buttun {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  transition: all 300ms ease;
}

.lightmode {
  transform: translateX(calc(50px - 100%));
  transition: all 300ms ease;
}

.fa-moon, .fa-sun {
  position: absolute;
  top: 70px;
  font-size: 20px;
}

.fa-moon {
  right: 150px;
  transform: translate(-50%, -25%);
}

.fa-sun {
  right: 100px;
  transform: translate(150%, -25%);
}

@media screen and (max-width: 1000px) {
  .googleplay, .appstore {
    position: absolute;
    left: 50px;
    bottom: 50px;
  }
  .qrcode {
    display: none;
  }
}
/*# sourceMappingURL=style.css.map */