Михаил

Такой трюк с установкой `z-index: -1` работает не всегда.
Во-первых, нужно убрать `transofrm` при его использовании создается новый контекст.
Во-вторых, при таком трюке у родителя не должно быть установлено `z-index`
https://codepen.io/Squall88/pen/eYraoxz

https://github.com/zalog/placeholder-loading

Смотрите, svg по своей сути это обычный текст и раз у вас рисование происходит не странице, то у вас есть в html контейнер где уже сгенерирован svg (пользователь же как-то видит результат работы). Ну а дальше, дело техники:

Например использовать checkbox (стилизовать если нужно). Пример

input[disabled] {
  background-color: green;
}

jsfiddle.net/ks3phfbt/2

<pre>ваш текст</pre>

Вам ничего не мешает в chrome devTools выставить любое разрешение и увидеть медиа запросы

Ну я бы сделал так.
1. По нажатию на кнопку "Cохранить", на сервер отправляются настройки.
2. Сервер на основе настроек формирует нужный html
3. Открываем например безголовым хромом этот html и сохраняем как pdf

В данный момент на проекте для этих нужд использую api для nodejs Puppeteer

Нужно для li поставить border изначально, но прознрачный, а при ховере менять цвет.

.navigation li {
    border-bottom: 2px solid transparent;
}
.navigation li:hover {
    border-color: white;
}

Если вы не хотите js, то тут вам придется слегка переверстать, нужно ваш label обернуть в ещё один блок в котором будет label и ссылка. И ссылку чере absolute поставить в нужное место, таким образом нажатие на ссылку, не будет задействовать события checkbox

-webkit-tap-highlight-color: transparent;

Перейти в вкладку computed - найти там свойство font-family - навести на него - нажать на иконку стрелочки

Таким способом вы подключите только regular шрифт. На сайте google fonts при добавлении шрифта, есть ещё пункт customize где вы можите настроить начертания и т.д.
Вот пример:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext" rel="stylesheet">

В CSS используйте font-weight и font-style

font-family: 'Roboto', sans-serif;
font-weight: bold;
font-style: italic;

и т.д.

Попробуйте добавить

.btn:active,
.btn:focus {
    outline: none;
}

Нет, он там и так есть.