.color-demo-container {
  --container-shine: linear-gradient(
    120deg,
    transparent 50%,
    rgba(255, 200, 200, 0.08) 15%,
    transparent 60%
  );
  transition: background-position 1s ease;
  overflow-y: scroll;
  overflow-x:scroll;
  height: 35vh;
  padding: 20px;
  position: relative;
  margin-top: 0px;
  margin-bottom: 15px;
  border: 1px solid;
  flex: 1 1 calc(22% - 5px);
  box-shadow: 0 18px 15px rgba(0, 0, 0, 0.12), inset 8px 7px 7px 1px rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  background-image: var(--container-shine);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
}
.color-demo-container p { color: var(--demo-text); }
.color-demo-container h4 { color: var(--demo-header) !important; }
.color-demo-container a { color: var(--demo-link); text-decoration: 2px underline; }
.color-demo-container a:hover { color: var(--demo-hover); text-decoration: 2px underline var(--demo-accent);}

.color-demo-container:hover {
  background-position: 0% 0;
}

.color-demo-container.rainbow-range-original,
.color-demo-container.rainbow-range-dark,
.color-demo-container.pastel-pink,
.color-demo-container.periwinkle,
.color-demo-container.mint-green,
.color-demo-container.forest-green,
.color-demo-container.sea-blue,
.color-demo-container.black-red,
.color-demo-container.white-black-grey,
.color-demo-container.yellow,
.color-demo-container.hot-pink,
.color-demo-container.deep-purple {
  background-color: var(--demo-container);
  border: 2px solid var(--demo-bg);
  height: auto;
  max-width: 100%;
  box-sizing: border-box;
  overflow: auto;
}

.color-demo-container.rainbow-range-original {
  --demo-bg: #94D6FF;
  --demo-container: #42A6EA;
  --demo-text: #00288F;
  --demo-link: #001feb;
  --demo-hover: #4f00ce;
  --demo-accent: #ff59cb;
  --demo-header: #1736ff;
}

.color-demo-container.rainbow-range-dark {
  --demo-bg: #00012e;
  --demo-container: #0134a0;
  --demo-text: #C3DFEB;
  --demo-link: #5dbeff;
  --demo-hover: #71eaff;
  --demo-accent: #ff2474;
  --demo-header: #5dbeff;
}

.color-demo-container.pastel-pink {
  --demo-bg: #e660aa;
  --demo-container: #f7c6dd;
  --demo-text: #6B0050;
  --demo-link: #006157;
  --demo-hover: #0014C7;
  --demo-accent: #ff579a;
  --demo-header: #CC0052;
}

.color-demo-container.periwinkle {
  --demo-bg: #8854d1;
  --demo-container: #e3c0ed;
  --demo-text: #2e006e;
  --demo-header: #9218b8;
  --demo-link: #2831d4;
  --demo-hover: #d428af;
  --demo-accent: #ffff85;
}

.color-demo-container.mint-green {
  --demo-bg: #30915e;
  --demo-container: #a6f8eb;
  --demo-text: #002731;
  --demo-header: #006661;
  --demo-link: #0b4fb3;
  --demo-hover: #7a2a9e;
  --demo-accent: #00a545;
}
 
.color-demo-container.forest-green {
  --demo-bg: #07140d;
  --demo-container: #12301f;
  --demo-text: #d8f0de;
  --demo-header: #8fe3a8;
  --demo-link: #7fd4ff;
  --demo-hover: #ffe27a;
  --demo-accent: #ff9e5e;
}
 
.color-demo-container.sea-blue {
  --demo-bg: #007486;
  --demo-container: #7cc1d6;
  --demo-text: #000d83;
  --demo-header: #0f3752;
  --demo-link: #0044b3;
  --demo-hover: #9e10a5;
  --demo-accent: #0084ff;
}
 
.color-demo-container.black-red {
  --demo-bg: #000000;
  --demo-container: #111111;
  --demo-text: #ff7070;
  --demo-header: #ff1616;
  --demo-link: #ff44a1;
  --demo-hover: #f0ff68;
  --demo-accent: #ff5b0f;
}
 
.color-demo-container.white-black-grey {
  --demo-bg: #d0d0d0;
  --demo-container: #f2f2f2;
  --demo-text: #131313;
  --demo-header: #696969;
  --demo-link: #3700ff;
  --demo-hover: #0471ff;
  --demo-accent: #00883d;
}
 
.color-demo-container.yellow {
  --demo-bg: #ffe66d;
  --demo-container: #fff6b8;
  --demo-text: #5e007a;
  --demo-header: #be3600;
  --demo-link: #001fac;
  --demo-hover: #a400aa;
  --demo-accent: #ff7b00;
}

.color-demo-container.hot-pink {
  --demo-bg: #000000;
  --demo-container: #222222;
  --demo-text: #ff80aa;
  --demo-header: #ff49a4;
  --demo-link: #19c5ff;
  --demo-hover: #ffed61;
  --demo-accent: #c70063;
}

.color-demo-container.deep-purple {
  --demo-bg: #080018;
  --demo-container: #180436;
  --demo-text: #ff90ff;
  --demo-header: #9861ff;
  --demo-link: #19ff8c;
  --demo-hover: #ffed61;
  --demo-accent: #6f00ff;
}