@font-face {
    font-family: 'fira-sans-bold';
    src: url('fonts/firasans-bold-webfont.woff2') format('woff2'),
         url('fonts/firasans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fira-sans-regular';
    src: url('fonts/firasans-regular-webfont.woff2') format('woff2'),
         url('fonts/firasans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fira-mono-regular';
    src: url('fonts/FiraMono-Regular.woff2') format('woff2'),
         url('fonts/FiraMono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
  --c-meta: #c3c3db;
  --c-background: #1c1c36;
  --c-tag: #c76ebc;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

#loader {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  background-color: var(--c-background);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 500ms;
}

@keyframes loading {
  0% {
    background-position: 0% 50%;
    transform: rotate(-10deg);
  }
  100% {
    background-position: 100% 50%;
    transform: rotate(10deg);
  }
}

#loader .swatch {
  width: 200px !important;
  height: 200px !important;
  background: linear-gradient(230deg, #82ccd7, #E6DB6F, #81c994);
  background-size: 200% 200%;
  animation: loading 1s infinite alternate;
}

#main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
}

#color-selection {
  background-color: var(--c-background);
}

#intro {
  font-family: "fira-sans-regular", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: var(--c-meta);
  text-align: center;
  margin: 20px 40px;
}

/* FILTERS MENU */

#filters {
  display: none;
  justify-content: space-around;
  padding: 8px 4px 4px 4px;
  font-family: 'fira-mono-regular', monospace;
}

#filters > div,
#intro > span {
  color: var(--c-tag);
  text-decoration: underline;
}

#filters > div:hover,
#intro > span:hover {
  cursor: pointer;
  text-decoration: none;
}

/* PREVIEW WIDGET */

#widget {
  display: none;
  margin: 1vw;
  border-radius: 15px;
  border: 1px solid var(--c-meta);
  font-family: "fira-sans-regular", Helvetica, Arial, "Lucida Grande", sans-serif;
}

#widget .title {
  width: 100%;
  height: 2em;
  border-radius: 15px 15px 0 0;
  color: var(--c-background);
  background-color: var(--c-meta);
  padding: 10px 23px;
  font-size: 20px;
  font-weight: bold;
}

#widget p {
  margin: 18px;
  color: var(--c-meta);
}

#widget .buttons {
  display: flex;
  justify-content: flex-end;
}

#widget .button {
  background-color: var(--c-tag);
  color: var(--c-background);
  border-radius: 25px;
  padding: 5px 15px;
  display: inline-block;
  cursor: pointer;
  margin: 0 18px 18px 0;
  font-weight: 700;
}

/* SWATCHES GRID */

.g-text { grid-area: text; }
.g-background { grid-area: background; }
.g-meta { grid-area: meta; }
.g-tag { grid-area: tag; }
.g-tag_bracket { grid-area: tag_bracket; }
.g-attribute { grid-area: attribute; }
.g-qualifier { grid-area: qualifier; }
.g-comment { grid-area: comment; }
.g-variable { grid-area: variable; }
.g-variable_2 { grid-area: variable_2; }
.g-variable_3 { grid-area: variable_3; }
.g-variable_callee { grid-area: variable_callee; }
.g-def { grid-area: def; }
.g-builtin { grid-area: builtin; }
.g-property { grid-area: property; }
.g-keyword { grid-area: keyword; }
.g-string { grid-area: string; }
.g-string_2 { grid-area: string_2; }
.g-number { grid-area: number; }
.g-atom { grid-area: atom; }
.g-operator { grid-area: operator; }
.g-line_numbers { grid-area: line_numbers; }
.g-active_line_bg { grid-area: active_line_bg; }
.g-selected { grid-area: selected; }
.g-match_color { grid-area: match_color; }
.g-match_border { grid-area: match_border; }
.g-hint_color { grid-area: hint_color; }
.g-hint_bg { grid-area: hint_bg; }
.g-hint_shadow { grid-area: hint_shadow; }

#swatches {
  display: none;
  /* grid-template-columns: 1fr 1fr 1fr 1fr; */
  grid-gap: 1vw;
  padding: 1vw;
  max-height: calc(100vh - 145px - 31px - 2vw); /* minus widget && filters height */
  overflow-y: scroll;
}

.swatch-filter-html {
  grid-template-areas:
    'background background meta comment'
    'tag_bracket tag tag text'
    'attribute attribute string string'
}

.swatch-filter-css {
  grid-template-areas:
    'meta background background text'
    'comment variable_3 variable_2 atom'
    'tag tag qualifier qualifier'
    'property number keyword variable_callee'
    'variable def builtin string'
}

.swatch-filter-js {
  grid-template-areas:
    'meta background background comment'
    'text text operator operator'
    'keyword keyword def variable'
    'variable_2 property string string'
    'number number atom string_2'
}

.swatch-filter-meta {
  grid-template-areas:
    'meta background background selected'
    'line_numbers active_line_bg match_color match_border'
    'text hint_bg hint_color hint_shadow'
}

.swatch-filter-all {
  grid-template-areas:
  'meta meta background background'
  'tag tag_bracket text comment'
  'attribute qualifier string string_2'
  'number atom operator selected'
  'variable variable_2 variable_3 variable_callee'
  'def builtin property keyword'
  'line_numbers active_line_bg match_color match_border'
  'hint_bg hint_color hint_shadow hint_shadow';
}

#loader .swatch,
#swatches .swatch {
  border-radius: 20px;
  height: 10vw;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  cursor: pointer;
}

#loader .swatch > label,
#swatches .swatch > label {
  border-radius: 0 0 20px 20px;
  padding: 15px;
  background: #f0eff1;
  color: #282828;
  font-family: 'fira-mono-regular', monospace;
  font-size: 12px;
  cursor: pointer;
}