body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  font-size: 16px; /* Размер шрифта по умолчанию */
  color: #333; /* Цвет текста по умолчанию */
}

.container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0; /* светлый фон */
  transition: background-color 0.5s ease;
}

.content {
  text-align: center;
  max-width: 600px; /* Максимальная ширина контента */
  margin: 0 auto; /* Выравнивание контента по центру */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.light-grey-row {
  background-color: #f2f2f2; /* Цвет заливки для строк */
}

/* Стили для контейнера кнопок вверху */
.top-buttons {
  position: fixed;
  top: 0px; /* Скрываем кнопки за пределами экрана */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 1000;
  transition: top 0.3s ease; /* Плавное появление */
  padding: 10px;
  //background-color: rgba(255, 255, 255, 0.9); /* Полупрозрачный фон для видимости */
  border-radius: 4px;
}

.top-buttons.visible {
  top: 10px; /* Показываем кнопки при наведении */
}

/* Общие стили для кнопок */
#toggle-button,
#toggleGarland,
#openModalBtn {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  background-color: #007BFF;
  color: #dfdfdf;
  border: none;
  border-radius: 4px;
}

/*----------------------------------стиль страницы--------------------------------*/
/* Дополнительные стили для кнопок и футера */
.top-buttons {
 position: fixed;
 top: 0px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 gap: 15px;
 z-index: 1000;
 transition: top 0.3s ease;
 padding: 12px 20px;
 background-color: rgba(255, 255, 255, 0.95);
 border-radius: 10px;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 backdrop-filter: blur(10px);
}

.top-buttons.visible {
 top: 15px;
}

.nav-button {
 padding: 10px 20px;
 font-size: 14px;
 cursor: pointer;
 background: linear-gradient(135deg, #007BFF, #0056b3);
 color: white;
 border: none;
 border-radius: 25px;
 text-decoration: none;
 font-weight: 600;
 transition: all 0.3s ease;
 box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
 display: flex;
 align-items: center;
 gap: 8px;
}

.nav-button:hover {
 background: linear-gradient(135deg, #0056b3, #004494);
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
 text-decoration: none;
 color: white;
}

.nav-button i {
 font-size: 16px;
}

.logo-img {
    height: 50px;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1001;
}

.logo-img:hover {
    transform: scale(4) translateY(15px); /* Увеличиваем и смещаем вниз на 60px */
    transform-origin: center center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    z-index: 1002;
}

/* Основные стили для фиксированного футера */
body {
 margin: 0;
 padding: 0;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}

.container {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: #f0f0f0;
 transition: background-color 0.5s ease;
 position: relative;
 padding-bottom: 100px; /* Место для футера */
}

.content {
 text-align: center;
 max-width: 600px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 align-items: center;
 flex-grow: 1;
}

/* Футер в самом низу страницы */
.footer {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 padding: 15px 0;
 text-align: center;
 background-color: rgba(255, 255, 255, 0.95);
 border-top: 1px solid #e0e0e0;
 z-index: 999;
 backdrop-filter: blur(10px);
}

.footer-content {
 max-width: 600px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 10px;
}

.footer-links {
 margin-bottom: 5px;
}

.footer-text {
 color: #666;
 font-size: 14px;
 margin: 0;
}

.radiopotok-badge {
 display: inline-block;
 transition: transform 0.3s ease;
}

.radiopotok-badge:hover {
 transform: scale(1.05);
}

/* Стили для текущего трека */
#current-song {
 margin-top: 20px;
 padding: 15px;
 background-color: rgba(255, 255, 255, 0.9);
 border-radius: 10px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 width: 100%;
 max-width: 600px;
 margin-bottom: 20px;
}

.artist, .song {
 margin: 5px 0;
 font-size: 14px;
}