Глюкъ Виртуален

Пропишите разные div ID одного класса и задавайте параметры по ID.

Кажется здесь только флексом... Замените таблицу на флексбоксы, заодно и мобильную верстку победите.

Ранжирование улучшится.
Потому что заброшенные сайты, которые никогда не изменяются, живут на самом дне поиска.

.resizableBlock {
     min-width: 100px;
 }

Ну и вместо 100px вычисляешь сколько надо.

Правильно — выкусить все JS вычисления и сверстать всё на flex.
https://html5.by/blog/flexbox/

Верска под печать использует медиазапрос с "media = print"
Определи в css секцию

@media print {
....
}

и пропиши там все что нужно.

Попробуй расположить медиазапросы от меньшей ширины к большей.

Методом исключения.
Пропишите   во всех местах, где переноса строк не должно быть.

Изменяя в своем дизайне привычные пользователю стили, вы дезориентируете его. Он уже привык к тому, что при фокусе у поля будет такой-то цвет, а при нажатии на кнопку — этакий.
Оставьте этот момент на совесть браузера и уделите освободившееся время фиксам ваших багов.

Не absolute, а fixed вы хотели сказать?
И это... флекс не предназначен для вашей задачи.

Один большой.
Neyury говорит правильно.

Я бы отказался от картинки — она тупая и бесполезная — и сделал бы пару медиазапросов.

Зачем извращения? Назначьте футеру

position: fixed;
    bottom: 0px;

Там есть одна маленькая хитрость, но вы догадаетесь ;)

Toggle не для этого.
Используйте addClass / removeClass или пихайте говнокодом в инлайн по заветам Генератора.

Назначьте body стиль display:none.
Когда произойдет window.onload (или document.ready -смотрите что именно вам подойдет), сделайте display:block.

Ага, а потом грузить эти самопальные недошрифты каждому юзеру в браузер... :)

Не надо ТАК извращаться в вебе, оно не для того.
Если очень уж сильно хочется, создайте все буквы по отдельности, затем составляйте из них нужные слова. Но что-то мне кажется, что уже на полпути вы поймете, что веб не для этого и ваша идея не стоит извращений.