Почему при добавлении класса decorated-zone в footer , уголки отображаются в header . Как сделать так, чтобы они отображались в footer?

:root {
  --accent-color: #FF0070;
  --title-color: #FFC2E6;
  --accent-background: #FFF1F7;
  --accent-background-image: url(../images/cover-image-light.png);
  --main-color-decor: #FF8DCB;
  --menu-color: #353430;
  --menu-color-transparent40: rgba(50, 49, 45, 0.40);
  --text-color: #353430;
  --h2-text-color: #353430;
  --article-text-color: #353430;
  --decor: "";
  --decor-circle: url('');
  --decor-corner: #353430;
}

.page {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  background-color: var(--accent-background);
  background-image: var(--accent-background-image);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
}

.header {
  display: grid;
  grid-template-rows: 1fr min-content 1fr;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 10px;
}

.decorated-zone::before {
  content: '';
  position: absolute;
  top: 10px; 
  right: 10px; 
  height: 25px;
  width: 25px;
  border-top: 1px solid var(--decor-corner); 
  border-right: 1px solid var(--decor-corner);
}

.decorated-zone::after {
  content: '';
  position: absolute;
  bottom: 10px; 
  left: 10px;
  height: 25px;
  width: 25px;
  border-bottom: 1px solid var(--decor-corner); 
  border-left: 1px solid var(--decor-corner); 
}

.rec {
  position: absolute;
  top: 20px;
  right: 40px;
  color: var(--accent-color);
}

.rec::after {
  position: relative;
  top: -2px;
  right: -10px;
  content: '';
  display: inline-flex;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background-color: var(--accent-color);
  filter: drop-shadow(0px 0px 4px var(--accent-color));
}

.header__theme-menu {
  display: flex;
  justify-self: end;
}

.header__theme-menu-item {
  display: inline-flex;
  justify-content: center;
}

.header__theme-menu-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header__theme-menu-button {
  height: 26px;
  border: 1px solid transparent;
  padding: 0 13px;
  color: var(--menu-color);
  font-family: inherit;
  font-weight: 400;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  text-transform: lowercase;
  background-color: transparent;
}

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

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

.header__theme-menu-button:hover {
  border: 1px solid var(--menu-color-transparent40);
}

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

.title {
  padding-top: 15px;
  color: var(--title-color);
  font-weight: 700;
  font-size: clamp(7.25rem, 7.0115rem + 1.0178vw, 7.5rem);
  line-height: 82.5%;
  text-shadow: 4px 4px 0px var(--accent-color);
}

.title_description {
  justify-self: end;
  width: 100%;
  min-width: 355px;
  color: var(--text-color);
  font-family: inherit;
  font-weight: 700;
  line-height: 23.4px;
  background-color: var(--main-color-decor);
}

main {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-top: 40px;
  padding-right: 10px;
  padding-bottom: 40px;
  padding-left: 10px;
  background:var(--accent-background);
}

/* Артикли */

.section_title {
  display: flex;
  gap:10px;
  color: var(--h2-text-color);
  font-family: inherit;
  font-weight: 700;
  font-size: 18px;
  font-style: normal;
  line-height: 23.4px;
}

