Шохрух Шаймардонов

Логика значит такая.
При создании таймера получаете время его запуска и записываете в localStorage, при определении неактивного состояния страницы записываете это время туда же. И при возвращении высчитав разницу во времени продолжаете считать с нужного момента.

Потому что в селекторе " + #header" лишний. Ибо его нет на месте

Поменяй порядок вложенности тегов. a вынеси из div и div оберни a

Если вам хочется сидеть на винде изза привычного интерфейса, то могу предложить вместо убунту попробовать другие дистрибутивы (также на базе убунту), у которых более привычный "виндаподобный" интерфейс. Сам сижу с недавнего времени полноценно на elementaryOS, с такими же задачами (фуллстэк) и все норм. Также можете глянуть Mint, Deepin, Manjaro (те, с которыми сталкивался и показались "привычними" и удобными) ну и также много других дистро. Если конечно проблема в этом. Ну а если дело во взаимодействии (хочу ехе а не быть хацкером с терминалом, то... Увы, тут придется смириться. Ибо почти вся веб разработка через консоль управляется. Тот же самый гит с коммитами, все эти npm, pip, gem и прочее, требуют также взаимодействия через консоль)

Используйте label (главное после инпута его в html расположить)
И с помощью input:focus + label анимируйте

UPD: Не увидел сначала условие про диагонали:

0 - индекс в массиве. В вашем случае document.getElementsByTagName('span') - массив. И вы используя "[0]" обращаетесь к 1му элементу этого массива. (счет индексов в js с 0)