#matrix-container {
  position: relative; /* Убедитесь, что контейнер имеет относительное позиционирование */
  overflow: hidden; /* Чтобы звезды не выходили за границы контейнера */
  width: 40vw; /* или любая другая ширина */
  height: 60vh; /* или любая другая высота */
  display: flex; /* Используем Flexbox для центрирования содержимого */
  align-items: center; /* Центровка по вертикали */
  justify-content: center; /* Центровка по горизонтали */
  transition: box-shadow 0.3s ease; /* Плавный переход для эффекта подсветки */
}

#matrix-container.highlight-container {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.7); /* Подсветка контейнера (зеленая тень) */
}

#matrix-svg {
  width: 100%;
  height: 100%;
}

#matrix-text {
  font-size: 45vh;
  font-weight: bold;
  fill: white; /* Цвет текста маски */
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* Или другой шрифт */
  transition: fill 0.3s ease; /* Плавный переход для эффекта подсветки текста */
}

#matrix-text.highlight-text {
  fill: rgb(255, 255, 255); /* Подсветка текста (желтый цвет) */
}

.matrix-char {
  font-size: 15px; /* Размер символов матрицы */
  font-family: monospace; /* Моноширинный шрифт */
  fill: rgb(255, 255, 255); /* Цвет символов матрицы */
}

.star {
  position: absolute;
  pointer-events: none;
  /* Добавим transition для плавности (по желанию) */
  transition: left 0.1s linear, top 0.1s linear;
}

.star-smooth {
  transition: left 0.3s linear, top 0.3s linear;
}

@media (max-width: 767px) {
  #matrix-container {
    width: 85vw;
    height: 40vh;
    margin-bottom: 7%;
  }

  #matrix-text {
    font-size: 28vh;
  }

  .matrix-char {
    font-size: 12px;
    letter-spacing: -0.5px;
  }
}