/* Основные стили проекта. Это стили для темы, которую вы верстаете первой. */
/* сохраните в разметке и стилях класс page. На его основе работает скрипт. */


.page {
  position: relative;
  z-index: -2;
  background-color: var(--bg-theme);  /* если картинка не загрузится */
  min-inline-size: 375px;
  margin: 0 auto; /* выравниваем по центру */
  background-image: var(--bg-theme-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

/* Переиспользуемые паттерны */
/* задний фон у заголовков и в шапке у параграфа */

.title-decor {
  align-self: start;
  background-color: var(--accent-color);
}

/* углы */

.decorated-zone::before {
  content: '';
  grid-column-start: 1;
  grid-row-start: 1;
  justify-self: end;
  border-inline-end: 1px solid var(--decorate-color);
  border-block-start: 1px solid var(--decorate-color);
  inline-size: 25px;
  block-size: 25px;
}

.decorated-zone::after {
  content: '';
  grid-column-start: 1;
  grid-row-start: 3;
  justify-self: start;
  align-self: end;
  border-inline-start: 1px solid var(--decorate-color);
  border-block-end: 1px solid var(--decorate-color);
  inline-size: 25px;
  block-size: 25px;
}


/* элемент REC */

.decorate__element {
  position: absolute;
  color: var(--rec-element);
  font-family: var(--general-font);
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
  inset-inline-end: 20px;
}

.decorate__element::before {
  content: 'rec';
}

.decorate__element::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 10px;
  border-radius: 50%;
  box-shadow: 0 0 4px 2px var(--rec-element);
  background-color: var(--rec-element);
}

/* Шапка */

.header {
  display: grid;
  grid-template-rows: 1fr min-content 1fr;
  justify-items: end;
  padding: 10px;
  block-size: 100vh;
  min-block-size: 668px;
}

/* theme menu */

.header__theme-menu {
  grid-row: 1/2;
  grid-column-start: 1;
  align-self: center;
}

.header__theme-menu-list {
  display: grid;
  row-gap: 10px;
}

.header__theme-menu-item {
  list-style-type: none;
  align-self: start;
}

/* кнопки */

.header__theme-menu-button {
  border: 1px solid transparent;
  padding: 1.5px 13px 4px;
  color: var(--decorate-color);
  font-family: var(--general-font);
  font-weight: normal;
  line-height: 18px;
  font-size: 18px;
  text-transform: lowercase;
  background-color: transparent;
}

.header__theme-menu-item:has(.header__theme-menu-button:focus-visible) {
  border-block-end: 1px solid var(--decorate-color);
}

.header__theme-menu-button:hover {
  border: 1px solid var(--accent-color-with-opacity);
  cursor: pointer;
}

.header__theme-menu-button_active {
  border: 1px solid var(--decorate-color);
  pointer-events: none;
}

.header__theme-menu-button:focus {
  outline: none;
}

.title__header {
  grid-row: 2/3;
  grid-column-start: 1;
  justify-self: start;
  align-self: start;
  color: var(--main-color);
  font-family: var(--general-font);
  font-weight: bold;
  font-size: clamp(7.25rem, 7.0115rem + 1.0178vw, 7.5rem);
  line-height: 95.7px;
  text-shadow: 4px 4px 0 var(--accent-color);
}

.title__description {
  grid-row: 3/4;
  grid-column-start: 1;
  align-self: center;
  color: var(--title-description-theme);
  font-family: var(--general-font);
  font-weight: bold;
  font-size: 18px;
  line-height: 23.4px;
}

/* Основной контент */

.main {
  display: grid;
  row-gap: 50px;
  margin: 30px 0;
  padding: 10px;
  color: var(--regular-color);
  font-family: var(--general-font);
  font-size: 18px;
  line-height: 23.4px;
}

.section {
 display: grid;
 row-gap: 20px;
}

.section__header {
  color: var(--decorate-color);
  font-weight: bold;
  font-size: inherit;
}

.section__content-wrapper {
  display: grid;
  row-gap: 10px;
  font-family: inherit;
}

.section__content-title {
  color: var(--title-description-theme);
  font-weight: bold;
  font-size: 18px;
}

.section__content-subtitle {
  color: var(--title-description-theme);
  font-weight: bold;
  font-family: var(--general-font);
  font-size: 18px;
}

.section__content {
  font-weight: normal;
}

.section__content-link {
  color: inherit;
  text-decoration: none;
  text-shadow: 2px 2px 0 var(--accent-color);
}

.section__content-link:hover {
  border-block-end: 1px solid var(--regular-color);
}

.section__content-link:focus {
  outline: none;
}

.section__content-link:focus-visible {
  outline: 1px solid var(--regular-color);
}

.section.image__section {
  row-gap: 10px;
}

.section__content-list {
  display: grid;
  grid-template-rows: 142px 355px 237px 355px 237px;
  grid-template-areas:
  "mountains-sunset"
  "icecream"
  "audio-cassette"
  "books"
  "street";
  row-gap: 10px;
}

.section__content-item {
  font-family: inherit;
  line-height: 0;
}

.section__content-item > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.image__mountains-sunset {
  grid-area: mountains-sunset;
}

.image__icecream {
  grid-area: icecream;
}

.image__audio-cassette {
  grid-area: audio-cassette;
}

.image__books {
  grid-area: books;
}

.image__street {
  grid-area: street;
}

.footer {
  display: grid;
  justify-items: center;
  padding: 10px;
  font-family: inherit;
  block-size: 100vh;
  min-block-size: 668px;
}

.footer__header {
  justify-items: center;
  align-content: center;
  color: var(--main-color);
  font-family: var(--general-font);
  font-weight: bold;
  font-size: clamp(7.25rem, 7.0115rem + 1.0178vw, 7.5rem);
  line-height: 95.7px;
  text-shadow: 2px 2px 0 var(--accent-color);
}