body {
  background: black;
  font-family: "Chivo Mono", monospace;
  color: white;
  padding-left: 2%;
  touch-action: manipulation;
}
h2 {
  margin: 0;
  margin-top: 0.6em;
}
a {
  color: white;
}
a:hover {
  color: gray;
}
img {
  margin-block: 1%;
}
canvas {
  border: 1px solid transparent;
  background: white;
  cursor: crosshair;
  touch-action: none;
}
.color-btn {
  width: 30px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
  border: 3px solid gray;
}
/*.color-btn.active {
  outline: 2px solid white;
  box-shadow: 0 0 5px gray;
}*/
input[type="color" i] {
  inline-size: 60px;
  block-size: 60px;
  border-width: 1px;
  display: inline-block;
}
input[type="color" i]:hover {
  cursor: pointer;
}
input[type=range] {
  margin-top: 1.2em;
  margin-bottom: 0.7em;
  height: 2em;
  width: 97%;
  -webkit-appearance: none;
  background: gray;
  box-sizing: border-box;
  overflow: visible;
  touch-action: none;
}
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 2em;
  width: 1em;
  background: #ffffff;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  border: 1px solid #000000;
  height: 2em;
  width: 1em;
  background: #ffffff;
  margin-top: -14px;
  cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  border: 1px solid #000000;
  height: 2em;
  width: 1em;
  background: #ffffff;
  cursor: pointer;
}
button {
  border: 1px solid gray;
  background: transparent;
  padding: 8%;
  color: white;
  font-family: "Chivo Mono", monospace;
}
button:hover {
  background: gray;
  cursor: pointer;
}
button.active {
  background: gray;
}
kbd {
  background: #4d4d4d;
  padding-block: 0.3%;
  padding-inline: 0.7%;
  border-radius: 15%;
  font-style: italic;
  font-size: 1.1em;
}
#mainTab {
  border: none;
  margin-bottom: 20px;
  min-width: 250px; min-height: 15px;
  padding: 7px;
}
@font-face {
  font-family: "Chivo Mono"; 
  src: url("/fonts/ChivoMono.ttf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}
textarea {
  resize: none;
  font-size: 1.2em;
  width: 100%;
  height: 35%;
  overflow-y: auto;
  max-height: 200px;
  min-height: 60px;
  box-sizing: border-box;
}
#filename {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
input[type="file"]::file-selector-button {
  border: none;
  padding: 6px 12px;
  background: #333;
  color: white;
  border-radius: 6px;
}
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  z-index: 9999;
}
.hidden {
  display: none;
}
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid lightgray;
  border-top: 5px solid black;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.tab {
  display: flex;
  overflow: hidden;
  border: none;
}
.tab button {
  background-color: inherit;
  float: left;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  border: 1px solid transparent; 
}
.tab button:hover {
  background-color: gray;
}
.tab button.active {
  border: 1px solid white;
}
.tabcontent {
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  padding-block: 2%;
}
.column {
  width: 50%;
}