body {
  overflow: hidden;
}

canvas {
  image-rendering: pixelated;
}

div#params {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 30px;
  right: 30px;
  gap: 10px;
  z-index: 1;
}

input[type='range'] {
  height: 1px;
  background: black;
  appearance: none;
  outline: none;
  cursor: pointer;
  width: 90px;
}

input[type='range']::-webkit-slider-thumb {
  appearance: none;
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background: black;
  outline: none;
}

div#tool {
  position: absolute;
  pointer-events: none;
  width: var(--tool-size);
  height: var(--tool-size);
  border: solid 1px black;
}

label#file {
  border-radius: 100px;
  background: white;
  padding: 8px 17px;
  cursor: pointer;
  display: flex;
  justify-content: center;
}

label#file input {
  display: none;
}

button {
  display: flex;
  align-items: center;
  gap: 5px;
}