body {
  margin: 0;
  background-color: black;
  user-select: none;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}

body * {
  box-sizing: border-box;
}

.hoverable {
  background-color: hsla(0, 0%, 100%,0.0);
  cursor: pointer;
}
.hoverable:hover {
  background-color: hsla(0, 0%, 100%,0.15);
}
.hoverable.is-selected {
  background-color: hsla(0, 0%, 100%,0.2);
}

.is-minor {
  opacity: 0.6;
}
.is-minor:hover {
  opacity: 1;
}


.stack-bookmark:hover {
  background-color: hsla(0, 0%, 100%, 0.1);
}

.comp-about {
  color: #ccc;
  font-family: Hind;
  font-size: 14px;
  font-weight: 300;
}

.comp-about a {
  color: #aaf;
}

.comp-about pre {
   user-select: text;
}

::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

::-webkit-scrollbar-track {
  background-color: hsla(0,0%,100%,0);
}

::-webkit-scrollbar-thumb {
  background-color: hsla(0,0%,100%,0.3);
}

.copy-commands:active {
  background-color: hsla(0,0%,100%,0.3);
}

.comp-leaf {
  opacity: 0.8;
}
.comp-leaf:hover {
  background-color: hsla(0,0%,100%,0.14);
}

.comp-leaf:active {
  transition-duration: 0ms;
  /*  transform: scale(1.02);*/
  transform: translate(1px, 0px);
}

.comp-expr:hover {
  border-color: hsla(0,0%,100%,0.6);
}

.comp-expr:active {
  transition-duration: 0ms;
  /*  transform: scale(1.02);*/
  transform: translate(1px, 0px);
  border-color: white;
}

/** tricky selector to reset parent hover color */
div.comp-expr:has(.comp-expr:hover):hover,
div.comp-expr:has(.comp-leaf:hover):hover {
  border-color: hsl(200,100%,76%,0.5);
}


/** tricky selector to reset parent click color */
div.comp-expr:has(.comp-expr:active):active,
div.comp-expr:has(.comp-leaf:active):active {
  transform: translate(0px, 0px);
}

.comp-expr.cirru-focused .comp-leaf,
.comp-expr:has(> .cirru-focused.comp-leaf) .comp-leaf,
.comp-leaf.cirru-focused {
  opacity: 1;
}


@keyframes border-blinking {
  0% {
    border-color: #888;
  }

  40% {
    border-color: #fff;
  }
  60% {
    border-color: #fff;
  }

  100% {
    border-color: #888;
  }
}