html {
    height: 100%;
  }
  
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 40px;
    box-sizing: border-box;
    flex-direction: column;
    color: #39414b;
    font-family: "Helvetica Neue", Arial, sans-serif;
  }
  
  .display {
    position: fixed;
    top: 20px;
    left: 20px;
    background-color: #fff;
    font-size: 14px;
    text-align: center;
    margin-bottom: 30px;
    line-height: 10px;
    padding: 20px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 1px, rgba(0, 0, 0, 0.02) 0px 3px 3px, rgba(0, 0, 0, 0.02) 0px 9px 9px, 0 0 0 1px rgba(0, 0, 0, 0.02);
  }
  
  .canvas .bubble-group {
    display: flex;
    align-items: center;
  }
  
  .canvas .bubble-group>div {
    width: 30px;
    height: 30px;
    margin: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s;
  }
  
  .canvas .bubble-group :hover {
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #EDEDED;
  }
  
  .canvas .bubble-group .active {
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #CECECE;
  }
  
  .canvas-alt .bubble-group {
    display: flex;
    align-items: center;
  }
  
  .canvas-alt .bubble-group>div {
    width: 60px;
    height: 20px;
    margin: 20px 0;
  }
  
  .canvas-alt .bubble-group>div:first-child {
    border-radius: 10px 0 0 10px;
  }
  
  .canvas-alt .bubble-group>div:last-child {
    border-radius: 0 10px 10px 0;
  }




  .color-purple-50 {
    background-color: #F5EBFE;
  }
  
  .color-purple-100 {
    background-color: #DEC4FD;
  }
  
  .color-purple-200 {
    background-color: #C79DFB;
  }
  
  .color-purple-300 {
    background-color: #B176F9;
  }
  
  .color-purple-400 {
    background-color: #984EF8;
  }
  
  .color-purple-500 {
    background-color: #8428F7;
  }
  
  .color-purple-600 {
    background-color: #6F0AEB;
  }
  
  .color-purple-700 {
    background-color: #5D08C4;
  }
  
  .color-purple-800 {
    background-color: #4A079D;
  }
  
  .color-purple-900 {
    background-color: #380675;
  }
  
  .color-light-50 {
    background-color: #FFFFFF;
  }
  
  .color-light-100 {
    background-color: #FAFAFA;
  }
  
  .color-light-200 {
    background-color: #F5F5F5;
  }
  
  .color-light-300 {
    background-color: #EDEDED;
  }
  
  .color-light-400 {
    background-color: #E0E0E0;
  }
  
  .color-light-500 {
    background-color: #CECECE;
  }
  
  .color-light-600 {
    background-color: #C2C2C2;
  }
  
  .color-light-700 {
    background-color: #BABABA;
  }
  
  .color-light-800 {
    background-color: #ABABAB;
  }
  
  .color-light-900 {
    background-color: #A3A3A3;
  }
  
  .color-grey-50 {
    background-color: #CDCDCD;
  }
  
  .color-grey-100 {
    background-color: #C8C8C8;
  }
  
  .color-grey-200 {
    background-color: #C0C0C0;
  }
  
  .color-grey-300 {
    background-color: #BABABA;
  }
  
  .color-grey-400 {
    background-color: #ABABAB;
  }
  
  .color-grey-500 {
    background-color: #A0A0A0;
  }
  
  .color-grey-600 {
    background-color: #969696;
  }
  
  .color-grey-700 {
    background-color: #8E8E8E;
  }
  
  .color-grey-800 {
    background-color: #878787;
  }
  
  .color-grey-900 {
    background-color: #7C7C7C;
  }
  
  .color-dark-50 {
    background-color: #A0A0A0;
  }
  
  .color-dark-100 {
    background-color: #969696;
  }
  
  .color-dark-200 {
    background-color: #878787;
  }
  
  .color-dark-300 {
    background-color: #7A7A7A;
  }
  
  .color-dark-400 {
    background-color: #5C5C5C;
  }
  
  .color-dark-500 {
    background-color: #474747;
  }
  
  .color-dark-600 {
    background-color: #333333;
  }
  
  .color-dark-700 {
    background-color: #222222;
  }
  
  .color-dark-800 {
    background-color: #151515;
  }
  
  .color-dark-900 {
    background-color: #000000;
  }
  
  .color-green-50 {
    background-color: #C2FFE1;
  }
  
  .color-green-100 {
    background-color: #99FFCE;
  }
  
  .color-green-200 {
    background-color: #70FFBA;
  }
  
  .color-green-300 {
    background-color: #47FFA7;
  }
  
  .color-green-400 {
    background-color: #10FF8C;
  }
  
  .color-green-500 {
    background-color: #00F57E;
  }
  
  .color-green-600 {
    background-color: #00CC69;
  }
  
  .color-green-700 {
    background-color: #00A354;
  }
  
  .color-green-800 {
    background-color: #007A3F;
  }
  
  .color-green-900 {
    background-color: #00522A;
  }
  
  .color-yellow-50 {
    background-color: #FFF1D6;
  }
  
  .color-yellow-100 {
    background-color: #FFE2AD;
  }
  
  .color-yellow-200 {
    background-color: #FFD485;
  }
  
  .color-yellow-300 {
    background-color: #FFC65C;
  }
  
  .color-yellow-400 {
    background-color: #FFB730;
  }
  
  .color-yellow-500 {
    background-color: #FFA90A;
  }
  
  .color-yellow-600 {
    background-color: #E09200;
  }
  
  .color-yellow-700 {
    background-color: #B87700;
  }
  
  .color-yellow-800 {
    background-color: #8F5D00;
  }
  
  .color-yellow-900 {
    background-color: #663E00;
  }
  
  .color-red-50 {
    background-color: #FFEBED;
  }
  
  .color-red-100 {
    background-color: #FFC2C8;
  }
  
  .color-red-200 {
    background-color: #FF99A3;
  }
  
  .color-red-300 {
    background-color: #FF707E;
  }
  
  .color-red-400 {
    background-color: #FF3F52;
  }
  
  .color-red-500 {
    background-color: #FF1F35;
  }
  
  .color-red-600 {
    background-color: #F50018;
  }
  
  .color-red-700 {
    background-color: #CC0014;
  }
  
  .color-red-800 {
    background-color: #A30010;
  }
  
  .color-red-900 {
    background-color: #7A000C;
  }
  
  .color-pink-50 {
    background-color: #FFD6F5;
  }
  
  .color-pink-100 {
    background-color: #FFADEB;
  }
  
  .color-pink-200 {
    background-color: #FF85E0;
  }
  
  .color-pink-300 {
    background-color: #FF5CD6;
  }
  
  .color-pink-400 {
    background-color: #FF25C8;
  }
  
  .color-pink-500 {
    background-color: #FF0AAE;
  }
  
  .color-pink-600 {
    background-color: #E000A8;
  }
  
  .color-pink-700 {
    background-color: #B80086;
  }
  
  .color-pink-800 {
    background-color: #8F006B;
  }
  
  .color-pink-900 {
    background-color: #630047;
  }
  
  .color-indigo-50 {
    background-color: #EBF0FF;
  }
  
  .color-indigo-100 {
    background-color: #C2D1FF;
  }
  
  .color-indigo-200 {
    background-color: #85A3FF;
  }
  
  .color-indigo-300 {
    background-color: #5C85FF;
  }
  
  .color-indigo-400 {
    background-color: #1F57FF;
  }
  
  .color-indigo-500 {
    background-color: #0038E0;
  }
  
  .color-indigo-600 {
    background-color: #002EB8;
  }
  
  .color-indigo-700 {
    background-color: #00258F;
  }
  
  .color-indigo-800 {
    background-color: #001966;
  }
  
  .color-indigo-900 {
    background-color: #000F3D;
  }
  
  .color-teal-50 {
    background-color: #F5F6F7;
  }
  
  .color-teal-100 {
    background-color: #DDE4E7;
  }
  
  .color-teal-200 {
    background-color: #C6D1D3;
  }
  
  .color-teal-300 {
    background-color: #AEBDC3;
  }
  
  .color-teal-400 {
    background-color: #98ABB2;
  }
  
  .color-teal-500 {
    background-color: #637982;
  }
  
  .color-teal-600 {
    background-color: #52636A;
  }
  
  .color-teal-700 {
    background-color: #3F4C53;
  }
  
  .color-teal-800 {
    background-color: #313D41;
  }
  
  .color-teal-900 {
    background-color: #1B2126;
  }
  
  .color-lime-50 {
    background-color: #FAFFED;
  }
  
  .color-lime-100 {
    background-color: #F0FEC8;
  }
  
  .color-lime-200 {
    background-color: #E6FDA6;
  }
  
  .color-lime-300 {
    background-color: #DDFE84;
  }
  
  .color-lime-400 {
    background-color: #C6FD50;
  }
  
  .color-lime-500 {
    background-color: #AADE45;
  }
  
  .color-lime-600 {
    background-color: #8DB637;
  }
  
  .color-lime-700 {
    background-color: #6D8E29;
  }
  
  .color-lime-800 {
    background-color: #4A5E1A;
  }
  
  .color-lime-900 {
    background-color: #222E05;
  }
  
  .color-orange-50 {
    background-color: #FDF1EC;
  }
  
  .color-orange-100 {
    background-color: #F8D4C3;
  }
  
  .color-orange-200 {
    background-color: #F3B79E;
  }
  
  .color-orange-300 {
    background-color: #F19B78;
  }
  
  .color-orange-400 {
    background-color: #EC7143;
  }
  
  .color-orange-500 {
    background-color: #CE481F;
  }
  
  .color-orange-600 {
    background-color: #AA3C1A;
  }
  
  .color-orange-700 {
    background-color: #843012;
  }
  
  .color-orange-800 {
    background-color: #5F210A;
  }
  
  .color-orange-900 {
    background-color: #381403;
  }
  
  .color-sky-50 {
    background-color: #EEFBFE;
  }
  
  .color-sky-100 {
    background-color: #CAF0FB;
  }
  
  .color-sky-200 {
    background-color: #ABE9FC;
  }
  
  .color-sky-300 {
    background-color: #8DDFFB;
  }
  
  .color-sky-400 {
    background-color: #5ECBFA;
  }
  
  .color-sky-500 {
    background-color: #51B1DC;
  }
  
  .color-sky-600 {
    background-color: #4091B3;
  }
  
  .color-sky-700 {
    background-color: #31708B;
  }
  
  .color-sky-800 {
    background-color: #215165;
  }
  
  .color-sky-900 {
    background-color: #11303C;
  }
  
  .color-maroon-50 {
    background-color: #F7F1F3;
  }
  
  .color-maroon-100 {
    background-color: #E7D6D8;
  }
  
  .color-maroon-200 {
    background-color: #D9BCBD;
  }
  
  .color-maroon-300 {
    background-color: #C9A0A3;
  }
  
  .color-maroon-400 {
    background-color: #B3777D;
  }
  
  .color-maroon-500 {
    background-color: #8E4D50;
  }
  
  .color-maroon-600 {
    background-color: #753F42;
  }
  
  .color-maroon-700 {
    background-color: #5A3134;
  }
  
  .color-maroon-800 {
    background-color: #412225;
  }
  
  .color-maroon-900 {
    background-color: #271516;
  }