/* DEBUG */
 /* * {
  border: 1px solid red;
} */

body {
  color: white;
  background-color: black;
}

#panels {
  font-family: 'Fira Code', cursive;
}

#ascii {
  color: white;
  font-family: 'Courier New', Courier, monospace;
  white-space: pre;
  font-size: 4px;
}

/* Custom CSS to reduce font size in the panels div on mobile */
@media (max-width: 767.98px) {
  .panel {
    font-size: 0.75rem; /* Adjust this value as needed */
  }
}

.icon-link-move-up {
  --bs-icon-link-transform: translate3d(0, -.125rem, 0);
}

.icon-link-move-left {
  --bs-icon-link-transform: translate3d(-.25rem, 0, 0);
}

.link-container {
  position: relative;
}

.main-link {
  padding: 8px;
  text-decoration: none;
  color: #1f45fc;
  /* Additional styling */
}

.hidden-div {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  white-space: nowrap;
  padding-left: 20px; /* Adjust for the white line */
  /* Additional styling */
}

.hidden-div a {
  display: block;
  padding: 8px;
  border: 1px solid #000;
  text-decoration: none;
  color: #000;
  background: #fff;
  /* Additional styling */
}

.link-container:hover .hidden-div {
  display: block;
}

.link-container .hidden-div::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem; /* Length of the white line */
  height: 1px;
  background: #fff;
}

a {
  transition: color 2s ease; /* Анимация изменения цвета */
}

a:hover {
  color: #ff0000; /* Цвет при наведении */
}