.bg-white {
  background-color: white;
}
.bg-black {
  background-color: black;
}
/* ======================================================================= */
.bg-prim-900 {
  background-color: #4d1969;
}
.bg-prim-800 {
  background-color: #68217a; /* primary star */
}
.bg-prim-700 {
  background-color: #772683;
}
.bg-prim-600 {
  background-color: #882c8b;
}
.bg-prim-500 {
  background-color: #943091;
}
.bg-prim-400 {
  background-color: #a44ba1;
}
.bg-prim-300 {
  background-color: #b469b1;
}
.bg-prim-200 {
  background-color: #ca93c7;
}
.bg-prim-100 {
  background-color: #dfbddd;
}
.bg-prim-50 {
  background-color: #f2e5f1;
}
/* ======================================================================= */
.bg-cmpl-900 {
  background-color: #1d5b0e;
}
.bg-cmpl-800 {
  background-color: #337a21; /* complementary star */
}
.bg-cmpl-700 {
  background-color: #3e8b2b;
}
.bg-cmpl-600 {
  background-color: #4a9d35;
}
.bg-cmpl-500 {
  background-color: #54ab3e;
}
.bg-cmpl-400 {
  background-color: #6cb85b;
}
.bg-cmpl-300 {
  background-color: #85c478;
}
.bg-cmpl-200 {
  background-color: #a8d49f;
}
.bg-cmpl-100 {
  background-color: #cae5c4;
}
.bg-cmpl-50 {
  background-color: #e9f4e7;
}
/* ======================================================================= */
.bg-anlg1-900 {
  background-color: #3c217a; /* analogous star */
}
.bg-anlg1-800 {
  background-color: #59298c;
}
.bg-anlg1-700 {
  background-color: #692e95;
}
.bg-anlg1-600 {
  background-color: #7b349e;
}
.bg-anlg1-500 {
  background-color: #8838a5;
}
.bg-anlg1-400 {
  background-color: #9950b3;
}
.bg-anlg1-300 {
  background-color: #aa6dc0;
}
.bg-anlg1-200 {
  background-color: #c295d3;
}
.bg-anlg1-100 {
  background-color: #dabfe4;
}
.bg-anlg1-50 {
  background-color: #f0e5f4;
}
/* ======================================================================= */
.bg-anlg2-900 {
  background-color: #7a215f; /* analogous star */
}
.bg-anlg2-800 {
  background-color: #a1256d;
}
.bg-anlg2-700 {
  background-color: #b72774;
}
.bg-anlg2-600 {
  background-color: #ce297c;
}
.bg-anlg2-500 {
  background-color: #e02a81;
}
.bg-anlg2-400 {
  background-color: #e04996;
}
.bg-anlg2-300 {
  background-color: #e368aa;
}
.bg-anlg2-200 {
  background-color: #e993c2;
}
.bg-anlg2-100 {
  background-color: #f0bddb;
}
.bg-anlg2-50 {
  background-color: #f8e5f0;
}
/* ======================================================================= */
.bg-tria1-900 {
  background-color: #7a2133; /* triadic star */
}
.bg-tria1-800 {
  background-color: #9c2c37;
}
.bg-tria1-700 {
  background-color: #af3338;
}
.bg-tria1-600 {
  background-color: #c33a3a;
}
.bg-tria1-500 {
  background-color: #d2403b;
}
.bg-tria1-400 {
  background-color: #db5053;
}
.bg-tria1-300 {
  background-color: #e5696e;
}
.bg-tria1-200 {
  background-color: #ef9195;
}
.bg-tria1-100 {
  background-color: #f6bbbf;
}
.bg-tria1-50 {
  background-color: #fce4e5;
}
/* ======================================================================= */
.bg-tria2-900 {
  background-color: #7a6821; /* triadic star */
}
.bg-tria2-800 {
  background-color: #998d2a;
}
.bg-tria2-700 {
  background-color: #aca32f;
}
.bg-tria2-600 {
  background-color: #beb835;
}
.bg-tria2-500 {
  background-color: #ccc93a;
}
.bg-tria2-400 {
  background-color: #d3d056;
}
.bg-tria2-300 {
  background-color: #dbd872;
}
.bg-tria2-200 {
  background-color: #e5e399;
}
.bg-tria2-100 {
  background-color: #f0eec1;
}
.bg-tria2-50 {
  background-color: #f9f8e6;
}
/* ======================================================================= */
/* == Pastel Color =======================================================
/* source: https://lospec.com/palette-list/midnites-pastel-57 */
/* ======================================================================= */
.text-pastel-purple3 {
  color: #6a409b;
}
.bg-pastel-purple3 {
  background-color: #6a409b;
}
.bg-pastel-purple2 {
  background-color: #7f4cba;
}
.bg-pastel-purple1 {
  background-color: #925fcd;
}
.bg-pastel-green3 {
  background-color: #73ab63;
}
.bg-pastel-choco3 {
  background-color: #382821;
}
.bg-pastel-choco2 {
  background-color: #453027;
}
.bg-pastel-choco1 {
  background-color: #624538;
}
.bg-pastel-soil3 {
  background-color: #201817;
}
.bg-pastel-soil2 {
  background-color: #322928;
}
.bg-pastel-soil1 {
  background-color: #514644;
}
.bg-pastel-sand3 {
  background-color: #b19669;
}
.bg-pastel-sand2 {
  background-color: #cfb68c;
}
.bg-pastel-sand1 {
  background-color: #e1cca8;
}
.bg-pastel-gray3 {
  background-color: #292f32;
}
.bg-pastel-gray2 {
  background-color: #494e51;
}
.bg-pastel-gray1 {
  background-color: #636567;
}
.bg-pastel-navy3 {
  background-color: #3a4292;
}
.bg-pastel-navy2 {
  background-color: #4b53a2;
}
.bg-pastel-skin2 {
  background-color: #c68a57;
}
.bg-pastel-skin1 {
  background-color: #d79d6b;
}
.bg-pastel-yellow {
  background-color: #fcef8d;
}
.bg-pastel-shufflr {
  background-color: #F1F2F7;
}
.bg-pastel-daylight {
  background-color: #43455C;
}
.text-pastel-daylight {
  color: #43455C;
}
/* ======================================================================= */
.curveArea {
  width: 100%;
  height: 200px;
  margin: 0 auto;
}
.mainBox {
  height: 200%;
  background: #925fcd;
  overflow: hidden;
}
.curveSection {
  width: 400%;
  height: 300%;
  border-radius: 40%;
  background: #6a409b;
  top: 25%;
  left: -50%;
  right: 0;
  position: relative;
  border-top: 40px solid #7f4cba;
}

