Harmony/main/static/deps/css/exo.css

@keyframes glow {
  from {
    text-shadow: 0 0 10px #64ffca, 0 0 20px #a1faea, 0 0 30px #E6E6FA, 0 0 40px #E6E6FA, 0 0 50px #E6E6FA, 0 0 60px #E6E6FA, 0 0 70px #E6E6FA;
  }

  to {
    text-shadow: 0 0 20px #10dcc4, 0 0 30px #00ffce, 0 0 40px #90fff5, 0 0 50px #00ffb6, 0 0 60px #FF4500, 0 0 70px #FF4500, 0 0 80px #FF4500;
  }
}

.navbar-brand {
  animation: glow 1.5s ease-in-out infinite alternate;
  display: inline-block;
}

.navbar-brand:hover .magic-star {
  animation: sparkle 0.5s forwards;
}

.magic-star {
  display: inline-block;
  transform: scale(0);
  transition: transform 0.3s ease;
}

@keyframes sparkle {
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.h1:hover .magic-star {
  animation: sparkle 0.5s forwards;
}

/* Стили для основного контента и боковой панели категорий */
.main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.categories-sidebar {
    width: 75%; /* Уменьшаем ширину боковой панели */
    padding: 20px;
    background: rgba(0, 0, 0, 0.07); /* Полупрозрачный фон для панели */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.product-list {
    flex-grow: 1;
    max-width: 80%; /* Увеличиваем максимальную ширину списка продуктов для баланса */
}

.btn-group .btn {
    margin-bottom: 10px; /* Отступ между кнопками */
    border: none;
    background: linear-gradient(145deg, #37d7ff, #53fae1); /* Градиент для кнопок */
    color: white;
    transition: transform 0.2s ease;
}

.btn-group .btn:hover {
    transform: scale(1.05); /* Небольшое увеличение при наведении */
    background: linear-gradient(145deg, #00a490, #30ffe8);
}

.btn-group .active {
    font-weight: bold;
    background: #d7c900; /* Выделение активной категории */
    color: black;
}