:root {
  /*GRADIENTS*/
  --gradient-primary: linear-gradient(to right, var(--primary) 0%, var(--secondary) 51%, var(--secondary-d-3) 100%);
  --gradient-secondary: linear-gradient(to right, var(--secondary) 0%, var(--primary) 51%, var(--primary-d-3) 100%);
  
  /*BOX SHADOW*/
  --box-shadow-default: 2px 2px 15px color-mix(in srgb, var(--primary) 40%, transparent);
  --box-shadow-default-hover: 2px 2px 15px color-mix(in srgb, var(--primary) 90%, transparent);
}

 /*BUTTONS*/
.gradient-button {
  border: none !important;
  transition: 0.5s;
  background-size: 200% auto;
  background-image: var(--gradient-primary);
  color: var(--primary-l-5);
}

.gradient-button:hover {
  background-position: right center;
  color: var(--primary-l-5);
}

.box-shadow-button {
  box-shadow: var(--box-shadow-default);
}

.box-shadow-button:hover {
  box-shadow: var(--box-shadow-default-hover);
}

.rounded-button {
  border-radius: 100px;
}