Алексей

можно попробовать через свойство CSS:
transform: all 200ms linear;

Элементу с иксами поставьте свойство:
word-wrap: break-word;
Текст будет переносится и не вылазить по перед батьки.

Если absolute применить то он уедет, без скриптов можно так сделать?

Можно поднять его, изменив z-index, тогда не должно уехать. Ну и тень сделать box-shadow, это создаст иллюзию того что блок выше всего контента. Без JS можно обойтись.

Для этого в CSS существуют медиазапросы. Научитесь их использовать и сможете решить свою проблему. И javascript тут не причем.

Чтобы сработала анимация transition, нужно чтобы чтобы было какое-либо изменение состояния. Т.е. должен быть либо :hover, либо динамически должен добавлятся модификатор основного стиля, тогда произойдет плавная модификация. Пример:

.example {
  background: green;
  height: 100px;
  transition: all 1s linear;
  width: 100px;
}

.example:hover {
  background: red;
  height: 200px;
  width: 200px;
}

Вариантов куча, что конкретно нужно и при каких разрешениях?

Еще есть heroku

Возьмите мою сборку ну или посмотрите как устроено и соберите свою на ее основе. И звездочку не забудьте поставить мне на гитхабе )). Собрал на основе webpack/pug/stylus/babel/autoprefixer, в общем все на острие технологий.

Какой стиль у user__text?

Можно сверстать прямо, затем повернуть внутри body, при помощи transform: rotate(n deg) на нужный угол а градиент наложить сверху через псевдоэлемент after

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

background: url('url') no-repeat center

Поменяй name во второй группе инпутов и тогда они будут независимы. Например name="color2"