.max-height {
  margin-top: 3%;
  min-height: 10vh;
  max-width: 100vh;
  max-height: 100vh;
}
* {
  box-sizing: border-box;
}
body {
  background: url("../img/bg.jpeg") center/cover fixed no-repeat;
  color: #f5f5f5;
}
div {
  display: block;
}
.main-container {
  border: 0.1rem solid #f5f5f5;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.9);
  border-radius: 0.2rem;
}
#counter {
  color: #7fb800;
  font-size: 10rem;
  color: #333333;
}
#text-counter {
  font-size: 5rem;
}
.text-uppercase {
  text-transform: uppercase !important;
}
.text-center {
  text-align: center !important;
}
.counterBtn {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 0.5rem;
}
.prevBtn,
.nextBtn,
.resetBtn {
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.9);
  background: #0d2c54;
  color: #f5f5f5;
  font: Arial;
  text-decoration: none;
  margin: 0.5rem !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.prevBtn:hover {
  background: #00a6ed;
}
.nextBtn:hover {
  background: #00a6ed;
}
.resetBtn:hover {
  background: #00a6ed;
}