@keyframes fadeInFromNone {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
* {
  box-sizing: border-box;
}

html {
  font-size: 14px;
}

body {
  margin: 0;
  transition: filter 500ms;
  font-family: Relentless, sans-serif;
  --front-color: #000;
  --back-color: #fff;
}
body.inverted {
  filter: invert(100%);
}

button {
  cursor: pointer;
}

#container {
  display: grid;
  grid-template-columns: 30px 280px auto;
}
#container ul {
  padding: 0;
}
#container li {
  list-style: none;
}
#container a {
  color: inherit;
  text-decoration: inherit;
}
#container input, #container textarea, #container button {
  -webkit-appearance: none;
  font-family: inherit;
}
#container input:focus, #container textarea:focus, #container button:focus {
  outline: none;
  /* outline: 4px solid #ff851b;

  position: relative;
  z-index: 10; */
}
#container input[type=range] {
  min-width: 60px;
  background-color: transparent;
  margin: 0;
  cursor: pointer;
}
#container input[type=range]::-moz-range-thumb {
  background-color: var(--front-color);
  border: none;
  width: 0.57em;
  height: 0.57em;
}
#container input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -3px;
  background-color: var(--front-color);
  border: none;
  border-radius: 10000px;
  width: 0.57em;
  height: 0.57em;
}
#container input[type=range]::-moz-range-track {
  height: 2px;
  background-color: var(--front-color);
  border-radius: 3px;
}
#container input[type=range]::-webkit-slider-runnable-track {
  height: 2px;
  background-color: var(--front-color);
  border-radius: 3px;
}

/* ribbon */
#ribbon {
  background-color: var(--front-color);
  height: 100vh;
  padding: 0 2.5px;
  overflow: hidden;
  font-size: 25px;
  color: var(--back-color);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-lr;
  writing-mode: sideways-lr;
}

/* column */
#column {
  display: grid;
  grid-template-rows: repeat(4, min-content) auto min-content;
  height: 100vh;
  background-color: var(--back-color);
  border-right: 1px solid var(--front-color);
  color: var(--front-color);
  font-size: 0;
}

.column-cell {
  border-bottom: 1px solid var(--front-color);
}

.column-cell-clickable > * {
  padding: 0.9rem 1rem;
  font-size: 1rem;
}
.column-cell-clickable:hover {
  background-color: #eee;
}
.column-cell-clickable label {
  display: block;
  cursor: pointer;
  line-height: 1;
}
.column-cell-clickable input[type=checkbox] {
  position: relative;
  width: 2em;
  height: 1.2em;
  background-color: var(--back-color);
  box-shadow: inset -0.8em 0 0 0 var(--front-color);
  border: 1px solid var(--front-color);
  border-radius: 2em;
  cursor: pointer;
  transition: 500ms;
  float: right;
  position: relative;
  top: -6px;
  font-size: 17px;
}
.column-cell-clickable input[type=checkbox]:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 1.04em;
  height: 1.04em;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
  transition: 500ms;
}
.column-cell-clickable input[type=checkbox]:checked {
  box-shadow: inset 0.8em 0 0 0 var(--front-color);
  border-color: var(--front-color);
}
.column-cell-clickable input[type=checkbox]:checked:after {
  left: 0.8em;
}
.column-cell-clickable button {
  width: 100%;
  background-color: transparent;
  border: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  text-align: left;
}
.column-cell-clickable svg {
  float: right;
}
.column-cell-clickable svg path {
  stroke: var(--front-color);
}
.column-cell-clickable #advanced-btn svg {
  position: relative;
  top: 3px;
  right: 3px;
  transition: 300ms transform;
}
.column-cell-clickable #advanced-btn path {
  stroke-width: 1.5px;
}
.column-cell-clickable #advanced-btn:not(.active) svg {
  transform: rotate(180deg);
}
.column-cell-clickable .input-toggle-mode {
  display: none;
}
.column-cell-clickable .input-toggle-mode.active {
  display: block;
}

