* {
  box-sizing: border-box;
  --primary-color: #ffd700;
  --secondary-color: #00e2bf;

  --primary-table-color: #fffbe8;
  --secondary-table-color: #e4e9eb;

  --primary-bg-color: #021526;
  --secondary-bg-color-1: #212529;
  --secondary-bg-color-2: #373a3e;

  --primary-text-color: #f2fedc;
  --secondary-text-color: #021526;
  --accent-text-color: #00e2bf;

  /* heroes color */
  --hero-human: #1e72e777;
  --hero-horde: #cc220077;
  --hero-elf: #68c40d77;
  --hero-undead: #00e4e477;
  --hero-light: #e4a13677;
  --hero-dark: #9f47ff77;
  --hero-transparent: #ffffff00;
  --stripe-color: var(--hero-transparent);
  --stripe-even-angle: 45deg;
  --stripe-odd-angle: 135deg;
  --stripe-angle: var(--stripe-odd-angle);

  /* Hero Stars colors */
  --hero-silver: #c0c0c0;
  --hero-gold: #ffd700;
  --hero-ruby: #e0115f;
  --hero-sapphire: #ff00fb;
  --hero-star-color: var(--hero-silver);

  /* Equipment Stars Color */
  --equipment-normal: #c0c0c0;
  --equipment-advanced: #68c40d;
  --equipment-rare: #1e72e7;
  --equipment-epic: #ff00fb;
  --equipment-legendary: #e0115f;
  --equipment-mythic: #ffd700;
  --equipment-star-color: var(--equipment-normal);
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--primary-bg-color);
  color: var(--primary-text-color);
}

.top-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.form-container {
  padding: 30px;
  width: 100%;
  max-width: 512px;
  min-width: 328px;
  margin: 0 auto;
  background-color: var(--secondary-bg-color-1);
  border: 2px solid var(--secondary-bg-color-2);
  border-radius: 10px;
}

.form-container .title {
  text-align: center;
}

.primary-color {
  color: var(--primary-color);
}

.btn {
  margin-bottom: 10px;
}

/* filter options */
.filter_container {
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  gap: 5px
}
/* custom checkbox */
.custom_checkbox {
  font-size: 0.95em;
  font-weight: 600;
}

.custom_checkbox input {
  display: none
}

.custom_checkbox input:checked ~ label {
  background-color: var(--primary-color);
  color: var(--secondary-text-color);
}

.custom_checkbox label {
  border: 1px solid var(--primary-color);
  border-radius: 10px;
  min-width: 105px;
  width: 100%;
  padding: 2px 3px;
  text-align: center;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}