/* Внешний фон страницы — чёрный (вне рамки) */
html {
  background: #000;
  height: 100%;
}

/* Содержимое страницы — красная рамка с внешним отступом 20px */
body {
  /* Важно: сбросим отступы браузера, затем добавим требуемый внешний отступ */
  margin: 20px auto;
  padding: 5px; /* внутренний отступ внутри рамки — можно менять по необходимости */
  max-width: calc(100% - 40px); /* чтобы учесть внешние отступы */
  box-sizing: border-box;

  border: 3px solid red;
  border-radius: 12px; /* закругленные углы */
  background: #fff; /* внутри рамки — белый фон */
}

/* Нормализация для полного покрытия высоты при необходимости */
html, body {
  min-height: 100%;
}

/* Стили галереи (оставлены из предыдущих требований) */
.gallery img {
  display: inline-block;
  width: 4%; /* или задайте другую ширину по необходимости */
  margin: 1px; /* для регулировки отступов */
  vertical-align: middle;
}

/* Активная миниатюра — красная обводка */
.thumb-active {
  outline: 3px solid red;
  box-sizing: border-box;
}

/* Курсор для кликабельных миниатюр */
.gallery img {
  cursor: pointer;
}

/* Header и Footer — такие же красные рамки с закруглениями,
   внутри черный фон, текст белый */
header,
footer,
.site-header,
.site-footer,
#header,
#footer {
  display: block;
  box-sizing: border-box;
  margin: 1px auto; /* внешний отступ вокруг рамки */
  padding: 10px;
  max-width: calc(100% - 5px);
  border: 3px solid red;
  border-radius: 12px;
  background: #000; /* внутри рамки — черный фон */
  color: #fff; /* текст белый */
}

/* Ссылки внутри header/footer наследуют цвет и видны на черном фоне */
header a,
footer a,
.site-header a,
.site-footer a,
#header a,
#footer a {
  color: inherit;
  text-decoration: none;
}

/* При наведении — все ссылки становятся красными */
a:hover {
  color: red !important;
}

/* Активная ссылка (пока нажата) и ссылки с классом .active имеют цвет #EDD6B9 */
a:active,
a.active {
  color: #EDD6B9 !important;
}

/* --- Общий базовый стиль для всех ссылок: */
a {
color: #AF431B;
text-decoration: none;
}

/* --- Но ссылки внутри header и footer должны использовать свои правила: переопределяем их явно */
header a, footer a, header a:link, header a:visited, footer a:link, footer a:visited, #quick-contact a, #quick-contact a:link, #quick-contact a:visited {
 color: inherit;
/* вернуть наследуемый цвет (header/footer уже заданы белым) */
 text-decoration: none;
/* если хотите — можно поставить underline: none/underline по необходимости */
 }

#my-left-block {
width: 60%;
margin-left: auto;
margin-right: auto;
text-align: left; /* сохраняем левое выравнивание внутри */
box-sizing: border-box;
}

body {
  font-size: 20px; /* Размер основного шрифта */
}

/* Сделать сгенерированную галерею такой же, как основная .gallery */
#generated-gallery {
text-align: center;
display: block;
margin: 0 auto;
max-width: 100%;
}

/* Используем те же правила, что и для основной галереи */
#generated-gallery img, #generated-gallery img.generated-thumb {
display: inline-block;
width: 4%;
/* совпадает с .gallery img */
margin: 1px;
vertical-align: middle;
cursor: pointer;
box-sizing: border-box;
}

/* Если вы используете строки .generated-row (JS группирует по 16), убедимся, что контейнеры строк не ломают вёрстку */
#generated-gallery .generated-row {
text-align: center;
line-height: 0;
}

/* Адаптив: при очень маленьком экране можно увеличить ширину миниатюр для читабельности */
@media (max-width: 420px) {
#generated-gallery img.generated-thumb {
width: calc((100% / 4) - 4px);
/* 4 в ряд на маленьких экранах */
} }