/* General styling */
body {
  text-align: center;
  font-weight: bolder;
  font-family: monospace;
  color: #EEE;
  font-weight: bolder;
  font-size: 110%;
  text-shadow: 1px 1px 1px black;
  margin: 0;
}

/* Color picker general */
.colorPicker {
  margin: 0;
  display: flex;
  border: none;
  border-radius: 0;
  background-color: transparent;
}

.colorPicker input, .colorPicker label {
  background: transparent;
  border: 0;
  text-align: right;
  color: #EEE;
  text-shadow: 1px 1px 1px black;
  font-weight: bold;
  text-transform: uppercase;
  font-family: Consolas;
}

/* Color picker internal text */
.colorPicker .currentColor {
  text-shadow: 1px 1px 2px black, 1px 1px 1px gray;
  min-height: 2.3rem;
  display: table;
}

.colorPicker .currentColor::before {
  display: table-cell;
  vertical-align: middle;
}

.darkblurple .colorPicker .currentColor::before {
  content: 'Dark Blurple';
}

.blurple .colorPicker .currentColor::before {
  content: 'Blurple';
}

.white .colorPicker .currentColor::before {
  content: 'White';
}

.colorPicker .oned, .colorPicker .twod, .colorPicker .extras {
  border: 0;
  margin: 2px;
  position: relative;
}

.twod .bg {
  max-width: 100%;
}

.blurplecanvascontainer, .colorlevels {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Threshold layouts */
.threshold {
  display: flex;
  justify-content: center;
  margin-left: 5px;
  margin-right: 5px;
}
.threshold .labelcontainer {
  display: inline-table;
  height: 24px;
}
.threshold .labelcontainer label {
  display: table-cell;
  vertical-align: middle;
}
.threshold .thresholdcontainer {
  padding-left: 2px;
  flex-grow: 1;
}
.threshold .thresholdcontainer input {
  width: 100%;
}

.controls {
  display: flex;
  justify-content: center;
}
.controls input {
  color: black;
  width: 87px; /* cover up the 'No file chosen' text */
}
.controls input[type="checkbox"] {
  width: 20px;
  margin-top: 5px;
}
.controls span {
  margin-top: 2px;
}

#status:not(.idle) {
  color: salmon;
  text-decoration: underline;
}

/* */
.blurpledownloadanchor, #blurplecanvas {
  max-width: 100%;
  max-height: 100%;
}
#blurplecanvas {
  box-sizing: border-box;
  border: 2px solid black;
}

#blurplecanvas, .output-image img {
  /* https://stackoverflow.com/a/51117224 */
  background-position: 0px 0px, 10px 10px;
  background-size: 20px 20px;
  background-image:
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
    linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
}

.output-images {
  margin-left: 20px;
  margin-right: 20px;
}
.output-image {
  display: inline-block;
  margin-left: 4px;
  margin-right: 4px;
}
.output-image a {
  display: block;
  font-size: 1.2rem;
  color: white;
}
.output-image img {
  width: 120px;
  border: 1px solid black;
}


/* Overall layout */
.blurplifier {
  display: flex;
  justify-content: center;
}

.colorlevels {
  max-width: 100vw;

  box-sizing: border-box;
  padding: 8px;
}

.blurplecanvascontainer {
  flex-basis: 0;
  flex-grow: 1;
  image-rendering: optimizeSpeed;
  image-rendering: pixelated;

  box-sizing: border-box;
  padding: 8px;
}
.labels {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media only screen and (max-width: 1200px) {
  .blurplifier {
    flex-direction: column;
  }

  .labels {
    display: grid;
    width: 100%;
    grid-template-columns:
    [db-start] minmax(0,1fr)                    [db] minmax(0,1fr) [db-end] 0px
     [b-start] minmax(0,1fr) [thresholdgap] 0px  [b] minmax(0,1fr)  [b-end] 0px
     [w-start] minmax(0,1fr)                     [w] minmax(0,1fr)  [w-end] 0px;
    grid-template-rows: [labels] 1fr [thresholds] auto [end] 0px;
  }

  .colorpickercontainer {
    max-width: 100%;
  }

  .label.darkblurple {
    grid-column: db-start / db-end;
    grid-row: labels;
  }

  .label.blurple {
    grid-column: b-start / b-end;
    grid-row: labels;
  }

  .label.white {
    grid-column: w-start / w-end;
    grid-row: labels;
  }

  .label.threshold {
    grid-row: thresholds;
  }

  .label.threshold:nth-child(2) {
    grid-column: db-start / thresholdgap;
  }
  .label.threshold:nth-of-type(4) {
    grid-column: thresholdgap / w;
  }
}

@media only screen and (max-width: 600px) {
  .blurplecanvascontainer {
    position: sticky;
  }

  .labels {
    display: flex;
  }

  .label {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
    margin: auto;
    max-width: 100%;
  }

  .label.threshold {
    width: 100%;
  }
}

/* Secret button secretness */
@keyframes moveBackground {
    0% { background-position:   0px 0px; }
  100% { background-position: 200px 0px; }
}
#rgb {
  color: linear-gradient(red, blue);
  background: linear-gradient(
    45deg,
    red, orange, yellow, green, blue, indigo, violet,
    violet, red, orange, yellow, green, blue
  );
  background-size: 200px 100px;
  background-position:   0px 0px;
  text-shadow: 1px 1px 1px black;
  font-weight: bold;
  color: white;
  border: 2px solid black;
  border-radius: 5px;
  width: 100px;
  margin: 5px;
}
#rgb:hover {
  animation: 1s moveBackground infinite linear;
}