@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&family=Montserrat:wght@600&display=swap');

* {
  box-sizing: border-box;
}

:root {
  font-size: 45%;
  
  --bar-color: #222;
  --body-color: #000000;
  --text-color: white;
  --bar-wrap-back-color: white;
}

body {
  margin: 0;
  margin-top: 1%;
  font-family: 'Fira Sans', sans-serif;
  
  background-color: var(--body-color);
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;

  margin: 15px auto;
  
}

.container-year {
    width: 80%
}

.container-month {
    width: 70%
}

.container-week {
    width: 60%
}

.container-day {
    width: 50%
}

.status-info {
  display: flex;
  flex-direction: column;
}

.title {
  padding: 0;
  margin: 0;
  
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(3.2rem, 6vw, 4.8rem);
  
  color: var(--text-color);
}

.bar-wrap {
  padding: 6px;
  margin-top: 25px;
  
  border-radius: 100px;
  
  background-color: var(--bar-wrap-back-color);
}

.bar {
  width: 0%;
  height: 15px;
  
  transition: width 5s ease-in-out;
  
  background-color: var(--bar-color);
  border-radius: 100px;
  box-shadow: inset -1px -1px 10px rgb(255 255 255 / .3);
}

.percentage {
  align-self: center;
  
  margin: 10px 0 25px;
  
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  
  color: var(--text-color);
}

.line {
  margin: 0;
  
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  
  color: var(--text-color);
}

.number {
  margin-left: 8px;
  
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.2rem);
}