:root {
  /* Color */
  --clr-accent: #062424;
  --clr-accent-hover: #0e3535;
  --clr-a-tag: rgb(232, 225, 51);

  --clr-white: #fff;
  --clr-black: #000;
  /* Gradients */
  --grad-primary: linear-gradient(
    243deg,
    var(--clr-accent) 0%,
    var(--clr-accent400) 100%
  );
}

/* Texts and backgrounds classes */

.text-dark {
  color: var(--clr-dark);
}
.text-dark100 {
  color: var(--clr-dark100);
}
.text-dark200 {
  color: var(--clr-dark200);
}
.text-dark300 {
  color: var(--clr-dark300);
}
.text-dark400 {
  color: var(--clr-dark400);
}
.text-dark500 {
  color: var(--clr-dark500);
}
.text-dark600 {
  color: var(--clr-dark600);
}
.text-dark700 {
  color: var(--clr-dark700);
}
.text-dark800 {
  color: var(--clr-dark800);
}
.text-dark900 {
  color: var(--clr-dark900);
}
.bg-dark {
  background-color: var(--clr-dark);
}
.bg-dark100 {
  background-color: var(--clr-dark100);
}
.bg-dark200 {
  background-color: var(--clr-dark200);
}
.bg-dark300 {
  background-color: var(--clr-dark300);
}
.bg-dark400 {
  background-color: var(--clr-dark400);
}
.bg-dark500 {
  background-color: var(--clr-dark500);
}
.bg-dark600 {
  background-color: var(--clr-dark600);
}
.bg-dark700 {
  background-color: var(--clr-dark700);
}
.bg-dark800 {
  background-color: var(--clr-dark800);
}
.bg-dark900 {
  background-color: var(--clr-dark900);
}
.text-accent {
  color: var(--clr-accent);
}
.text-accent100 {
  color: var(--clr-accent100);
}
.text-accent200 {
  color: var(--clr-accent200);
}
.text-accent300 {
  color: var(--clr-accent300);
}
.text-accent400 {
  color: var(--clr-accent400);
}
.text-accent500 {
  color: var(--clr-accent500);
}
.text-accent600 {
  color: var(--clr-accent600);
}
.text-accent700 {
  color: var(--clr-accent700);
}
.text-accent800 {
  color: var(--clr-accent800);
}
.text-accent900 {
  color: var(--clr-accent900);
}
.bg-accent {
  background-color: var(--clr-accent);
}
.bg-accent100 {
  background-color: var(--clr-accent100);
}
.bg-accent200 {
  background-color: var(--clr-accent200);
}
.bg-accent300 {
  background-color: var(--clr-accent300);
}
.bg-accent400 {
  background-color: var(--clr-accent400);
}
.bg-accent500 {
  background-color: var(--clr-accent500);
}
.bg-accent600 {
  background-color: var(--clr-accent600);
}
.bg-accent700 {
  background-color: var(--clr-accent700);
}
.bg-accent800 {
  background-color: var(--clr-accent800);
}
.bg-accent900 {
  background-color: var(--clr-accent900);
}
.text-secondary {
  color: var(--clr-secondary);
}
.text-secondary100 {
  color: var(--clr-secondary100);
}
.text-secondary200 {
  color: var(--clr-secondary200);
}
.text-secondary300 {
  color: var(--clr-secondary300);
}
.text-secondary400 {
  color: var(--clr-secondary400);
}
.text-secondary500 {
  color: var(--clr-secondary500);
}
.text-secondary600 {
  color: var(--clr-secondary600);
}
.text-secondary700 {
  color: var(--clr-secondary700);
}
.text-secondary800 {
  color: var(--clr-secondary800);
}
.text-secondary900 {
  color: var(--clr-secondary900);
}
.bg-secondary {
  background-color: var(--clr-secondary);
}
.bg-secondary100 {
  background-color: var(--clr-secondary100);
}
.bg-secondary200 {
  background-color: var(--clr-secondary200);
}
.bg-secondary300 {
  background-color: var(--clr-secondary300);
}
.bg-secondary400 {
  background-color: var(--clr-secondary400);
}
.bg-secondary500 {
  background-color: var(--clr-secondary500);
}
.bg-secondary600 {
  background-color: var(--clr-secondary600);
}
.bg-secondary700 {
  background-color: var(--clr-secondary700);
}
.bg-secondary800 {
  background-color: var(--clr-secondary800);
}
.bg-secondary900 {
  background-color: var(--clr-secondary900);
}
.bg-grad {
  background-image: var(--grad-primary);
}
.text-grad {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: var(--grad-primary);
}