body {
  font-family: 'Amatic SC', cursive;
  margin: 20px;
  padding: 20px;
  background-color: #f5f5f5;
  border: 3px solid #ccc;
  border-radius: 20px;
}

@font-face {
  font-family: 'Amatic SC';
  src: url('fonts/Amatic SC-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.container {
  width: 80%;
  margin: 0 auto;
}

img {
  float: left;
  max-width: 20%;
  margin-right: 20px;
}

.tyquz {
  overflow: auto;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f5f5; /* Светло-серый цвет фона */
  border-radius: 20px; /* Скругленные углы */
}






/* Стили для блока с навигационным меню */
nav {
  background: linear-gradient(to right, #6a11cb, #2575fc);
  border-radius: 30px;
  padding: 10px 20px;
}

/* Стили для списка меню */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex; /* Используем flex для горизонтального расположения элементов */
  justify-content: center; /* Выравниваем элементы по центру */
}

/* Стили для элементов меню */
nav ul li {
  margin-right: 20px;
}

nav ul li:last-child {
  margin-right: 0;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 20px;
  transition: background-color 0.3s ease;
}

nav ul li a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Медиа-запрос для экранов с шириной до 768px */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column; /* Расположение элементов в колонку */
    align-items: center; /* Выравнивание элементов по центру */
  }

  nav ul li {
    margin-right: 0; /* Убираем отступ между элементами */
    margin-bottom: 10px; /* Добавляем отступ снизу */
  }

  nav ul li:last-child {
    margin-bottom: 0; /* Убираем отступ для последнего элемента */
  }
}