:root {
  --black: hsl(230, 15%, 15%);
  --blackSecondary: hsl(230, 15%, 30%);
  --blackTernary: hsl(230, 15%, 70%);

  --white: hsl(60, 30%, 96%);
  --whiteSecondary: hsl(60, 30%, 100%);

  --cyan: hsl(170, 100%, 75%);
  --cyanSecondary: hsl(170, 100%, 90%);

  --green: hsl(115, 100%, 75%);
  --greenSecondary: hsl(115, 100%, 90%);

  --orange: hsl(35, 100%, 75%);
  --orangeSecondary: hsl(35, 100%, 90%);

  --pink: hsl(330, 100%, 75%);
  --pinkSecondary: hsl(330, 100%, 90%);

  --purple: hsl(250, 100%, 75%);
  --purpleSecondary: hsl(250, 100%, 90%);

  --red: hsl(10, 100%, 75%);
  --redSecondary: hsl(10, 100%, 90%);

  --yellow: hsl(60, 100%, 75%);
  --yellowSecondary: hsl(60, 100%, 90%);

  --cyan-transparent: hsl(170, 100%, 75%, 0.1);
  --green-transparent: hsl(115, 100%, 75%, 0.1);
  --orange-transparent: hsl(35, 100%, 75%, 0.1);
  --pink-transparent: hsl(330, 100%, 75%, 0.1);
  --purple-transparent: hsl(250, 100%, 75%, 0.1);
  --red-transparent: hsl(10, 100%, 75%, 0.1);
  --yellow-transparent: hsl(60, 100%, 75%, 0.1);

  --disabled: hsl(230, 15%, 50%);
  --gradientDegree: 135deg;
}

.drac-bg-black {
  background: var(--black);
}
.drac-bg-white {
  background: var(--white);
}
.drac-bg-cyan {
  background: var(--cyan);
}
.drac-bg-green {
  background: var(--green);
}
.drac-bg-orange {
  background: var(--orange);
}
.drac-bg-pink {
  background: var(--pink);
}
.drac-bg-purple {
  background: var(--purple);
}
.drac-bg-red {
  background: var(--red);
}
.drac-bg-yellow {
  background: var(--yellow);
}

.drac-bg-black-transparent {
  background: var(--black-transparent);
}
.drac-bg-white-transparent {
  background: var(--white-transparent);
}
.drac-bg-cyan-transparent {
  background: var(--cyan-transparent);
}
.drac-bg-green-transparent {
  background: var(--green-transparent);
}
.drac-bg-orange-transparent {
  background: var(--orange-transparent);
}
.drac-bg-pink-transparent {
  background: var(--pink-transparent);
}
.drac-bg-purple-transparent {
  background: var(--purple-transparent);
}
.drac-bg-red-transparent {
  background: var(--red-transparent);
}
.drac-bg-yellow-transparent {
  background: var(--yellow-transparent);
}

.drac-bg-purple-cyan {
  background: linear-gradient(
    var(--gradientDegree),
    var(--purple) 0%,
    var(--cyan) 100%
  );
}
.drac-bg-yellow-pink {
  background: linear-gradient(
    var(--gradientDegree),
    var(--yellow) 0%,
    var(--pink) 100%
  );
}
.drac-bg-cyan-green {
  background: linear-gradient(
    var(--gradientDegree),
    var(--cyan) 0%,
    var(--green) 100%
  );
}
.drac-bg-pink-purple {
  background: linear-gradient(
    var(--gradientDegree),
    var(--pink) 0%,
    var(--purple) 100%
  );
}

.drac-bg-purple-cyan-transparent {
  background: linear-gradient(
    var(--gradientDegree),
    var(--purple-transparent) 0%,
    var(--cyan-transparent) 100%
  );
}
.drac-bg-yellow-pink-transparent {
  background: linear-gradient(
    var(--gradientDegree),
    var(--yellow-transparent) 0%,
    var(--pink-transparent) 100%
  );
}
.drac-bg-cyan-green-transparent {
  background: linear-gradient(
    var(--gradientDegree),
    var(--cyan-transparent) 0%,
    var(--green-transparent) 100%
  );
}
.drac-bg-pink-purple-transparent {
  background: linear-gradient(
    var(--gradientDegree),
    var(--pink-transparent) 0%,
    var(--purple-transparent) 100%
  );
}

.drac-bg-animated {
  content: '';
  animation: animatedGradient 6s ease infinite alternate;
  background-size: 300% 300%;
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--orange),
    var(--yellow),
    var(--red),
    var(--pink),
    var(--purple),
    var(--cyan),
    var(--green)
  );
}

@keyframes animatedGradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}

.drac-text-black {
  color: var(--black);
}
.drac-text-white {
  color: var(--white);
}
.drac-text-cyan {
  color: var(--cyan);
}
.drac-text-green {
  color: var(--green);
}
.drac-text-orange {
  color: var(--orange);
}
.drac-text-pink {
  color: var(--pink);
}
.drac-text-purple {
  color: var(--purple);
}
.drac-text-red {
  color: var(--red);
}
.drac-text-yellow {
  color: var(--yellow);
}
.drac-text-purple-cyan {
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--purple) 0%,
    var(--cyan) 100%
  );

  background-size: 100%;
  background-clip: text;

  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.drac-text-yellow-pink {
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--yellow) 0%,
    var(--pink) 100%
  );

  background-size: 100%;
  background-clip: text;

  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}
.drac-text-cyan-green {
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--cyan) 0%,
    var(--green) 100%
  );

  background-size: 100%;
  background-clip: text;

  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}
.drac-text-pink-purple {
  background-image: linear-gradient(
    var(--gradientDegree),
    var(--pink) 0%,
    var(--purple) 100%
  );

  background-size: 100%;
  background-clip: text;

  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.drac-border-black {
  border-color: var(--black);
}
.drac-border-white {
  border-color: var(--white);
}
.drac-border-cyan {
  border-color: var(--cyan);
}
.drac-border-green {
  border-color: var(--green);
}
.drac-border-orange {
  border-color: var(--orange);
}
.drac-border-pink {
  border-color: var(--pink);
}
.drac-border-purple {
  border-color: var(--purple);
}
.drac-border-red {
  border-color: var(--red);
}
.drac-border-yellow {
  border-color: var(--yellow);
}