canvas {
  display: block;
}

#sketch-container {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100vh - (var(--space-2x) * 1));
  overflow: hidden;
  background-color: transparent;
}

#sketch-container.fullscreen {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  z-index: 1;
}

/* animate the background color transitions on the thing template */
html[data-slug="valley"], body[data-slug="valley"] {
  transition: background-color 0.75s ease;
}

/* STUFF SPECIFIC TO MENUS INSIDE THING TEMPLATE */

ul#heirarchy {
  position: absolute;
  top: calc(var(--space-eighth) + var(--space-4x));
  left: calc(var(--space-half) + var(--space-4x));
  margin: 0;
  padding: 0;
  z-index: 10;
}

ul#heirarchy li a {
  padding: 0px;
  padding-left: 7px;
  padding-top: 0px;
  translate: -10px -2px;
  margin: 0px;
  width: 32px;
  height: 32px;
  border-radius: 16px;
}

ul#heirarchy li[data-selected="false"] a,
ul#heirarchy li[data-selected="false"] a:visited {
  color: var(--link-color, var(--color-things));
}

nav ul#heirarchy li:first-child[data-selected="false"] a:hover
{
  background-color: var(--link-color, var(--color-things)) !important;
  color: var(--background-color, var(--color-white)) !important;
}

nav#menu ul li[data-icon="things"] {
  background-image: none !important;
  border-left-color: var(--link-color, var(--color-things)) !important;
  position: relative;
}

nav#menu ul li[data-icon="things"]:hover a,
nav#menu ul li[data-icon="things"]:focus-within a {
  background-image: url('../../icons/things-focus.png') !important;
}

nav#menu ul li[data-icon="things"]::before {
  content: '';
  position: absolute;
  translate: calc(-1 * var(--space-2x)) 0;
  inset: 0;
  background-color: var(--link-color, var(--color-things));
  background-size: 100% 100%;
  mask-image: url('../../icons/things-white.png');
  mask-size: 100% 100%;
  background-blend-mode: difference;
}

nav#menu ul li[data-icon="things"]:hover::before {
  display: none;
}

nav#menu ul li[data-icon="things"]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 15;
  background-image: var(--thing-icon-image);
  background-size: 100% 100%;
  background-clip: padding-box;
  box-sizing: border-box;
}