Туториал по тому, как сделать input

Задача

Пример не сложной стилизации поля ввода по средствам html и css.

HTML

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="index.css">
<head>
    <meta charset="UTF-8">
    <title>Justice IT</title>
</head>
<body>
<div class="container">
    <input type="text" class="input">
</div>
</body>
</html>

CSS

.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}

.input {
    padding: 10px;
    font-size: 30px;
    border: 10px solid rgba(255, 255, 255, .5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25) inset, 0 2px 10px rgba(0, 0, 0, .25);
    border-radius: 10px;
    background: rgba(255, 255, 255, .5);
    appearance: none;
    outline: none;
    color: #333;
    width: 50%;
    position: absolute;
    left: 25%;
    font-family: Bebas Neue,sans-serif;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0.03em;
}