@import url('https://fonts.googleapis.com/css2?family=Abel&family=Share+Tech+Mono&display=swap');
:root {
  --highlight-fg-color: cornflowerblue;
  --highlight-fg-color-dark: #01215d;
  --primary-text-color: whitesmoke;
  --primary-bg-color: #333;
  --secondary-bg-color: #666;
  --sans-font: "Abel", sans-serif;
  --mono-font: "Share Tech Mono", monospace;
  --tool-button-bg-color: #fff3;
  --checker-color-1: #f1f1f1;
  --checker-color-2: #cccccc;
  --active-tool-border-width: 3px;
}

* {
  user-select: none;
}

body {
  background-color: var(--primary-bg-color);
  font-family: var(--sans-font);
  color: var(--primary-text-color);
  cursor: url("img/cursor-default.png"), auto
}

body.pencil-cursor {
  cursor: url("img/cursor-pencil.png") 0 16, auto;
}

body.line-cursor, body.rectangle-cursor, body.ellipse-cursor {
  cursor: url("img/cursor-crosshair-1.png") 8 8, auto;
}

body.bucket-cursor {
  cursor: url("img/cursor-bucket.png") 0 16, auto;
}

body.eye-dropper-cursor {
  cursor: url("img/cursor-eye-dropper.png") 0 16, auto;
}

body.eraser-cursor {
  cursor: url("img/cursor-eraser.png") 0 16, auto;
}

.selectable>ul>li, .selectable input, .selectable canvas, .selectable .color-palette-item {
  cursor: url("img/cursor-selection.png"), auto
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mono-font);
  margin: 0;
}

.tool-list>li, .color-palette-item {
  background-color: var(--tool-button-bg-color);
  position: relative;
}

#page-header {
  padding: 0.75em 1em;
}

#main-canvas-section {
  background-color: var(--secondary-bg-color);
  border-radius: 5px 5px 0 0;
}

.checkerboard-background, #main-canvas {
  background-image: url(img/fake.png);
  background-size: calc(var(--other-canvas-size) / 10) calc(var(--other-canvas-size) / 10);
  image-rendering: pixelated;
  background-position: center;
}

#colors input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.active-tool::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border: var(--active-tool-border-width) solid var(--highlight-fg-color);
}

#main-canvas {
  background-size: 2px 2px;
  transition: all 200ms ease;
  transform: scale(1);
}

#mouse-stats {
  text-shadow: 1px 1px #000;
}

.tool-list>li {
  text-indent: -1000em;
  background-size: contain;
  position: relative;
}

#undo-redo-tools>li, #ellipse-tool {
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}

#undo-redo-tools>li:active {
  border: var(--active-tool-border-width) solid var(--highlight-fg-color);
}

#tools>li::after, #undo-redo-tools>li::after {
  content: attr(data-shortcut);
  display: block;
  font-size: 8px;
  color: white;
  position: absolute;
  right: 0;
  bottom: 0;
  width: max-content;
  padding-left: 0.2em;
  padding-right: 0.2em;
  height: 1em;
  z-index: 100;
  text-indent: initial;
  background-color: #0000004f;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
}

#tools>li.active-tool::after, #undo-redo-tools>li.active-tool::after {
  transform: translate(calc(-1 * var(--active-tool-border-width)), calc(-1 * var(--active-tool-border-width)));
}

#pencil-tool {
  background-image: url(img/pencil.png);
}

#eraser-tool {
  background-image: url(img/eraser.png);
}

#bucket-tool {
  background-image: url(img/bucket.png);
}

#line-tool {
  background-image: url(img/line.png);
}

#rectangle-tool {
  background-image: url(img/rectangle.png);
}

#eye-dropper-tool {
  background-image: url(img/eye-dropper.png);
}

#undo-tool {
  background-image: url(img/undo.png);
}

#redo-tool {
  background-image: url(img/redo.png);
}

#ellipse-tool {
  background-image: url(img/ellipse.png);
}

.palette-tooltip {
  display: inline-block;
  padding: 0.5em;
  font-size: 0.6rem;
  border-radius: 6px;
  text-align: center;
  white-space: nowrap;
  background-color: black;
}

.palette-tooltip::after {
  content: " ";
  position: absolute;
  top: calc(100% - 1px);
  left: 4%;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}