При смене темы с черной на белую некоторые элементы странно себя ведут. В чем проблема и как решить?

let pageNode = document.querySelector(`#container`);
let turnOnNode = document.querySelector(`#turn_on`);
let turnOffNode = document.querySelector(`#turn_off`);
let textNode = document.querySelector(`.text`);
let lastImgNode = document.querySelector(`#last_img`);

turnOffNode.addEventListener(`click`, function() {
  pageNode.classList.add(`dark`);
  pageNode.classList.remove(`light`);
  lastImgNode.innerHTML = `
        </div><img id="last_img" src="assets/1572868653_DimCoordinatedBeagle-mobile.gif" alt="logo" />`;
});

turnOnNode.addEventListener(`click`, function() {
  pageNode.classList.add(`light`);
  pageNode.classList.remove(`dark`);
  lastImgNode.innerHTML = `
        </div><img id="last_img" src="assets/825630_screenshots_20190601215900_2.jpg" style="width: 80%;" alt="logo" />`;
});

let clickButtonNode = document.querySelector(`#click_button`);
let clicksNode = document.querySelector(`#clicks`);

let count = 0;

clickButtonNode.addEventListener(`click`, function() {
  count++;
  clicksNode.innerHTML = `Количество кликов:` + count;
  if (count == 100) {
    count = 0;
  }
})

body {
  margin: 0;
  padding: 0;
  background-color: black;
}

#start {
  display: flex;
  flex-wrap: wrap;
  gap: 200px;
  margin-bottom: 200px;
  justify-content: center;
}

#main_img {
  width: 100%;
  max-width: 900px;
  margin-top: 20px;
  border: 4px solid chocolate;
  border-radius: 15px;
}

#title {
  text-align: center;
  flex-grow: 1;
}

h1 {
  font-size: 70px;
  font-family: 'Courier New', Courier, monospace;
  margin-bottom: 0;
  color: chocolate;
}

#org_title {
  margin-top: 0;
  font-size: xx-large;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: chocolate;
}

#turn {
  position: absolute;
  top: 100px;
  right: 100px;
}

#turn_on {
  color: #ffe4c4;
  font-size: 18px;
  font-weight: 600;
  background-color: #d2691e;
  padding: 20px 40px;
  border: none;
  border-radius: 8px;
  margin-right: 20px;
}

#turn_off {
  color: #151414;
  font-size: 18px;
  font-weight: 600;
  background-color: #d2691e;
  padding: 20px 40px;
  border: none;
  border-radius: 8px;
}

#turn_on:hover {
  transition: all 100ms;
  outline: 3px solid dimgray;
}

#turn_off:hover {
  transition: all 100ms;
  outline: 3px solid dimgray;
}

#turn_on:focus-visible {
  transition: all 100ms;
  outline: 3px solid darkgrey;
}

#turn_off:focus-visible {
  transition: all 100ms;
  outline: 3px solid darkgrey;
}

#turn_on:active {
  transition: all 100ms;
  background-color: #d75d07;
  color: #ffffff;
}

#turn_off:active {
  transition: all 100ms;
  background-color: #d75d07;
  color: #000000;
}

#container {
  transition: 500ms;
}

.dark {
  background-color: #000000;
}

.light {
  background-color: #ffffff;
}

#navigation {
  display: flex;
  justify-content: center;
  color: black;
  background-color: chocolate;
  height: 400px;
  flex-basis: 300px;
  border: 6px double black;
  border-radius: 14px;
}

.characters {
  text-align: center;
}

#nav_list {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: center;
  list-style: none;
  gap: 40px;
}

a {
  font-weight: 600;
  color: black;
  font-size: 24px;
  font-family: 'Courier New', Courier, monospace;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media (min-width: 1420px) {
  #navigation {
    position: relative;
    top: 300px;
    right: 150px;
  }
}

@media (max-width: 1420px) {
  #turn {
    position: relative;
    display: flex;
    justify-content: center;
    align-self: center;
    top: 0px;
    right: 0px;
  }
}

