:root {
  --bgc: #567e4a; --c: #ffffed;
}

body, tbody {
  font-size: 5rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: var(--bgc);
  color: var(--c);
}

div {
  display: flex;
  width: 100%;
  justify-content: center;
}

button {
  background-color: var(--bgc);
  color: var(--c);
  border-color: var(--c);
  font-size: 8rem;
  width: 100%;
  cursor: pointer;
}

@media (min-width: 786px) {
  button {
    font-size: 5rem;
  }
}

@media (max-width: 786px) {
  .hide-on-desktop {
    display: block;
  }
}

@media (min-width: 786px) {
  .hide-on-desktop {
    display: none;
  }
}

button[data-active="true"] {
  background-color: var(--c);
  color: var(--bgc);
}

button[data-active="false"] {
  background-color: var(--bgc);
  color: var(--c);
}

button:focus {
  outline: none;
  box-shadow: none;
}

.row {
  border-bottom: 1px solid var(--c);
}

.two-quarters-hide-on-mobile {
  display: none;
}
@media (min-width: 786px) {
  .two-quarters-hide-on-mobile  {
    display: flex;
    width: 50%;
  }
}

.one-quarter {
  display: flex;
  width: 50%;
}
@media (min-width: 786px) {
  .one-quarter {
    display: flex;
    width: 25%;
  }
}

.right {
  text-align: right;
  margin-left: auto;
}

@media (max-width: 786px) {
  .total:before {
    content: 'T: '
  }
  .complete:before {
    content: '\2705: ';
  }
  .incomplete:before {
    content: '\274C: ';
  }
}

.boxed-spacing-b-m {
  margin-bottom: 2rem;
}

.spacing-r-m {
  padding-right: 2rem;
}