Эффект смещения при фокусе

Урок 15 из 19 курса Клон страницы входа Netflix | Front-end проект на Coddy.

Как мы видим ниже, после нажатия на поля ввода текст метки немного смещается.

Этот код представляет собой фрагмент CSS, который стилизует элементы управления формой в зависимости от их состояния с помощью псевдокласса :is().

.form-control input:is(:focus,:valid): Этот селектор выбирает элементы <input> с классом .form-control, которые либо находятся в фокусе (:focus), либо имеют корректный ввод (:valid). При выполнении любого из этих условий цвет фона устанавливается на #444, а внутренний отступ (padding) изменяется на 16px 20px 0.
.form-control input:is(:focus, :valid)~label: Этот селектор выбирает элементы <label>, которые являются соседними элементами для ранее выбранных элементов <input> при тех же условиях: нахождение в фокусе или наличие корректного ввода. При выполнении любого из условий размер шрифта метки устанавливается на 0.75 rem, и она смещается вертикально вверх на -130%, вероятно, для создания эффекта «плавающей метки» над полем ввода.

Задание

Легко

Используйте код из подсказки в качестве ответа, но сначала попробуйте решить самостоятельно.

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>