:root {
  --accent: rgb(230,60,70);
  --accent1: rgb(0,200,0);
  --accent1: rgb(255,100,0);
  
  --bgbg-rgb: 255,255,255;
  --bg-rgb: 235,235,235;
  --fg-rgb: 0,0,0;
  --mid-rgb: 128,128,128;
  
  --bgbg: rgb(var(--bgbg-rgb));
  --bg: rgb(var(--bg-rgb));
  --fg: rgb(var(--fg-rgb));
  --mid: rgb(var(--mid-rgb));
  
  --fg-subtext: rgb(90,90,90);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bgbg-rgb: 20,20,20;
    --bg-rgb: 40,40,40;
    --fg-rgb: 255,255,255;
    --mid-rgb: 128,128,128;
    
    --bgbg: rgb(var(--bgbg-rgb));
    --bg: rgb(var(--bg-rgb));
    --fg: rgb(var(--fg-rgb));
    --mid: rgb(var(--mid-rgb));
    
    --fg-subtext: rgb(220,220,220);
  }
}
:root {
  --fg-thin: rgba(var(--fg-rgb),0.03);
  --fg-half: rgba(var(--fg-rgb),0.05);
  --fg-base: rgba(var(--fg-rgb),0.1);
  --fg-plushalf: rgba(var(--fg-rgb),0.15);
  --fg-double: rgba(var(--fg-rgb),0.2);
  --fg-triple: rgba(var(--fg-rgb),0.3);
}
button, html {
  line-height: 1.2;
}
* {
  color: var(--fg);
}
html {
  background-color: var(--bgbg);
}
body, html {
  margin: 0px;
  padding: 0px;
  height: 100%;
  overflow: clip
}

canvas {
  height: 100%;
  width: 100%;
  background-color: var(--bgbg);
  touch-action: none;
}

#toolbar {
  position: absolute;
  top: 0px;
  background-color: var(--bg);
  margin: 0px;
  padding: 6px;
  border-bottom-right-radius: 12px;
}
button {
  background-color: var(--fg-base);
  border: none;
  border-radius: 8px;
  font-size: 1em;
  padding: 6px 12px;
}