WapSter

Примерно, так. Последнее слова в h1 желательно перенести при помощи br

https://developer.mozilla.org/ru/docs/Web/CSS/anim...
https://developer.mozilla.org/ru/docs/Web/CSS/anim...

Зачем ты к тегу html применяешь height: 100%

https://refreshless.com/nouislider/

FlexBox order или Grid layout grid-template-areas

Вместо alert пропиши код показывающий popup. А данные формы отправляй при помощи "ajax"

Тут лучше не стилями, а js так-как ты никогда не знаешь сколько нужно по высоте контенту. Получи максимальную высоту из всех слайдов, и задай такую же всем.
UPD. Внимательнее глянул твой код. Там оказывается display: none в основе. Стоит пределать на скольжение (все слайды видно, но просто скрыты за границами блока), что бы было без дерганий.

input одиночный тэг не нужно его закрывать. Документацию стоит читать https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Это связано с тем что у шрифта, одинаковая базовая линия проходящая через центр и при равной высоте строки подобные вещи будут выстраиваться относительно ее.

websocket но я не уверен, что будет 100% синхронность по этому делай перерыв между прокручиваниями подольше.

В тэге ul может находится только тэг li и никакой другой.

Google: viewport iphone 11

details summary::-webkit-details-marker {
  display:none;
}

Mike Ro, ну тогда оформлю с решением на js

https://webref.ru/css/mix-blend-mode
Еще можно вот так

это не юзер агент перебивает, а 8 строчка в файле style.css и ставит все равно 0. При этом у тебя внизу визуализация блока есть, которая так же показывает отсутствующий margin

Почему же, стили к div применились. Только у тебя блочные элементы p и они идут друг за другом, если ты что-то другого ожидал

Скорость падения зависит от времени анимации