:root {
    --primary-color: #99BFAA;
    --secondary-color:#C8D6CA;
    --light-color: #E7F5DE;
    --dark-color: #5C868D;
    --alt-color: #5C3D46;
    --black-color: #211915;
}

.btn-dark {
    color: #fff;
    background-color: var(--dark-color);
    border-color: var(--dark-color);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active {
  color: #fff;
  background-color: var(--dark-color);
  border-color: var(--dark-color);
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  color: #fff;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-secondary {
    color: #fff;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
  color: #fff;
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.btn-light {
    color: #fff;
    background-color: var(--light-color);
    border-color: var(--light-color);
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light.active {
  color: #fff;
  background-color: var(--light-color);
  border-color: var(--light-color);
}

.btn-alt {
    color: #fff;
    background-color: var(--alt-color);
    border-color: var(--alt-color);
}

.btn-alt:hover,
.btn-alt:focus,
.btn-alt:active,
.btn-alt.active {
  color: #fff;
  background-color: var(--alt-color);
  border-color: var(--alt-color);
}

.btn-black {
    color: #fff;
    background-color: var(--black-color);
    border-color: var(--black-color);
}

.btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black.active {
  color: #fff;
  background-color: var(--black-color);
  border-color: var(--black-color);
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-8 {
    gap: 2rem;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

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

.self-stretch {
    align-self: stretch;
}