:root {
  color: #000;
  /* Generate Palette Color: https://www.materialpalette.com/ */
  --primary: #ab93ff;
  --primary-dark: #6317c3;
  --primary-light: #e3dbff;
  --primary-text: #212121;
  --secondary: #d942c0;
  --secondary-text: #757575;
  --accent: #FF9800;
  --icon: #eeeeee;
  --divider: #BDBDBD;

  /* Generate Palette Color: https://quasar.dev/style/color-palette */
  --positive: #21ba45;
  --negative: #c10015;
  --warning: #f2c037;
  --info: #31ccec;

  --black: #000;
  --white: #FFF;
  --transparan: #FFFFFF00;

  /* Shadow */
  --primary-shadow: #0005;
  --positive-shadow: rgba(33,186,69,0.7);
  --negative-shadow: rgba(193,0,21,0.7);
  --warning-shadow: rgba(242,192,55,0.7);

  /* Font Sizing */
  --text-defult: 16px;
  --text-xs: .6em;
  --text-s: .9em;
  --text-m: 1em;
  --text-xm: 1.1em;
  --text-l: 1.5em;
  --text-xl: 2em;
  --text-xxl: 2.5em;
}

.bg-gradient-main {
  background: linear-gradient(to right, var(--secondary), var(--primary-dark));
}


.bg-gradient-sec {
  background: linear-gradient(to right, var(--primary-light), var(--primary));
}

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 3rem;
  justify-content: center;
  align-items: center;
}

  .border-gradient-main {
    border: 2px solid transparent;
    background-image: linear-gradient(white, white),
                      linear-gradient(to right, var(--secondary), var(--primary-dark));
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

.border-gradient-sec {
  border: 2px solid transparent;
  background-image: linear-gradient(white, white),
                    linear-gradient(to right, var(--primary-light), var(--primary));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.text-gradient-main {
background: -webkit-linear-gradient(left, var(--secondary), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-clip: text;
}

.text-primary-dark {
  color: var(--primary-dark);
}

.text-primary-light {
  color: var(--primary-light);
}

.text-gradient-sec {
  background: -webkit-linear-gradient(var(--primary-light), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-clip: text;
}