.curveArea2 {
  width: 100%;
  height: 300px;
  margin: 0 auto;
}
.mainBox2 {
  height: 150%;
  background: #e1cca8;
  overflow: hidden;
}
.curveSection2 {
  width: 400%;
  height: 300%;
  border-radius: 40%;
  background: #6a409b;
  bottom: 200%;
  left: -20%;
  right: 0;
  position: relative;
}
/* ======================================================================= */
.text-primary-dark {
  color: var(--mdc-theme-text-primary-on-light, rgba(0, 0, 0, 0.87));
}
.text-secondary-dark {
  color: var(--mdc-theme-text-secondary-on-light, rgba(0, 0, 0, 0.54));
}
.text-hint-dark {
  color: var(--mdc-theme-text-hint-on-light, rgba(0, 0, 0, 0.38));
}
.text-disabled-dark {
  color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));
}
.text-primary-light {
  color: var(--mdc-theme-text-primary-on-dark, white);
}
.text-secondary-light {
  color: var(--mdc-theme-text-secondary-on-dark, rgba(255, 255, 255, 0.7));
}
.text-hint-light {
  color: var(--mdc-theme-text-hint-on-dark, rgba(255, 255, 255, 0.5));
}
.text-disabled-light {
  color: var(--mdc-theme-text-disabled-on-dark, rgba(255, 255, 255, 0.5));
}
.text-grayed {
  color: #424242;
}