.article {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article_title {
  color: var(--text-color);
  font-family: inherit;
  font-weight: 700;
  font-size: 18px;
  line-height: 23.4px;
  background-color: var(--main-color-decor);
}

.article_text {
  padding-top: 10px;
  color: var(--article-text-color);
  font-family: inherit;
  font-weight: 400;
  font-size: 18px;
  font-style: normal;
  line-height: 23.4px;
}

.article_subtitle {
  color: var(--text-color);
  font-family: inherit;
  font-weight: 400;
  font-size: 18px;
  font-style: normal;
  line-height: 23.4px;
  background-color: var(--main-color-decor);
}

.article_text_link {
  text-decoration: none;
  text-shadow: 2px 2px var(--main-color-decor);
}

.article_text_link:hover {
  border-block-end: 1px solid var(--article-text-color);
}

.article_text_link:focus {
  border: 1px solid var(--article-text-color);
}

.article_text_link:focus-visible {
  border: 1px solid var(--article-text-color);
}

.why_focus_is_so_hard {
  display: grid;
  gap: 20px;
}

.what_reduces_concentration_of_attention {
  display: grid;
  gap: 20px;
}

.how_to_concentrate_better_than_a_goldfish {
  display: grid;
  gap: 20px;
}

.images {
  display: flex;
  flex-direction: column;
}

.gallery {
  display: grid;
  gap: 10px;
  padding-top: 10px;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: var(--padding);
  background-color: var(--accent-background);
}

.footer_title {
  color: var( --title-color);
  font-weight: 700;
  font-size: 116px;
  line-height: 82.5%;
  text-shadow: 2px 2px 0px var(--accent-color);
}

/*Адаптив для 768px*/

@media (min-width: 768px) and (max-width: 1023.99px) {
  
  .header {
    justify-content: normal;
    gap: 162px;
    padding: 20px;
  }

  .header__theme-menu {
    justify-self: end;
    align-self:flex-end;
    padding-bottom: 10px;
  }

  .decorated-zone::before {
    top: 20px;
    right: 20px;
  }

  .decorated-zone::after {
    bottom: 20px;
    left: 20px;
  }

  .header__theme-menu-list {
    gap: 13px;
  }

  .title {
    position: relative;
    right: 20px;
    padding-top: 0;
    font-size: clamp(7.5rem, 0.5625rem + 14.4531vw, 9.8125rem);
  }

  .title_description {
    width: 100%;
    max-width: 364px;
  }

  main {
    gap: 80px;
    padding-top: 60px;
    padding-right: 20px;
    padding-bottom: 60px;
    padding-left: 20px;
  }

  .why_focus_is_so_hard {
    grid-template-columns: 1fr 472px;
    gap: 20px;
  }

  .what_reduces_concentration_of_attention {
    grid-template-rows: min-content 1fr;
    gap:20px;
  }

  .what_reduces_concentration_of_attention > .section_title {
    width: 236px;
  }

  .how_to_concentrate_better_than_a_goldfish {
    grid-template-columns: 1fr 472px;
    gap: 20px;
  }
  
  .images {
    flex-direction: column;
    gap: 10px;
  }

  .gallery {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 24.5% 29.5% 42%;
    gap: 25px;
  }

  .image_1 {
    grid-column: 1/3;
  }

  .image_2 {
    grid-column: 3/4;
    grid-row: 1/3;
  }

  .image_3 {
    grid-column: 1/2;
    grid-row: 2/4;
  }

  .image_4 {
    grid-column: 2/3;
    grid-row: 2/3;
  }

  .image_5 {
    grid-column: 2/4;
    grid-row: 3/4;
  }
  
  .footer_title {
    font-size: 120px;
  }

}

/*Адаптив для 1024px*/

@media (min-width: 1024px) {

  .header {
    position: relative;
    align-items: start;
    gap: 114px;
    padding: 20px;
  }

  .header__theme-menu {
    justify-self: center;
    align-self:flex-start;
  }

  .header__theme-menu-list {
    flex-direction: row;
    gap: 10px;
  }

  .title {
    padding-top: 0;
    font-size: 157px;
  }

  .title_description {
    max-width: 50%;
  }

  .why_focus_is_so_hard {
    grid-template-columns: 1fr 648px;
  }

  .what_reduces_concentration_of_attention > .section_title {
    width: 315px;
  }

  .what_reduces_concentration_of_attention > .articles_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .how_to_concentrate_better_than_a_goldfish {
    grid-template-columns: 1fr 648px;
  }

  .gallery {
    grid-template-rows: 25% 30% 41%;
  }

  .footer_title {
    font-size: 157px;
  }

}

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="light dark" />
    <title>Сложно сосредоточиться</title>
    <link rel="stylesheet" href="./fonts/fonts.css" />
    <link rel="stylesheet" href="./styles/globals.css" />
    <link rel="stylesheet" href="./styles/variables.css" /> 
    <link rel="stylesheet" href="./styles/style.css" />
    <link rel="stylesheet" href="./styles/light.css" />
    <link rel="stylesheet" href="./styles/dark.css" />
  </head>
  <body class="page">
    <header class="header decorated-zone">
      <span class="rec" aria-hidden="true">REC</span>
      <nav class="header__theme-menu">
        <ul class="header__theme-menu-list">
          <li class="header__theme-menu-item">
            <button
              class="header__theme-menu-button header__theme-menu-button_type_light"
            >
              День
            </button>
          </li>
          <li class="header__theme-menu-item">
            <button
              class="header__theme-menu-button header__theme-menu-button_active header__theme-menu-button_type_auto"
              disabled
            >
              Авто
            </button>
          </li>
          <li class="header__theme-menu-item">
            <button
              class="header__theme-menu-button header__theme-menu-button_type_dark"
            >
              Неон
            </button>
          </li>
        </ul>
      </nav>
      <h1 class="title">no focus</h1>      
        <div class="title_description">
          <p>Что делать, когда не можешь делать ничего</p>
          <p>Или почему нам так сложно сконцентрироваться, особенно когда очень надо</p>
        </div>    
    </header>
    <main class="main">
      <section class="why_focus_is_so_hard">
        <h2 class="section_title">
          Почему сосредоточиться так сложно
        </h2>
        <article class="article">
          <div>
            <h3 class="article_title">Многозадачность</h3>
            <p class="article_text">
              Особенно сложно сосредоточиться, когда задач много и все они — важные. Где же легендарная многозадачность, когда она так нужна вам (и всем нанимающим менеджерам этого мира)? А дело в том, что её просто не существует. Исследователи <a href="https://dana.org/article/multicosts-of-multitasking/" class="article_text_link">выяснили</a>, что мозгу тяжело концентрироваться даже на двух делах одновременно. А когда в поле внимания попадает несколько важных задач, организм паникует и выделяет кортизол и адреналин — «гормоны стресса». Из-за этого мы работаем невнимательно: ошибаемся и быстро устаём.
            </p>
          </div>
          <div>
            <h3 class="article_title">
              Дофамин
            </h3>
            <p class="article_text">
              С гормонами стресса всё понятно, но дальше — ещё интереснее. В нашей невозможности сосредоточиться замешана и полная противоположность стрессу — дофамин. Это вещество участвует в системе вознаграждения мозга. Причём тут он? Мы часто отвлекаемся от важной задачи на что-то более «приятное» для мозгов. Например, смотрим лайки в соцсетях. В это время и выделяется дофамин — и мы чувствуем удовольствие. Получается замкнутый круг: чем больше отвлекаешься, тем больше удовольствия получаешь.
            </p>
        </div>
        </article>
    </section>
    
    <section class="what_reduces_concentration_of_attention">
      <h2 class="section_title ">
        Что снижает концентрацию внимания?
      </h2>
      <article class="article articles_list">
        <div>
          <h3 class="article_title">
            Многозадачность
          </h3>
          <p class="article_text">
            Как концентрация может снижаться из-за… концентрации? Любая стрессовая ситуация (и резко меняющийся мир в целом) заставляет наш мозг постоянно «сканировать» окружающую среду на предмет опасности. Например, читать новости вместо работы. Но быть собранными всё время — невозможно. Концентрация — мышца, и она может не выдержать, если не давать ей отдохнуть.
          </p>
        </div>
        <div>
          <h3 class="article_title">
            Еда
          </h3>
          <p class="article_text">
            «Быстрые углеводы» — сахар, белый хлеб, сладости — молниеносно доставляют в мозг энергию и помогают ему лучше работать. Но уходит эта энергия также быстро, как и приходит. А мы в результате попадаем на «углеводные качели»: как только действие «быстрых углеводов» заканчивается, мы чувствуем усталость и сонливость. И хотим ещё больше быстрых углеводов.
          </p>
        </div>
        <div>
          <h3 class="article_title">
            Гаджеты
          </h3>
          <p class="article_text">
            Да-да, это та самая ситуация, когда на экране ноутбука — код, в наушниках — подкаст, а на компьютере фоном — ещё и видео с забавными утятами. В результате мозг пытается переключиться с одной задачи на другую — и просто не может. А чтобы вернуться к состоянию полной концентрации, человеку в среднем нужно 20 минут. Вот и получается, что чем больше времени мы проводим в гаджетах, тем больше времени затем нужно, чтобы вернуться к работе.
          </p>
        </div>
      </article>
    </section>

    <section class="how_to_concentrate_better_than_a_goldfish">
      <h2 class="section_title">
        Как концентрироваться лучше, чем золотая рыбка (то есть дольше трёх секунд)
      </h2>      
      <article class="article">        
        <h3 class="article_title">
          5 простых (на самом деле не очень) советов
        </h3>
        <div>
          <h4 class="article_subtitle">
            Представьте небо и облака
          </h4>
          <p class="article_text">
            Или листья в ручье. Тут дело в лёгкой медитации, которая помогает успокоиться. Ведь часто именно тревожные мысли о сложных задачах как раз и мешают эти сложные задачи делать. В такие моменты можно закрыть глаза и представить, что чистое небо — это вы, а облака — тревожные мысли. И сколько бы их ни было — ясное небо всегда будет где-то там, за тучами, и никуда не денется. Это упражнение поможет вернуться в настоящий момент, а не волноваться о потенциальных проблемах из будущего.
          </p>
        </div>
        <div>
          <h4 class="article_subtitle">
            Включите музыку
          </h4>
          <p class="article_text">
            Но не любую, и не любимую. Любимая может быть связана с сильными положительными эмоциями, которые тоже очень сильно отвлекают. Подойдёт тихая, спокойная, умеренно-ритмичная. Можно вообще попробовать включить плейлист в «белым шумом» или нейромузыкой.
          </p>
        </div>
        <div>
          <h4 class="article_subtitle">
            Прогуляйтесь
          </h4>
          <p class="article_text">
            Или даже пробегитесь. Лучше найти парк или лес: один эксперимент <a href="https://www.sciencedirect.com/science/article/abs/pii/S0272494415000328" class="article_text_link">показал</a>, что созерцание природы повышает концентрацию, в то время как после просмотра городских пейзажей она наоборот понижается. Можно совместить прогулку с физическими упражнениями или бегом — так в мозг поступит ещё больше кислорода и он будет лучше работать. Но и простая двадцатиминутная прогулка — тоже отличный вариант.
          </p>
        </div>
        <div>
          <h4 class="article_subtitle">
            Хорошо ешьте
          </h4>
          <p class="article_text">
            Мы — не ваша бабушка, но это правда важно. Выбирайте продукты, которые препятствуют резким скачкам сахара в крови. Например, с высоким содержанием клетчатки: овощи, ягоды, бобовые (нут, чечевица, фасоль), коричневый рис, хлеб из цельнозерновой пшеницы.
          </p>
        </div>
        <div>
          <h4 class="article_subtitle">
            Читайте
          </h4>
          <p class="article_text">
            Настоящие бумажные книги. Это правда помогает с концентрацией: чтобы прочитать пост в соцсети, достаточно нескольких минут или даже секунд. А вот интересная книга способна затянуть и на несколько часов и круто тренирует направленное внимание.
          </p>
        </div>
      </article>          
    </section>
    
    <section class="images">
      <h2 class="article_title">А можно в картинках?</h2>
      <div class="gallery">
        <img
          src="./images/sunset.png"
          alt="Изображение Закат солнца"
          loading="lazy"
          class="image image_1"
        />
        <img
          src="./images/ice-cream.png"
          alt="Изображение Мороженное"
          loading="lazy"
          class="image image_2"
        />
        <img
          src="./images/tape.png"
          alt="Изображение Кассета"
          loading="lazy"
          class="image image_3"
        />
        <img
          src="./images/books.png"
          alt="Изображение Книги"
          loading="lazy"
          class="image image_4"
        />
        <img
          src="./images/street.png"
          alt="Изображение Улица"
          loading="lazy"
          class="image image_5"
        />
      </div>
    </section>    
    </main>
    <footer class="footer decorated-zone">
      <h2 class="footer_title">focus</h2>
    </footer>
    <script src="./scripts/script.js"></script>
  </body>
</html>