@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap");
/* Reset */
*, *::before, *::after {
  box-sizing: border-box; }

ul[class], ol[class] {
  padding: 0; }

body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd {
  margin: 0; }

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5; }

ul[class], ol[class] {
  list-style: none; }

a:not([class]) {
  text-decoration-skip-ink: auto; }

img {
  max-width: 100%;
  display: block; }

article > * + * {
  margin-top: 1em; }

input, button, textarea, select {
  font: inherit; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-play-state: paused !important;
    transition: none !important;
    scroll-behavior: auto !important; } }

body {
  width: 100vw;
  height: 100%;
  color: #2E2C2F;
  font-family: 'Lato', arial, helvetica, sans-serif;
  font-size: 16px; }

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100%;
  padding: 15px; }

h1 {
  font-weight: 300;
  font-size: 45px;
  line-height: 45px;
  margin: 0 0 15px;
  padding: 0; }
  h1.light {
    color: #F3E8EE; }
  h1.dark {
    color: #2E2C2F; }

p {
  color: #aaa;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  margin: 0 0 15px;
  padding: 0;
  letter-spacing: .15em; }

.container {
  width: 100%; }

.overlay {
  background-color: rgba(255, 255, 225, 0.25);
  display: none;
  width: 100vw;
  height: 100vw;
  position: absolute;
  top: 0;
  left: 0; }

.swatch {
  cursor: pointer;
  width: 100%;
  background-color: #2c2b2d;
  border-radius: 10px;
  margin: 0;
  overflow: hidden;
  border: 1px solid white;
  box-shadow: 0 5px 20px rgba(37, 38, 40, 0.2);
  transition: all .25s ease-in-out;
  transform: scale(1); }
  .swatch:hover {
    transform: scale(1.025); }
  .swatch div {
    position: relative;
    width: 100%;
    padding: 4.5em 1em;
    display: block; }
  .swatch .info {
    padding: .5em;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0; }

.component-flex-grid-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(18, minmax(215, auto));
  grid-gap: 15px;
  max-width: 767px;
  margin: 0 auto;
  padding-inline-start: 0; }
  @media screen and (min-width: 540px) {
    .component-flex-grid-list {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(9, minmax(215, auto));
      max-width: 991px; } }
  @media screen and (min-width: 992px) {
    .component-flex-grid-list {
      grid-template-columns: repeat(7, 1fr);
      grid-template-rows: repeat(6, minmax(215, auto));
      max-width: 1440px; } }
  .component-flex-grid-list.swatch-list {
    margin: 0 auto; }

.component-search {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
  padding: 0 0 15px; }
  .component-search input {
    border: 2px solid rgba(37, 39, 41, 0.25);
    padding: 5px 10px;
    min-width: 420px;
    background: rgba(255, 255, 255, 0.5); }
    .component-search input.light {
      border: 2px solid rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.25);
      color: white; }
      .component-search input.light::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.75);
        font-size: 1em; }
      .component-search input.light:focus {
        outline: none;
        border: 2px solid white; }
    .component-search input.dark {
      border: 2px solid rrgba(37, 39, 41, 0.25);
      background: rgba(37, 39, 41, 0.1);
      color: #252729; }
      .component-search input.dark::-webkit-input-placeholder {
        color: rgba(37, 39, 41, 0.25);
        font-size: 1em; }
      .component-search input.dark:focus {
        outline: none;
        border: 2px solid #252729; }

.color {
  transition: all .25s ease-in-out; }
  .color-tropicalmorning {
    background-color: #fafa6e;
    background-image: linear-gradient(#fafa6e 0%, #d7f171 6.66%, #b5e877 13.32%, #95dd7d 19.98%, #77d183 26.64%, #5bc489 33.3%, #3fb78d 39.96%, #23aa8f 46.62%, #009c8f 53.28%, #008d8c 59.94%, #007f86 66.6%, #0b717e 73.26%, #1c6373 79.92%, #255566 86.58%, #2a4858 100%); }
  .color-sunset {
    background-image: linear-gradient(#dc900b 0%, #df6347 20%, #ad4873 40%, #5c4574 60%, #2a3b58 80%); }
  .color-calmmorning {
    background-image: linear-gradient(#93b0d2 0%, #ebbac4 20%, #c0b5ca 40%, #7788a8 60%, #646c7c 80%); }
  .color-darksalmon {
    background-image: linear-gradient(#c68499 0%, #eeaf88 40%, #dd725e 80%, #340604 90%, #0c0c0c 100%); }
  .color-crimson {
    background-image: linear-gradient(#8585d8 0%, #d7d8fc 20%, #f1bd92 60%, #cf6b5d 100%); }
  .color-rouge {
    background-image: linear-gradient(#4759bb 0%, #a13f7c 60%, #af86c1 100%); }
  .color-copper {
    background-image: linear-gradient(#554068 0%, #a185c9 50%, #e0936a 100%); }
  .color-summerbreeze {
    background-image: linear-gradient(#3f67b5, #6baadf, #b5d1e8); }
  .color-cosmic {
    background-image: linear-gradient(#243c6c 0%, #3b62b4 50%, #e4edf5 100%); }
  .color-kashmir {
    background-image: linear-gradient(#443976 0%, #515f9e 35%, #674965 70%, #b78267 100%); }
  .color-boldsunset {
    background-image: linear-gradient(#435de4 0%, #ad6051 50%, #efb028 100%); }
  .color-firesunset {
    background-image: linear-gradient(#1c2b6c 0%, #634470 40%, #7a92bf 60%, #b66344 100%); }
  .color-ironsky {
    background-image: linear-gradient(#5cb1c7 0%, #c9a07b 50%, #d6d6d7 100%); }
  .color-midnightfire {
    background-image: linear-gradient(#2a5461 0%, #675d65 50%, #cba07c 75%, #dd6a2b 100%); }
  .color-bermuda {
    background-image: linear-gradient(#457497 0%, #7096ae 25%, #e5865d 75%, #eeccbc 100%); }
  .color-satch {
    background-image: linear-gradient(#74b0d0 0%, #c78c6f 50%, #b5095b 100%); }
  .color-blush {
    background-image: linear-gradient(#5e3585 0%, #7b0a0b 65%, #b04d45 90%, #e57891 100%); }
  .color-velvet {
    background-image: linear-gradient(#66519f 0%, #693560 70%, #ba6485 100%); }
  .color-retrored {
    background-image: linear-gradient(#7c1f16 0%, #c96d35 60%, #f1d76c 100%); }
  .color-snowbound {
    background-image: linear-gradient(#d7d7d7 0%, #b4948f 60%, #ca9489 100%); }
  .color-chalkypeach {
    background-image: linear-gradient(#828c99 0%, #d7d7d7 60%, #eed89b 100%); }
  .color-lavender {
    background-image: linear-gradient(#bbb0d7 0%, #ae6b77 75%, #f2d486 100%); }
  .color-mulledwine {
    background-image: linear-gradient(#614c6b 0%, #b187b1 60%, #684fb1 100%); }
  .color-amethyst {
    background-image: linear-gradient(#574d71 0%, #6a618e 25%, #7e84a2 50%, #a995b1 75%, #d7c6d6 100%); }
  .color-evening {
    background-image: linear-gradient(#242a4d 0%, #3c4c84 100%); }
  .color-mulberry {
    background-image: linear-gradient(#d2548e 0%, #e28635); }
  .color-gray {
    background-image: linear-gradient(#95a4aa 0%, #e4e5e4); }
  .color-calico {
    background-image: linear-gradient(#675f65 0%, #b29b95 60%, #e0b18f 100%); }
  .color-vibrant {
    background-image: linear-gradient(#e49f1c 0%, #b5095b 100%); }
  .color-turquoise {
    background-image: linear-gradient(#84fab0 0%, #8fd3f4 100%); }
  .color-rose {
    background-image: linear-gradient(#f093fb 0%, #f5576c 100%); }
  .color-midnightsea {
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%); }
  .color-mirror {
    background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%); }
  .color-royal {
    background-image: linear-gradient(to bottom, #C6426E, #642B73); }
  .color-lemonlime {
    background-image: linear-gradient(to bottom, #d9b82a 0%, #83b21b 50%, #2dac0b 100%); }
  .color-dawn {
    background-image: linear-gradient(45deg, #fca95a, #a2557c, #47009d); }
  .color-icy {
    background-image: linear-gradient(90deg, #a0dedb, #03a5d1); }
  .color-blaze {
    background-image: linear-gradient(to bottom, #b7390c, #e57f49); }
  .color-majesty {
    background-image: linear-gradient(to top, #be5af7, #165b91); }
  .color-sunrise {
    background-image: linear-gradient(to bottom, #77d1d2 0%, #aeca4c 58%, #e78b1c 100%); }
  .color-apple {
    background-image: linear-gradient(135deg, #b9df67, #fd2732); }
  .color-fierysunset {
    background-image: linear-gradient(to top, #fc6c35, #aa129f); }
  .color-glacier {
    background-image: linear-gradient(45deg, #2b215d, #51f0ed); }
  .color-breakofdawn {
    background-image: linear-gradient(to bottom, #00C4FF, #9D1BB2); }
  .color-dreamy {
    background-image: linear-gradient(to top, #ff8a00, #e52e71); }
  .color-greenflash {
    background-image: linear-gradient(to top, #2af598 0%, #009efd 100%); }
  .color-anothersunset {
    background-image: linear-gradient(to bottom, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%); }
  .color-tangerine {
    background-image: linear-gradient(to left bottom, #FA6400, #FFA505); }
  .color-mutedorange {
    background: linear-gradient(to bottom, #cf514f 0%, #cf864f 100%); }
  .color-anotherdawn {
    background: linear-gradient(to bottom, #50cec1 0%, #c7b752 100%); }

#stats {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column; }
  #stats li {
    display: inline-flex;
    align-items: center;
    font-size: 18px; }
    #stats li span {
      margin: 0;
      padding: 0;
      min-width: 50px;
      font-weight: 700; }
    #stats li p {
      margin: 0;
      padding: 0; }

/*# sourceMappingURL=app.css.map */