Ankhena

Использовать :focus-within
https://jsfiddle.net/sw35Lxny/

Работает https://jsfiddle.net/hkyamdbg/
Но если только 2 слоя, картинка и цвет и цвет это нижний слой, то пишут просто одно обычное свойство background, начиная его с цвета.
background: red url()

1. Не стоит использовать id для стилизации, используйте классы. И один id на странице может использоваться только один раз. Т.е. не могут одновременно существовать два div'а c id line.
2. Чтобы сделать полосочки не нужны целые div'ы.
Псевдоэлементов за глаза и за уши хватает.
Полосочки это украшения, а не содержательная часть страницы.
3. Переходите на flex и grid. Флоаты придумали не для этого.
4. Два br подряд это дурной тон. Отступы делаются с помощью padding и margin.
5. Префиксы ручками в исходниках не пишут, а используют автопрефиксер https://autoprefixer.github.io/ru/ Причем, обычно, встроенный в сборщик.
У вас они еще и в неправильном порядке написаны.
Свойство без префикса должно идти последним (за очень редким исключением).
6. Надпись становится рядом с картинкой потому что вы сказали ей "встань слева и пусть все обтекает тебя справа" (float:left) И еще потому что надпись span, т.е. строчный элемент. Нужно либо div либо p либо сделать span блочным.

Мой любимый фокус https://jsfiddle.net/Ankhena/56Ltxdkq/

Потому что вы забыли meta viewport

<meta name="viewport" content="width=device-width">

Поставьте align-items: flex-start; для info-mini-map

Использовать object-fit: cover
https://webref.ru/css/object-fit

Псевдоэлементом.
Позиционируете по центру.
Ширину ставите в 0.
При наведении 100%
https://jsfiddle.net/52vtgw3n/

На денвере письма не приходят в почту, а складываются в папку.
В какую именно я давно забыла, погуглите.

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

Тут

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

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

Либо flex-grow. Не понятно, почему вы его боитесь.
Либо гридами
grid-template-rows: min-content 1fr;

Ссылка для этого вообще не нужна.
Ссылка нужна для того, чтобы при клике на нее посетитель перешел на другую страницу или к якорю на текущей.

Подчеркивание реализовывается кучей других способов.
text-decoration, border, тень, градиент и т.д.

Для вашей задачи можно сделать, например, так https://jsfiddle.net/rc5fnp0k/

У вас высота блока 100vh
И align-content: stretch (не потому что вы его написали, а потому что по умолчанию)

Если вы его замените на align-content: flex-start всё будет хорошо.

z-index укажите

UPD

Модальному окну задал position fixed и расположение top 0, left 0.

Если бы так, то всё бы работало.
Но у вас задан left и right

Гуглить по запросу clearfix

А вообще переходить на флексы и гриды.

Вы написали 2 инпута.

<input type="submit" name="submit" value="Отправить" /><input />

Один с атрибутами, другой без.

Если бы инпут был бы парным тегом, то слеш ставился бы в начале закрывающего тега, вот так: </input>
Но инпут одиночный тег и правильно пишется так (вообще без слешей):

<input type="submit" name="submit" value="Отправить">

Но у вас это кнопка.
Поэтому, имеет смысл заменить ее на button

<button type="submit" name="submit">Отправить</button>

Так и её будет проще стилизовать

Вариантов масса:
1. На слое правой кнопкой: быстрый экспорт в PNG или экспортировать как.

2.
ctrl+A ctrl+C
новый файл
ctrl+V
Сохранить

3. Пользоваться инструментами обрезки