* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

body {
  background: #1c1f24;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Класс для ссылок */
  .download-link {
    color: #00aaff; /* Цвет текста */
    text-decoration: none; /* Убирает подчеркивание */
    display: block; /* Чтобы ссылка начиналась с новой строки */
    margin-bottom: 15px; /* Расстояние между ссылками */
    transition: color 0.3s ease, text-decoration 0.3s ease;
  }

  /* Эффект при наведении */
  .download-link:hover {
    color: white; /* Цвет при наведении */
    text-decoration: none; /* Подчеркивание текста */
    transition: color 0.3s ease, text-decoration 0.3s ease;
  }

.container {
  /*width: 79%;*/
  max-width: 1200px;
  text-align: center;
  padding: 20px;
  background: #2b2f33;
  border-radius: 12px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
}



img:hover {
    transform: scale(1.1); /* Увеличение изображения */
    transition: transform 0.3s ease; /* Плавный переход */
}

h1 {
  color: #00aaff;
  margin-bottom: 20px;
  font-size: 2em;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

button#addPhotoButton {
  padding: 10px 20px;
  background-color: #00aaff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button#addPhotoButton:hover {
  background-color: #0088cc;
}

button[type="submit"] {
  padding: 10px 20px;
  background-color: #00aaff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
  background-color: #0088cc;
}

.category-header {
  cursor: pointer;
  transition: color 0.3s ease, text-decoration 0.3s ease; /* Плавное изменение цвета и подчеркивания */
}

.category-header:hover {
  color: #fff; /* Цвет при наведении */
}


/* Контейнер категорий */
.category-container {
  margin-top: 20px;
}

.category {
  background: #1b2126;
  margin: 15px 0;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

.category h2 {
  color: #00aaff;
  text-align: left;
  padding: 5px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
}

.card {
  background: #333940;
  width: 150px;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  cursor: pointer;
}

.card p {
  margin-top: 10px;
  font-size: 14px;
  color: #ddd;
  cursor: pointer;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}
.card p:hover {
    color:#00aaff;
      transition: color 0.3s ease, text-decoration 0.3s ease;
}


/* Модальное окно для добавления фото */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #333940;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  text-align: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
  position: relative;
}

.modal-content label {
  display: block;
  font-size: 14px;
  color: #b0b3b8;
  margin: 10px 0 5px;
}

.modal-content input[type="text"],
.modal-content input[type="url"],
.modal-content input[type="file"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: none;
  border-radius: 5px;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  color: #00aaff;
}

.close-button:hover {
  color: #0088cc;
}

/* Модальное окно для просмотра фото */
.modal-image {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
}

{

  height: 100vh;
}

/*.container {*/
/*  flex: 1;*/
/*  padding-bottom: 50px;*/
/*}*/

/* Стили для футера */
/*.footerdiv {*/
/*  background-color: #333;*/
/*  color: white;*/
/*  padding: 10px;*/
/*  text-align: center;*/
/*  position: relative;*/
/*  bottom: 0;*/
/*  width: 100%;*/
/*    margin: 0;*/
/*  padding: 0;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*}*/

/*.footerdiv img {*/
/*  height: 40px;*/
/*  margin-top: 5px;*/
/*}*/