/* Переменные светлой темы */
:root {
  --bg: #ffffff;
  --text: #111111;
  --textw: #e0e0e0;
  --border: #ccc;
  --form-bg: #ffffff;
  --input-bg: #f9f9f9;
  --output-bg: #ffffff;
  --button-bg: #e0e0e0;
  --button-text: #000;
  --hover-bg: #0056b3;
  --section-button-bg: #6c757d;
  --section-button-hover: #5a6268;
}

/* Темная тема */
body.dark-theme {
  --bg: #2a3129;
  --text: #e0e0e0;
  --textw: #e0e0e0;
  --border: #444;
  --form-bg: #2a2a2a;
  --input-bg: #333;
  --output-bg: #222;
  --button-bg: #333;
  --button-text: #fff;
  --hover-bg: #0b5ed7;
  --section-button-bg: #444;
  --section-button-hover: #555;
  background: url(4882066.jpg) center top/cover no-repeat fixed;
}

/* Переключатель темы */
.theme-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* Основной фон и шрифт */
body {
  background-color: var(--bg);
/*  background: url(4882066.jpg) center top/cover no-repeat fixed;*/
  color: var(--text);
  margin: 0;
  padding: 20px;
  font-family: sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Центрированный контейнер */
.container {
  max-width: 900px;
  margin: auto;
  padding: 10px;
  box-sizing: border-box;
}

/* Заголовки */
h1, h2, h3, em {
  color: var(--text);
  margin-top: 1.5em;
  margin-left:20px;
}
p {
  text-align: justify;
  text-indent: 1em;         /* красная строка — отступ первой строки */
   white-space: pre-line;
}

.indent {
  margin-left: 40px;
}

p::first-letter {
  color: rgb(114, 98, 6);               /* первая буква красным */
  font-weight: bold;        /* можно добавить жирность, по желанию */
  font-size: 1.1em;         /* немного крупнее */
}
.right{
  text-align: right; 
  color: rgb(114, 98, 6); 
}


/* Формы */
form {
  background: var(--form-bg);
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

input[type="text"], textarea {
  background-color: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  font-size: 1em;
  box-sizing: border-box;
}

input[type="text"] {
  width: calc(50% - 12px);
  margin-right: 10px;
  margin-bottom: 10px;
}

textarea {
  width: 100%;
  resize: vertical;
  margin-bottom: 10px;
}

/* Кнопки */
button {
  background-color: var(--button-bg);
  color: var(--button-text);
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: var(--hover-bg);
  color: #fff;
}

/* Кнопки разделов */
#buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  margin-left:20px;
}

#buttons button {
  background-color: var(--section-button-bg);
  font-size: 0.95em;
}

#buttons button:hover {
  background-color: var(--section-button-hover);
}

/* Вывод текста */
#output {
  background: var(--output-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  max-width: 100%;
}

/* Кнопки картинок */
#image-buttons {
  margin: 15px 0;
}

.img-btn {
  border: none;
  background: none;
  margin-right: 8px;
  cursor: pointer;
}

.img-btn img {
  height: 48px;
  border-radius: 4px;
  transition: transform 0.2s, filter 0.2s;
}

.img-btn:hover img {
  transform: scale(1.1);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

/* Темная тема – доп. фильтры для изображений */
body.dark-theme .img-btn img {
  filter: brightness(0.85);
}

/* Адаптивность для мобильных */
@media (max-width: 600px) {
  .container {
    padding: 15px;
  }

  input[type="text"] {
    width: 100%;
    margin-right: 0;
  }

  form {
    padding: 10px;
  }

  #buttons {
    flex-direction: column;
  }
}