@import url("https://fonts.googleapis.com/css2?family=Inria+Sans:wght@300&family=Inria+Serif:wght@700&display=swap");
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 100%;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

body {
  font-family: 'Inria Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.3;
  color: #000000;
  max-width: 1050px;
  background: #e7e6e2;
  margin: 0 auto;
  font-size: 1rem;
}

header {
  text-align: center;
  margin: 1rem 1rem 3rem 1rem;
  padding-top: 1.5rem;
}

header h1 {
  font-size: 2.618rem;
  font-family: 'Inria Serif', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

header h2 {
  font-size: 1.618rem;
  font-weight: lighter;
}

.timer {
  text-align: center;
  margin: 0 1rem 8rem 1rem;
}

.timer__container {
  font-size: 6.854rem;
  margin-bottom: 1.5rem;
}

.timer__btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
}

.timer__btns button {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  background-color: #e7e6e2;
  border: 1px solid black;
  border-radius: 5px;
  font-size: 1rem;
  padding: .5rem 1rem;
}

.timer__btns button:hover {
  color: #e7e6e2;
  background-color: black;
}

.timer__btns__start.active {
  color: #e7e6e2;
  background-color: black;
}

.timer__btns__stop.active {
  color: #e7e6e2;
  background-color: black;
}

footer {
  text-align: center;
}

@media only screen and (min-width: 36em) {
  header h1 {
    font-size: 4.236rem;
  }
  header h2 {
    font-size: 2.618rem;
  }
  .timer__container {
    font-size: 11.089rem;
  }
  .timer__btns button {
    font-size: 1.618rem;
    padding: 1rem 1.5rem;
  }
}
/*# sourceMappingURL=style.css.map */