html, body {
  color: #FAF0EF;
  background-color: #06213C;
  overscroll-behavior: contain;
}

#tooltip {
  text-align: center;
  position: absolute;
  left: 0;
  top: 0.4em;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 1.5em;
  font-family: monospace;
  font-size: 1.1em;
  color: #FAF0EF;
  background-color: #06213C;
}

#frame {
  margin: 0;
  padding: 0;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}

#loading {
  position: absolute;
  font-family: serif;
  color: #FAF0EF;
  font-size: 2em;  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
}

#drawing {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  visibility: visible;
  user-drag: none;
  pointer-events: none;
}

#canvas {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

.icon {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
}

#searchTab {
  position: absolute;
  left: calc(100% - 0.5em);
  top: 2em;
  width: 4em;
  height: 4em;
  border-radius: 0em 1em 1em 0em;
  border-width: 0;
  background-color: #FAF0EF;
  z-index: 9;
  cursor: pointer;
  padding-left: 0.5em;
}

#searchTooltip {
  position: absolute;
  width: 100%;
  height: auto;
  left: 0%;
  bottom: 1em;
  padding: 0;
  margin: 0;
  color: #06213C;
  text-align: center;
  font-size: 1.1em;
  font-family: monospace;  	
  z-index: 11;
  user-select: text;
  cursor: text;
  word-wrap: break-word;
}

#searchPanel {
  position: fixed;
  left: 0;
  top: 0;
  width: 10em;
  height: 100%;
  z-index: 10;
  background-color: #FAF0EF;
  transition: 0.5s;
  transform: translate(-100%, 0%);
}

.openSearchPanel {
  transform: translate(0%, 0%) !important;
}

#zoomOut {
  position: fixed;
  width: auto;
  bottom: 0;
  left: 50%;
  height: auto;
  border-radius: 1em 1em 0em 0em;
  border-width: 0;
  background-color: #FAF0EF;
  z-index: 11;
  cursor: pointer;
  text-align: center;
  font-size: 2em;
  font-family: monospace;
  color: #06213C;
  transform: translate(-50%, 100%);
  margin: 0;
  padding: 0.25em;
  text-decoration: underline;
  transition: 0.5s;
}

.searchBubbleContainer
{
  position: relative;
  border-radius: 50%;
  border-color: #06213C;
  border-width: 1em;
  margin: 0.5em;
  padding: 0;
  width: 9em;
  height: 9em;
  z-index: 12;
  background-color: #06213C;
  user-select: none;
}

.searchBubbleImage
{
  position: absolute;
  width: 90%;
  height: 90%;
  left: 5%;
  top: 5%;
  padding: 0;
  margin: 0;
  border-radius: 50%;  
  background-image: url("other-library.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
  transition: 0.5s;
  opacity: 1.0;
  transform: scale(1, 1);
  cursor: pointer;
  z-index: 13;
  user-select: none;
}

.searchBubbleTextContainer
{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 1.5em;
  font-family: monospace;  	
  border-radius: 50%;
  border: none;
  opacity: 1.0;
  transition: 0.5s;
  z-index: 14;
  color: #FAF0EF00;
  background-color: #06213C00;
  cursor: pointer;
  user-select: none;
}

.searchBubbleTextContainer:hover
{
  color: #FAF0EFFF;
  background-color: #06213CCC;
}

.searchBubbleText
{ 
  position: absolute;
  width: 80%;
  height: auto;
  left: 10%;
  top: 50%;
  padding: 0;
  margin: 0;
  transform: translate(0, -50%);
  user-select: none;
}

.foundSearchBubble
{
  opacity: 0.5;
  animation-name: foundBubbleAnimation;
  animation-duration: 1s;
}

.editingSearchBubble
{
  opacity: 0.1;
}

@keyframes foundBubbleAnimation 
{
  0%   { transform: scale(1, 1); }
  50%  { transform: scale(0.8, 0.8); }
  100% { transform: scale(1, 1); }
}