@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    /* Brand - Primary */
    --primary-base: rgb(102, 54, 149);
    --primary-900s: rgb(20, 11, 30);
    --primary-800s: rgb(41, 22, 60);
    --primary-700s: rgb(61, 32, 89);
    --primary-600s: rgb(82, 43, 119);
    --primary-400t: rgb(134, 95, 171);
    --primary-300t: rgb(163, 134, 191);
    --primary-200t: rgb(194, 175, 213);
    --primary-100t: rgb(224, 215, 234);
    /* Brand - Secondary */
    --secondary-base: rgb(71, 168, 87);
    --secondary-900s: rgb(14, 34, 17);
    --secondary-800s: rgb(29, 68, 36);
    --secondary-700s: rgb(43, 101, 52);
    --secondary-600s: rgb(57, 134, 70);
    --secondary-400t: rgb(108, 185, 121);
    --secondary-300t: rgb(145, 203, 154);
    --secondary-200t: rgb(181, 220, 188);
    --secondary-100t: rgb(218, 238, 221);
    /* Grayscale */
    --black: rgb(8, 10, 12);
    --gray-900s: rgb(24, 31, 37);
    --gray-800s: rgb(40, 52, 62);
    --gray-700s: rgb(64, 83, 100);
    --gray-600s: rgb(88, 113, 137);
    --gray-base: rgb(131, 154, 175);
    --gray-400t: rgb(168, 185, 199);
    --gray-300t: rgb(205, 215, 223);
    --gray-200t: rgb(230, 235, 239);
    --gray-100t: rgb(255, 255, 255);
    --white: rgb(255, 255, 255);
    /* UI/Rainbow */
    --red: rgb(205, 72, 83);
    --orange: rgb(236, 157, 47);
    --yellow: rgb(255, 210, 63);
    --green: rgb(71, 168, 87);
    --blue: rgb(65, 123, 204);
    --violet: rgb(102, 54, 149);
    /**/
    --bronze: rgb(214, 125, 41);
    --silver: rgb(168, 185, 199);
}

.red {
  color: var(--red) !important;
}

.yellow {
  color: var(--yellow) !important;
}

.green {
  color: var(--green) !important;
}

@keyframes alert-red {
    0% {
      border-color: var(--red);
    }
      50% {
          border-color: var(--black);
      }
    100% {
      border-color: var(--red);
    }
  }
  
  @keyframes alert-yellow {
      0% {
        border-color: var(--yellow);
      }
        50% {
            border-color: var(--black);
        }
      100% {
        border-color: var(--yellow);
      }
    }
  
    @keyframes alert-green {
      0% {
        border-color: var(--green);
      }
        50% {
            border-color: var(--black);
        }
      100% {
        border-color: var(--green);
      }
    }

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