.healthWrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  > {

    h3 {
      color: #aaaaee;
    }

    .healthContainer {
      display: grid;
      grid-template-columns: repeat(3, auto);
      justify-items: center;
      gap: 0px;
      justify-content: start;
      > {
        * {
          margin: -1px;
        }
        
        label  {
          &.healthTrackerBox {
            cursor: pointer;
            order: 1;
            background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5f/Red_X.svg);
            background-color: #444444;
            background-size: 90%;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 1;
            position: relative;
            border: 2px solid #550000;
            border-radius: 0px;
            appearance: none;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 3px;
            padding: 0px;

            &.reset {
              order: 2;
            }
  
            > span {
              position: absolute;
              content: "-1";
              top: 2px;
              right: 4px;
              display: none;
            }
          }
        }

        input:checked {
          & + .healthTrackerBox {
            position: absolute;
            opacity: 0;
            z-index: 0;

            > span {
              display: block;
            }
          } 

          & ~ .healthTrackerBox {
            order: 3;
            background-color: #444444;
            background-image: none;

            > span {
              display: block;
            }
          }
        }
      }
    }
  }
}