@media (max-width: 960px) {
  #start {
    flex-direction: column;
    align-items: center;
  }
  #title {
    width: 80%;
    max-width: 600px;
  }
  #turn {
    width: 80%;
  }
  #navigation {
    width: 80%;
    max-width: 300px;
  }
  #main_img {
    transition: all 200ms;
    max-width: 600px;
  }
}

@media (max-width: 634px) {
  body {
    position: absolute;
  }
  #title {}
  #turn {}
  #navigation {}
}

.characters {
  font-size: 30px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

main {
  display: flex;
  flex-wrap: wrap;
  gap: 250px;
  flex-direction: column;
}

#Rintaro_Okabe,
#Itaru_Hasida {
  text-align: center;
  display: flex;
  align-self: center;
  width: 80%;
  flex-direction: column;
  align-items: center;
  line-height: 36px;
}

#Kurisu_Makise,
#Mayuri_Sina {
  align-self: center;
  text-align: center;
  display: flex;
  width: 80%;
  flex-direction: column;
  align-items: center;
  line-height: 36px;
}

.name {
  color: chocolate;
  font-size: 35px;
}

.description {
  color: chocolate;
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px;
}

#quotes {
  color: chocolate;
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px;
}

.quote_li {
  text-align: start;
  color: chocolate;
  font-style: italic;
}

.description_img {
  width: 100%;
  max-width: 600px;
  margin-bottom: 20px;
  border: 4px solid chocolate;
  border-radius: 15px;
}

footer {
  margin-top: 200px;
}

#click_container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 50vh;
}

#click_button {
  padding: 20px 40px;
  border-radius: 15px;
  border: none;
  background-color: chocolate;
  color: black;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 20px;
}

#click_button:active {
  color: #1d1b1b;
  outline: 4px solid #1d1b1b;
}

#text_clicks {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 18px;
}

#last_img {
  display: flex;
  justify-content: center;
  align-items: center;
}

#begin {
  width: 100%;
  height: auto;
  display: block;
  text-align: center;
  font-size: xx-large;
  font-family: 'Courier New', Courier, monospace;
  flex-basis: 100%;
  color: chocolate;
  margin: 100px 0px;
}

#begin:hover {
  text-decoration: underline;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/index.css">
  <title>Steins Gate</title>
  <script src="js/index.js" defer></script>
</head>

