@import "common.css";

:root {
  --box-padding: 1rem;
  --sidebar-width: 24rem;

  --h1-font-size: calc(2 * var(--scale) * 1rem);
  --h2-font-size: calc(1.5 * var(--scale) * 1rem);
  --h3-font-size: calc(1.25 * var(--scale) * 1rem);
  --h4-font-size: calc(1.125 * var(--scale) * 1rem);
  --h4-line-height: calc(1.125 * var(--leading));
}

body, html {
}

#dotatlas {
  user-select: none;

  position: fixed;
  top: var(--box-padding);
  bottom: var(--box-padding);
  left: var(--box-padding);
  right: calc(var(--sidebar-width) + 2 * var(--box-padding));

  image-rendering: pixelated;
}
#dotatlas > canvas {
  border-radius: 0.25rem;
}

#sidebar {
  position: absolute;
  top: var(--box-padding);
  right: var(--box-padding);
  width: var(--sidebar-width);
  margin-bottom: var(--leading);
}

h1 {
  margin-top: 0;
  line-height: 1.0;
}