body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.counter-app {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
  min-width: 400px;
  padding: 40px;
}

.counter-app h1 {
  margin: 20px 0px;
  font-size: 1.6rem;
  text-align: center;
}

.count {
  margin: 20px 0px;
  font-size: 5rem;
  font-weight: bold;
  text-align: center;
  color: #d99d2d;
}

.count.positive {
  color: #4db966;
}
.count.negative {
  color: #e63434;
}

.status {
  margin-bottom: 20px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #d99d2d;
}

.status.positive {
  color: #4db966;
}
.status.negative {
  color: #cc3535;
}

.btn-wrapper {
  display: flex;
  justify-content: space-around;
  gap: 8px;
}

.btn-wrapper button {
  padding: 10px;
  border: 10px none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
}

.decrement {
  background-color: #e63434;
}

.decrement:hover {
  background-color: #cc3535;
}
.reset {
  background-color: #e6a120;
}
.reset:hover {
  background-color: #d99d2d;
}
.increment {
  background: #4fc66b;
}

.increment:hover {
  background: #4db966;
}