html.dark {
  #user-stats {
    background-color: #2f2f2f; 
    border-color: #fff;

    span {
      color: #fff;
    }

    .reset-btn {
      filter: brightness(0) invert(1);
    }

    a {
      color: #8BD3E6;
    }
  }
}

html.light {
  #user-stats {
    background-color: #e3e3e3;
    border-color: #000;

    span {
      color: #000;
    }

    .reset-btn {
      filter: brightness(0) invert(0);
    }

    a {
      color: blue;
    }
  }
}

#user-stats {
  display: flex;
  position: absolute;
  width: fit-content;
  gap: 1em;
  border-radius: 6px; 
  padding: 6px 16px;
  padding-right: 8px;
  font-size: .875rem;
  border: 1px solid;
  z-index: 999;

  span {
    white-space: pre-line;
  }

  .reset-container {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    font-size: 16px;
  }

  .reset-btn {
    height: 16px;
    width: 16px;
    cursor: pointer;
    margin-top: 4px;
  }

  .close-btn {
    cursor: pointer;
    height: fit-content;
  }

  .calc-method-indicator {
    font-size: 16px;
  }
}
