Efeito de deslocamento ao focar

Lição 15 de 19 do curso Clone da Página de Login da Netflix | Projeto Front-end da Coddy.

Como podemos ver abaixo, há um pequeno deslocamento no texto do rótulo após clicar nos campos de entrada.

Este código é um trecho de CSS que estiliza controles de formulário com base em seu estado usando a pseudo-classe :is().

.form-control input:is(:focus,:valid): Este seletor tem como alvo elementos <input> com a classe .form-control que estão em foco (:focus) ou possuem uma entrada válida (:valid). Quando qualquer uma dessas condições é atendida, a cor de fundo é definida como #444 e o preenchimento (padding) é ajustado para 16px 20px 0.
.form-control input:is(:focus, :valid)~label: Este seletor tem como alvo elementos <label> que são irmãos dos elementos <input> selecionados anteriormente com as mesmas condições: em foco ou com entrada válida. Quando qualquer uma das condições é atendida, o tamanho da fonte do rótulo é definido como 0.75 rem e ele é transladado verticalmente para cima em -130%, provavelmente para criar um efeito de rótulo flutuante acima do campo de entrada.

Desafio

Fácil

Use o código de dica como resposta, mas primeiro tente você mesmo.

Experimente você mesmo

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