.column-cell-button-large {
  padding: 0.9rem 1rem;
}
.column-cell-button-large button {
  width: 100%;
  padding: 0.7em 0;
  background-color: var(--back-color);
  border: 1px solid var(--front-color);
  color: var(--front-color);
  font-size: 1.2rem;
  text-transform: uppercase;
}
.column-cell-button-large button:hover {
  --front-color: #fff;
  --back-color: #000;
  border-color: var(--back-color);
}

.column-cell-sliders {
  overflow-y: auto;
  border-bottom: none;
  padding: 0.9rem 1rem;
}
.column-cell-sliders li {
  display: grid;
  grid-template-columns: 100px auto 25px;
  grid-column-gap: 10px;
}
.column-cell-sliders label {
  display: inline-block;
  width: 100px;
  overflow-x: hidden;
  text-overflow: "...";
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1.5;
}
.column-cell-sliders input[type=range] {
  font-size: 1rem;
}
.column-cell-sliders input[type=text] {
  background-color: transparent;
  border: none;
  color: #aaa;
  font-size: 1rem;
}

#advanced-cell:not(.active) {
  height: 0;
  padding: 0;
  border: none;
}

/* window */
#window {
  background-color: var(--back-color);
  height: 100vh;
  color: var(--front-color);
  font-size: 0;
}
#window.blurred canvas, #window.blurred .textbox {
  filter: blur(2px);
}

#window-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#window-loader progress[value] {
  -webkit-appearance: none;
  width: 200px;
  height: 8px;
  background-color: #eee;
  border: none;
  border-radius: 10px;
}
#window-loader progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border: none;
  border-radius: 10px;
}
#window-loader progress[value]::-moz-progress-bar {
  background-color: var(--front-color);
  border-radius: 10px;
}
#window-loader progress[value]::-webkit-progress-value {
  background-color: var(--front-color);
  border-radius: 10px;
}

#window-grid {
  display: none;
  height: 100%;
  overflow-y: auto;
  --num-columns: 5;
}
#window-grid.active {
  display: block;
  animation: fadeInFromNone 800ms ease-out;
}
#window-grid ul {
  display: grid;
  grid-template-columns: repeat(var(--num-columns), 1fr);
  height: 100%;
  margin: 0;
}
#window-grid li {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

#window-display {
  display: none;
  height: 100%;
  grid-template-areas: "header header" "left right";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content auto;
}
#window-display.active {
  display: grid;
  animation: fadeInFromNone 800ms ease-out;
}
#window-display .glyph-list {
  grid-area: header;
  background-color: var(--front-color);
  display: grid;
  grid-template-columns: repeat(36, 1fr);
}
#window-display .glyph-list li {
  border-bottom: 1px solid var(--back-color);
  border-right: 1px solid var(--back-color);
}
#window-display .glyph-list li:nth-of-type(n+37) {
  border-bottom-color: var(--front-color);
}
#window-display .glyph-list li:nth-of-type(36n) {
  border-right: none;
}
#window-display .glyph-list li a {
  display: block;
  padding: 0.6em 0;
  transition: 300ms;
  color: var(--back-color);
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}
#window-display .glyph-list li a:hover, #window-display .glyph-list li a.active {
  background-color: var(--back-color);
  color: var(--front-color);
}
#window-display .display-canvas {
  grid-area: left;
  border-right: 1px solid var(--front-color);
}
#window-display .textbox {
  grid-area: right;
}
#window-display .textbox input[type=range] {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.5rem;
}
#window-display .textbox textarea {
  width: 100%;
  height: calc(100% - 60px);
  border: none;
  resize: none;
  padding: 0 2rem 1rem 2rem;
  font-family: Computed, Relentless, sans-serif;
  font-size: 1.9rem;
}
#window-display .textbox textarea::-moz-placeholder {
  color: #aaa;
}
#window-display .textbox textarea ::-webkit-input-placeholder {
  color: #aaa;
}

.explosion {
  display: block;
  width: 100vw;
  height: 100vh;
}

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