body {
      font-family: Arial, sans-serif;

      margin: 0; /* Убираем отступы по умолчанию */
      padding: 0; /* Убираем внутренние отступы по умолчанию */

      color: white; /* Цвет текста */
      text-shadow: 2px 0 2px #000, 0 2px 2px #000, -2px 0 2px #000, 0 -2px 2px #000;

	background-color: black;/*цвет фона позади всего: фоновой картинки, элементов и затемнения*/
    }


.background {
  position: relative;
}

.background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('images/cow_drinking.jpg');
  background-size: cover;
  background-position: top left;/* Размещает изображение так, что оно начинается с самого левого верхнего края */
  z-index: -1;
  opacity: 1; /* Прозрачность фонового изображения */
}

/* #region ЗатемняющийЭлемент*/

.background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Черное полупрозрачное наложение */
  z-index: -1; /* Помещаем псевдоэлемент под другие элементы */
}


/* #endregion */

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    .section {
      margin-bottom: 5px;
    }

    .product {
      text-align: center;
      margin-bottom: 100px;
        width: 200px;
		height: 200px;
		background-color: #e0e0e0;
    }

    .product img, social img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
    }

        .social {
          text-align: center;
          margin-bottom: 200px;
            width: 100px;
    		height: 100px;
        }

    .product-title {
      margin-top: 10px;
      font-weight: bold;
    }

    .logo {
        width: 50px;
        height: 50px;
        margin-right: 10px; /* Добавьте отступ между логотипом и текстом по вашему выбору */
    }
    .logo img {
      max-width: 100%;
      height: auto;
      border: 2px solid #000000;

      border-radius: 100px;
    }

        .header {
          display: flex;
          align-items: center; /* Выравнивание по вертикали */
        }

/*
        .glass-card{
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(2px);s
            -webkit-backdrop-filter: blur(2px);
        }
*/

/* Футер временно не нужен (не знаю какие ссылки в него пихать)
            footer {
                padding: 50px
            }
            footer ul {
              list-style: none;
              padding: 0;
            }
            footer li {
              margin-bottom: 10px;
            }
            footer li:last-child {
              margin-bottom: 0;
            }
            footer li a {
              text-decoration: none;
            }
            footer {
                text-shadow: none;
                background-color: #F0F0F0;
            }
*/

/* Копия для комментариев, изза того что не могу вложить комментарии
            footer {
                padding: 50px
            }
            footer ul {
              list-style: none;  Убираем маркеры у списка
              padding: 0;  Убираем внутренние отступы у списка
            }
            footer li {
              margin-bottom: 10px; Добавляем отступ снизу для элементов списка
            }
            footer li:last-child {
              margin-bottom: 0;  Убираем отступ снизу у последнего элемента списка
            }
            footer li a {
              text-decoration: none;  Убираем подчеркивание у ссылок
            }
            Убедитесь, что дополнительные свойства для footer находятся после всех остальных стилей для элемента footer
            footer {
                text-shadow: none; Отключаем тень текста для элемента footer.
                background-color: #F0F0F0;
            }
*/