Ankhena

label:first-child:last-child {display: none}

Поверх кнопки прозрачный инпут чекбокс.

Не поверх только, а перед ней и доступно скрытый (visually-hidden)
И дальше через :checked + label или label снаружи и тогда + span

:not(:disabled)
input лишний был

Если блоки одинаковой высоты, то решается нужными отступами и nth-child.

Если высота не одинаковая, то masonry или его аналоги.

Такие иконки вставляются либо
- фоном для кнопки
- псевдоэлементом
- фоном для псевдоэлемента

Например, фон для псевдо https://jsfiddle.net/uhs2Lqty/
Или просто фон https://jsfiddle.net/vez5ot1m/
Если есть шанс, что текста будет больше, чем на 1 строку, то флексами https://jsfiddle.net/80kLaygo/ или абсолютом https://jsfiddle.net/fn9p3zed/

Если вы не учите js, а хотите изменить инпут в фокусе, то используйте css

input:focus {
color: rgba(0,0,0,1);
}

А если учите js, то изучите querySelectorAll и forEach, а также браузерные события и пишите их в скрипте, а не в разметке, не делайте кашу из кода.
https://developer.mozilla.org/ru/docs/Web/API/Docu...
https://learn.javascript.ru/introduction-browser-events
https://learn.javascript.ru/array-methods

Поизвращаться со шрифтом.
Вот таким способом можно применить другой шрифт только к цифровым символам

@font-face {
    font-family: 'drevodel_regular';
         url('fonts/drevodel_regular.woff2') format('woff2'),
         url('fonts/drevodel_regular.woff') format('woff'),
    font-weight: normal;
    font-style: normal;
    unicode-range: U+30-39;
}

Не работает с шрифтами подключенными через Google fonts, необходимо локальное подключение.

https://jsfiddle.net/hL6mft9e/
https://jsfiddle.net/6x1ynheu/

В тег p нельзя засовывать другие p, div и т.д.
Браузер нарисует их не так, как вы ожидаете.
Он закроет p, там где начнется другой блок.
Внутрь p можно вкладывать только фразовый контент.
Спецификация

Так что в качестве контейнера используйте лучше div

За вставку контента отвечает innerHTML https://learn.javascript.ru/basic-dom-node-propert...

Так https://jsfiddle.net/tg3nqoef/

Артур, потому что вы всегда добавляете aqua.
Лучше манипулировать классами, чем писать свойства в скрипте.
Т.е. точно также как вы для блока добавляете/убираете класс, также вешайте класс и на body.

Тут

background.style.background = "none";
background.style.backgroundColor = "aqua";

вы фон убрали и тут же вернули.
Современные браузеры не будут рисовать даже на мелькание.

https://jsfiddle.net/xgkbzqe1/

В вашем коде было:
1. Ищете элемент по id, который называется .img
2. toggle пишется так.

Обычно для ловли таких ошибок достаточно пользоваться хорошим редактором с подсветкой ошибок и открытой консоли, которая тоже покажет ошибки и js и почему не применяется css.

Псевдокласс :placeholder-shown

Да просто при нажатии на кнопку, вешаете класс на body

.no-bg, .no-bg * {
background: none
}

Лучше, конечно, у конкретных элементов убирать, а не использовать *. Но для этого их нужно знать либо искать через js.
И не забудьте, что иконки на сайте часто бывают сделаны через bg.

Это не криворукий верстальщик.
Это так показывают инструменты разработчика, когда у файла есть "хвостик" после знака вопроса.
Это сделано для того, чтобы не было кеширования. Версия файла меняется - меняется хеш - у пользователя стили берутся не кеша. Если версия не поменялась, то из кеша.
На самом деле, к сайту подключен один файл style.css
Остальные "кусочки" показывает source map.

Поскольку меню не покидает свою позицию, а всегда fixed, то проверять скролл.
Как только он отличен от нуля (или больше, чем вам нужно) менять класс у меню.
И в обратную сторону.