<body id="container" class="dark">
  <header id="start">
    <div id="title">
      <h1>Врата Штейна</h1>
      <p id="org_title">Steins Gate</p>
      <img id="main_img" src="assets/6627453519.jpg" alt="" />
    </div>
    <div id="turn">
      <button id="turn_on">Светлая тема</button>
      <button id="turn_off">Тёмная тема</button>
    </div>
    <div id="navigation">
      <div id="main_characters">
        <h2 class="characters">Главные герои</h2>
        <ul id="nav_list">
          <li class="nav_li"><a href="#Rintaro_Okabe">Ринтаро Окабэ</a></li>
          <li class="nav_li"><a href="#Kurisu_Makise">Курису Макисэ</a></li>
          <li class="nav_li"><a href="#Itaru_Hasida">Итару Хасида</a></li>
          <li class="nav_li"><a href="#Mayuri_Sina">Маюри Сина</a></li>
        </ul>
      </div>
    </div>
  </header>
  <main>
    <article id="Rintaro_Okabe">
      <h2 class="name">Ринтаро Окабэ</h2>
      <img class="description_img" src="assets/210c8eb139f3a3fe731b13689dba8f92f71b1d08r1-768-512v2_hq.jpg" alt="Rintaro_Okabe" />
      <p class="description">
        Восемнадцатилетний студент первого курса Токийского электротехнического университета, но уже ощущает себя не только гениальным, но и, как это принято у гениев, — сумасшедшим учёным. Доказывает это он рассказами о таинственной «организации», которая неусыпно
        следит за студентом. Основатель «Лаборатории гаджетов будущего». Любит поговорить по телефону сам с собой и посмеяться как настоящий безумец. Его не всегда устраивает собственное имя, и он зовёт себя Кёма Хооин (яп. 鳳凰院 凶真), что можно перевести
        как «Феникс жестокой реальности». А вот его подруга детства Маюри (позже к ней присоединяется Дару) называет гения «Окарин», просто соединив первые буквы его имени и фамилии. Практически не выходит из своей «Лаборатории гаджетов будущего», поэтому
        его легко издалека узнать по белому лабораторному халату.
      </p>
      <p class="description">Цитаты</p>
      <ul id="quotes">
        <li class="quote_li">“Это выбор Врат Штейна!” – Коронная фраза Окабе.</li>
        <li class="quote_li">“Я великий безумный учёный, Хооин Кёма!”</li>
        <li class="quote_li">“Гениальная извращенка” – Окабе говорит Курису.</li>
        <li class="quote_li">“Это интеллектуальный напиток для избранных” – Окабе о Dr. Pepper.</li>
        <li class="quote_li">“Эм… Hey mister, I am mad scientist. It’s soo COOOL! Sonuvabitch.” – Окабе торговцу значками, на ломаном английском.</li>
      </ul>
    </article>
    <article id="Kurisu_Makise">
      <h2 class="name">Курису Макисэ</h2>
      <img class="description_img" src="assets/sganime4.png" alt="Kurisu Makise" />
      <p class="description">
        Член «Лаборатории гаджетов будущего» № 004. Возраст — 18 лет. Талантливая исследовательница неврологии в американском университете. Когда ей было 17 лет, её исследование было опубликовано во всемирно-известном журнале «Science» (в аниме название заменено
        на «Sciency»). Окабэ часто называет её ассистентом или придуманным им прозвищем — Кристина (саму Курису это очень раздражает). На первый взгляд — спокойная девушка, краснеет, если кто-то незнакомый приближается к ней слишком близко, но в душе
        — полная противоположность: однажды заставила Окарина стоять на коленях три часа подряд, при этом грозясь ударить его книгой. Всегда стоит на своём, не любит проигрывать и не любит, когда кто-то пытается управлять ею.
      </p>
      <p class="description">Цитаты</p>
      <ul id="quotes">
        <li class="quote_li">“Произошло что-то серьёзное, если ты зовёшь меня по имени” – Курису говорит Окабе.
        </li>
        <li class="quote_li">“Чувства людей – воспоминания, которые преодолели время.”</li>
        <li class="quote_li">“Время летит так быстро. Сейчас я согласна с Эйнштейном. Время течёт быстрее или медленнее в зависимости от восприятия. Теория относительности такая романтичная. И такая грустная.”
        </li>
        <li class="quote_li">(После поцелуя Окабе) ”Есть научное объяснение этого! Яркие воспоминания, например, первый поцелуй, сохраняются в гиппокампе, и их труднее забыть.”</li>
        <li class="quote_li">“Скажи правильно, Хооуин Трусы-Кёма!” – Курису говорит Окабе</li>
      </ul>
    </article>
    <article id="Itaru_Hasida">
      <h2 class="name">Итару Хасида</h2>
      <img class="description_img" src="assets/1988447_Portuguese(Brazil)_KeyArt-OfficialVideoImage_43e1e196-dab3-4e33-a1c1-028ec416d2c5.jpg" alt="Itaru Hasida" />
      <p class="description">
        Известный под прозвищем друзей Дару — девятнадцатилетний подросток, который учится на первом курсе Токийского электротехнического университета. Также является членом «Лаборатории гаджетов будущего», занесённый в список под номером «003», где его «специализация»
        — хакерские взломы. Ведь, несмотря на юный возраст, Дару отлично разбирается и в программном, и в аппаратном обеспечениях компьютера. Но эти умения никак не помогают ему в личной жизни. Неуверенный в себе с излишним весом, Дару просто боится людей
        и общается только с помощью компьютера. Для моральной поддержки выбрал культуру отаку. Дару не социопат и не опасен для общества. Он самостоятельно выбирает нетрадиционный образ жизни вне активного взаимодействия с другими людьми. Он сам навешивает
        на себя ярлык отаку. Это юношеский протест и своеобразный вызов, за которым на самом деле кроется ранимое сердце. И если бы нашёлся неравнодушный человек, он бы смог расшевелить Дару, выведя его из берлоги в люди.
      </p>
      <p class="description">Цитаты</p>
      <ul id="quotes">
        <li class="quote_li">“Это не имеет никакого смысла!.. Умри! Черт возьми!”</li>
        <li class="quote_li">“Human is dead… Mismatch.”</li>
        <li class="quote_li">“Можешь сказать: 'Да кто будет есть твой банан, извращенец?'”- Дару говорит Курису.
        </li>
        <li class="quote_li">“Скажи: 'Твой банан мягкий'.” – Дару говорит Маюри.</li>
      </ul>
    </article>
    <article id="Mayuri_Sina">
      <h2 class="name">Маюри Сина</h2>
      <img class="description_img" src="assets/scale_1200.png" alt="Mayuri Sina" />
      <p class="description">
        Девушка, в свои шестнадцать лет ставшая членом «Лаборатории гаджетов будущего» под номером «002», сразу за её главой. А всё потому, что она неизменная подруга детства Ринтаро, и за это имеет право называть его лично придуманным именем «Окарин». Себя же
        называет «Маюси». Немного легкомысленна, что может быть следствием её увлечения — косплея, для которого она любит придумывать и шить разнообразные костюмы. Кроме того, Ринтаро про себя шутливо удивляется: «Похоже, у неё действительно ветер в голове».
        Но, по его же словам, несмотря на всю её несерьёзность и глуповатость, Маюри способна, как никто другой, подбодрить и будет рядом, если тебе это нужно. Не сидит ни у кого на шее, самостоятельно подрабатывает в мэйд-кафе, где официантки наряжены
        в костюмы горничных.
      </p>
      <p class="description">Цитаты</p>
      <ul id="quotes">
        <li class="quote_li">“Мы должны устроить мир во всём мире. Например, дать каждому по плюшевому Упе…” –Маюри придумывает желание для Ди-мейла.</li>
        <li class="quote_li">“Посмотри, у нас появилось столько новых друзей: Дару-кун, Крис-тян, Руко-тян, Сузу-сан, Моека-сан, Фейрис-тян, Браун-сан, Наэ-тян. Весной ты выглядел таким одиноким… Но сейчас всё в порядке. Тебе больше не нужна Маюри в качестве заложника.”</li>
        <li class="quote_li">“Посмотри, у нас появилось столько новых друзей: Дару-кун, Крис-тян, Руко-тян, Сузу-сан, Моека-сан, Фейрис-тян, Браун-сан, Наэ-тян. Весной ты выглядел таким одиноким… Но сейчас всё в порядке. Тебе больше не нужна Маюри в качестве заложника.”</li>
        <li class="quote_li">“Посмотри, у нас появилось столько новых друзей: Дару-кун, Крис-тян, Руко-тян, Сузу-сан, Моека-сан, Фейрис-тян, Браун-сан, Наэ-тян. Весной ты выглядел таким одиноким… Но сейчас всё в порядке. Тебе больше не нужна Маюри в качестве заложника.”</li>
      </ul>
    </article>
  </main>
  <footer id="last_container">
    <div id="click_container">
      <button id="click_button">Нажми на меня</button>
      <p id="text_clicks"><i id="clicks"></i></p>
    </div>
    <div id="last_img">
      <img id="logo" src="assets/1572868653_DimCoordinatedBeagle-mobile.gif" alt="logo" />
    </div>
    <a id="begin" href="#start">Начало</a>
  </footer>
</body>


</html>