:root {
  --target-font-size: min(10vw, 5rem);
  --target-size: min(23vw, 10rem);

  --solved-font-size: min(8vw, 2rem);
  --solved-size: max(10vw, 4rem);

  --input-size: max(10vh, 4rem);
  --input-font-size: min(6vw, 2rem);

  --keyboard-size: min(35vh, 20rem);
  --key-size: min(8vw, 3rem);
  --key-font-size: min(6vw, 3rem);

  --background: #444;
  --foreground: #aaa;
  --middleground: #555;
  --lowground: #222;
  --accent: #4a6;

  --height: 1.5em;
}


#canvas {
  position: absolute;
  width: 70%;
  height: auto;
  border: none;
  cursor: pointer;
}

@keyframes rainbow {
  0% {
    background-color: hsl(0, 100%, 50%);
  }

  16.7% {
    background-color: hsl(60, 100%, 50%);
  }

  33.3% {
    background-color: hsl(120, 100%, 50%);
  }

  50% {
    background-color: hsl(180, 100%, 50%);
  }

  66.7% {
    background-color: hsl(240, 100%, 50%);
  }

  83.3% {
    background-color: hsl(300, 100%, 50%);
  }

  100% {
    background-color: hsl(360, 100%, 50%);
  }
}

#upload-button {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 5rem;
  height: 5rem;
  transform: translate(-2.5rem, -2.5rem);
  font-size: 2.5rem;
  animation: rainbow 5s linear infinite;
  color: #fff !important;
}

#root {
  position: absolute;
  left: 70%;
}

.mask-button,
.color-input {
  max-width: var(--height);
  max-height: var(--height);
  min-width: var(--height);
  min-height: var(--height);
}


* {
  color: var(--foreground) !important;
  /* border-color: var(--foreground) !important; */
  background-color: var(--background);
  /* background-color:var(--background) !important; */

  /*  border-radius:0.5rem;*/
  /*  margin:0.1em;*/

  box-sizing: border-box;
  font-family: sans;
  /* font-family:monospace; */
  /* font-size:1.25rem; */
  overscroll-behavior: none !important;

  scrollbar-color: var(--foreground) var(--background);
}

ul {
  padding-left: 1em;
}

.mutator {
  border: 1px solid var(--middleground);
}

/* .no-select { */
/* -webkit-tap-highlight-color: transparent; */
/* -webkit-touch-callout: none; */
/* -webkit-user-select: none; */
/* -khtml-user-select: none; */
/* -moz-user-select: none; */
/* -ms-user-select: none; */
/* user-select: none; */
/* } */

/* .no-select:focus { */
/* outline: none !important; */
/* } */

/*
  elm-hot creates an additional div wrapper around the app to make HMR possible.
  This could break styling in development mode if you are using Elm UI.

  More context in the issue:
    https://github.com/halfzebra/create-elm-app/issues/320

[data-elm-hot="true"] {
  height: inherit;
}

*/

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh !important;
  /*  max-height:100vh;*/
  /*  touch-action: none;*/
  /*  min-height:-webkit-fill-available;*/
  /*  scroll-padding-bottom: env(safe-area-inset-bottom);*/
  overscroll-behavior: none !important;

}

body {
  /*  font-family: 'Source Sans Pro', 'Trebuchet MS', 'Lucida Grande', 'Bitstream Vera Sans', 'Helvetica Neue', sans-serif;*/
  background-color: var(--background);
}

form {
  display: inline;
}

span,
button {
  cursor: pointer;
}

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: var(--accent);
}

option {
  outline-color: var(--accent);

}

input.narrow {
  width: 4em;
}


p,
li {
  font-size: 0.75rem;
}

strong {
  font-size: 1.0rem;
  font-weight: 400;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border: 1px solid var(--foreground);
  color: var(--accent) !important;
}

a {
  font-size: 0.75rem;
  color: var(--accent) !important;
}

button,
input,
select,
.color-palette,
textarea {
  /* border: 1px solid var(--foreground); */
  border: none;
  background-color: var(--middleground);
  border-collapse: collapse !important;

}


input,
textarea {
  background-color: var(--lowground);
}

input,
select {
  transform: translateY(1px);
  /* HACK CSS, WHY? */
}

#symbols {
  display: none;
}

/* 
.zone {
  fill: #f00;
  stroke-dasharray: 10;
} */

/* .zone-label { */
/* font-family: monospace; */
/* } */

svg text {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

svg text::selection {
  background: none;
}

.inactive {
  opacity: 0.4;
}

button,
input,
select,
.color-palette {

  min-height: var(--height);
  /* min-height: 2.2rem; */
  max-height: 2.2rem;
  box-sizing: border-box;
  margin: 0.2rem;
}


button {
  min-width: 2.2rem;
  vertical-align: middle;
  text-align: center;
}

.color-palette {
  /* border: 1px solid var(--foreground); */
  padding: 0.5rem;
  margin: 0;
}

.palette-color {
  min-width: 0.5rem;
  min-height: 1rem;
  border: none;
  margin: 0;
}

.palette-color-selected {
  /* border-radius: 50%; */
  /* min-width: 1rem; */
  min-height: 0.5rem;
}

.palette-color.transparent {
  min-width: calc(1rem - 2px);
  box-sizing: border-box;
  border: 1px solid var(--foreground)
}

#help {
  position: fixed;
  top: 3rem;
  right: 0;
  overflow-y: scroll;
  white-space: pre-wrap;
  width: 50vw;
  height: calc(100vh - 3rem - 4rem);
  padding: 1rem;
  /* border: 1px solid var(--foreground); */
}

#help-button {
  position: fixed;
  right: 0;
  top: 0;
}

#support-button {
  position: fixed;
  right: 0;
  bottom: 0;
  color: #f00 !important;
}

code {
  background-color: var(--lowground);
  color: var(--foreground) !important;
  padding: 0.125rem;
}

#bottom-bar {
  padding-left: 8px;
  margin: 0;
  padding: 0.5rem;
  color: #eee;
  position: relative;
  bottom: 0;
  width: 100vw;
  height: calc(100vh - 3rem - 75vh);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.2rem;

}

use {
  pointer-events: none;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  /* width: 10rem; */
  height: var(--height);
  padding: 0;
  outline: none;
  background-color: var(--middleground);
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: var(--height);
  background-color: var(--foreground);
  cursor: pointer;
  /* border: 1px solid var(--black); */
}

.slider::-moz-range-thumb {
  width: 1rem;
  height: var(--height);
  background-color: var(--foreground);
  cursor: pointer;
  /* border: 1px solid var(--black); */
}