:root {
  --show-info-duration: .3s;
}

body {
  --content-width: clamp(400px, 80vmin, 800px);
  --font-size: clamp(14px, 3vmin, 20px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font: normal var(--font-size)/1.4 helvetica, sans-serif;
}

.hidden {
  display: none !important;
}

.back-icon {
  width: 16px;
  height: 16px;
}

.github-icon {
  width: 24px;
  height: 24px;
}

.github-link {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  opacity: 0.7;
}
.github-link:hover, .github-link:focus {
  opacity: 1;
}

#colorsTable {
  display: none;
}

.container {
  position: relative;
  padding: 2vmin;
  top: -2vmin;
  left: -2vmin;
}

.hue-control {
  display: flex;
  flex-direction: column;
  width: var(--content-width);
  margin-bottom: 1.5vmin;
  font-size: 0.8em;
}
.hue-control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 1.1em;
  margin-bottom: 0.75vmin;
}

.hue-value {
  display: inline-block;
  min-width: 4vmin;
  text-align: center;
}

.tolerance-text {
  font-size: 0.8em;
  color: #333;
}

.hue-slider {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  position: relative;
  flex: 1;
  height: 8px;
  margin-left: 2vmin;
  border-radius: 5px;
  transition: all 0.3s;
  background: linear-gradient(to right, #f07575 0%, #f0b375 8.3%, #f0f075 16.6%, #b3f075 25%, #75f075 33.3%, #75f0b3 41.6%, #75f0f0 50%, #75b3f0 58.3%, #7575f0 66.6%, #b375f0 75%, #f075f0 83.3%, #f075b3 91.6%, #f07575 100%);
}
.hue-slider.mono {
  background: linear-gradient(to bottom, #444 0%, #111 100%);
}
.hue-slider:not(.mono):focus {
  height: 10px;
  background: linear-gradient(to right, red 0%, #ff8000 8.3%, yellow 16.6%, #80ff00 25%, lime 33.3%, #00ff80 41.6%, aqua 50%, #0080ff 58.3%, blue 66.6%, #8000ff 75%, fuchsia 83.3%, #ff0080 91.6%, red 100%);
}
.hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(120deg, #444 30%, #111 100%);
  box-shadow: 0 0 0 2px white, 0 0 2px 3px #444;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.hue-slider::-moz-range-thumb {
  -moz-appearance: none;
       appearance: none;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(120deg, #444 30%, #111 100%);
  box-shadow: 0 0 0 2px white, 0 0 2px 3px #444;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.hue-slider:not(.mono):focus::-webkit-slider-thumb {
  background: linear-gradient(120deg, hsl(calc(var(--pos) * 360), 90%, 50%) 30%, hsl(calc(var(--pos) * 360), 100%, 40%) 100%);
  box-shadow: 0 0 0 3px white, 0 0 2px 4px hsl(calc(var(--pos) * 360), 100%, 50%);
}
.hue-slider:not(.mono):focus::-moz-range-thumb {
  background: linear-gradient(120deg, hsl(calc(var(--pos) * 360), 90%, 50%) 30%, hsl(calc(var(--pos) * 360), 100%, 40%) 100%);
  box-shadow: 0 0 0 3px white, 0 0 2px 4px hsl(calc(var(--pos) * 360), 100%, 50%);
}

.mono-toggle {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  color: inherit;
  outline: none;
  width: 15px;
  height: 15px;
  margin-left: 2vmin;
  border-radius: 50%;
  transition: background-position 0.2s;
  cursor: pointer;
  background-size: 200%;
  background-image: linear-gradient(to right, white 24%, #777 28%, #777 70%, white 74%);
  box-shadow: 0 0 0 1.5px white, 0 0 0 3px #777;
}
.mono-toggle:hover {
  background-image: linear-gradient(to right, white 24%, #333 28%, #333 70%, white 74%);
  box-shadow: 0 0 0 1.5px white, 0 0 0 3px #333;
}
.mono-toggle:active {
  background-image: linear-gradient(to right, #f5f5f5 24%, #888 28%, #888 70%, #f5f5f5 74%);
  box-shadow: 0 0 0 1.5px white, 0 0 0 3px #888;
}
.mono-toggle:checked, .mono-toggle:checked:active {
  background-position: 89% 0;
  background-image: linear-gradient(to right, white 24%, black 28%, black 70%, white 74%);
  box-shadow: 0 0 0 1.5px white, 0 0 0 3px black;
}
.mono-toggle:focus {
  box-shadow: 0 0 0 1.5px white, 0 0 0 3px #333, 0 0 2.25px 6px rgba(0, 0, 0, 0.125);
}
.mono-toggle:checked:focus {
  box-shadow: 0 0 0 1.5px white, 0 0 0 3px black, 0 0 2.25px 6px rgba(0, 0, 0, 0.25);
}

.chart-container {
  position: relative;
  width: var(--content-width);
  height: var(--content-width);
}

.chart {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-auto-flow: row;
}
.chart.contain {
  overflow: hidden;
}
.chart .row {
  display: grid;
  grid-auto-flow: column;
}
.chart .row .color-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  color: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.125em;
  background: var(--background);
  color: var(--color);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  transition: transform 0.2s;
}
.chart .row .color-button:hover, .chart .row .color-button:focus {
  outline: none;
  transform: scale(1.04);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.125);
}
.chart .row .color-button:active {
  transform: scale(1.02);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.125);
}
.chart .row .color-button.active {
  transition: transform 0.6s;
}
.chart .row .color-button.active, .chart .row .color-button.deactivating {
  transform: scale(16);
  color: transparent;
}
.chart .row .color-button.deactivating {
  -webkit-animation: deactivate forwards calc(2 * var(--show-info-duration));
          animation: deactivate forwards calc(2 * var(--show-info-duration));
}
@-webkit-keyframes deactivate {
  from, 70% {
    color: transparent;
  }
  to {
    color: var(--color);
    transform: scale(1);
  }
}
@keyframes deactivate {
  from, 70% {
    color: transparent;
  }
  to {
    color: var(--color);
    transform: scale(1);
  }
}

.color-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-5%) scale(0.8);
  transition: opacity var(--show-info-duration), transform var(--show-info-duration);
}
.color-info.active {
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: var(--show-info-duration);
}
.color-info-container {
  --info-padding: 3em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  padding: var(--info-padding);
  box-sizing: border-box;
  border: 1px solid;
  font-size: 0.8em;
  color: var(--color);
  border-color: var(--color);
}
.color-info-name {
  font-size: 3em;
  font-weight: 100;
  line-height: 1.3;
  margin-bottom: 0.33em;
  overflow: hidden;
  outline: none;
}
.color-info .marquee {
  display: inline-block;
  -webkit-animation: marquee 4s 1s infinite;
          animation: marquee 4s 1s infinite;
}
@-webkit-keyframes marquee {
  from, 12%, 88%, to {
    transform: translateX(0);
  }
  48%, 52% {
    background: transparent;
    transform: translateX(calc( var(--marquee-amount) - .1em ));
  }
}
@keyframes marquee {
  from, 12%, 88%, to {
    transform: translateX(0);
  }
  48%, 52% {
    background: transparent;
    transform: translateX(calc( var(--marquee-amount) - .1em ));
  }
}
.color-info-row {
  font-size: 1.4em;
  font-weight: 100;
  margin-bottom: 0.33rem;
  outline: none;
}
.color-info-row--alter {
  font-size: 1.8em;
}
.color-info-close-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  color: inherit;
  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  font-size: 1.25em;
  cursor: pointer;
  transition: all 0.3s;
}
.color-info-close-button:hover, .color-info-close-button:focus {
  padding-right: 1em;
}
.color-info-close-button .back-icon {
  margin-right: 0.25em;
}

.axis {
  font-size: 0.5em;
  letter-spacing: 0.25em;
  text-align: center;
  text-transform: uppercase;
}
.axis::before, .axis::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 33%;
  height: 1px;
  background: #aaa;
}
.axis::before {
  left: 0;
}
.axis::after {
  right: 0;
}

.lightness-axis {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  transform-origin: top right;
  transform: rotate(-90deg) translateY(200%) rotate(180deg) translateX(100%);
}

.saturation-axis {
  position: relative;
  transform: translateY(100%);
}