* {
  font-family: Tahoma, Helvetica, sans-serif;
}

html, body {
  overflow: hidden;
}

body {
  background-color: #78848c;
  margin: 0;
  padding: 0;
  -webkit-user-select: none; /* disable selection */
  -webkit-touch-callout: none; /* disable callouts */
  -webkit-tap-highlight-color: transparent; /* disable highlighting */

  height: 100vh;
  background-image: radial-gradient(
          ellipse farthest-corner at center top,
          #718593 30%,
          #222d4a 100%);
}

#header {
  margin: auto;
  padding: 2px;
  font-size: 16px;
  display: grid;
}

#header h1 {
  margin: auto;
  padding: 0;
}

#header h1 span.version {
  font-size: 0.6em;
  color: #234;
}

#header h1 span.copyright {
  font-size: 0.4em;
  color: #232;
}

#header h1 a {
  color: #123;
  text-decoration: none;
}

.canvas-container {
  margin: auto;
  width: -moz-fit-content;
  width: fit-content;
  padding: 8px 0;
}

/*
canvas {
  box-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
}
*/

footer p, #debugPanel {
  font-size: 11px;
  color: #e0e8e8;
  padding: 0 16px;
  margin: 0;
  text-align: center;
}

footer span {
  color: #f0f0ff;
  text-shadow: 0 1px 3px #000;
}

#frameCounter {
  display: none;
}

#debugPanel {
  font-size: 11px;
  font-weight: normal;
  color: #333;
  padding: 0 0 0 12px;
  margin: 0;
}

/* ======================================================================= */
/* == Toolbar and menus                                                    */
/* ======================================================================= */

#toolbar, #menu {
  margin: auto;
  padding: 4px 0;
  width: -moz-fit-content;
  width: fit-content;
  /* background-color: #9bacb5; */
}

ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

ul.menu li {
  display: block;
  margin: 8px auto;
}

ul.menu a {
  display: block;
  width: 160px;
  height: 24px;
  border-radius: 8px;
  padding: 16px 32px 12px 32px;
  margin: 0;
  text-align: center;
  line-height: 18px;
  text-decoration: none;
  background: #a2bac6;
  border: solid 2px #2f5061;
  color: #0e2c3b;
  vertical-align: baseline;
  font-size: 1.2em;
}

div.presets,
div.toggles {
  display: inline-block;
}

#toolbar button {
  transition: background-color 250ms, color 250ms;
  touch-action: none;
}

div.presets button,
div.toggles button {
  width: 40px;
  height: 30px;
  border-radius: 4px;
  padding: 4px;
  margin: 0;
  text-align: center;
  font-size: 16px;
  line-height: 19px;
  background: #ffffff80;
  border: none;
  color: #28342b;
}

div.toggles button {
  width: 34px;
  background: #ddffdd80;
  color: #303030;
}

div.presets button:hover,
div.presets button.selected:hover {
  background: #00000030;
  color: white;
}

div.toggles button:hover,
div.toggles button.selected:hover {
  background: #45604C80;
  color: white;
}

div.presets button.selected {
  background: #00000060;
  color: white;
}

div.toggles button.selected {
  background: #3b623b80;
  color: #d8e1ff;
}

#toolbar button:focus {
  outline: none;
}

/* ======================================================================= */
/* == End of Toolbar                                                       */
/* ======================================================================= */