How can I customize the password login page?

function customize_password_protected_page() {
    // Add Custom CSS
    echo '<style>
        /* Set the content 200px from the top */
        .post-password-form-wrapper {
            display: flex;
            justify-content: center;
            width: 100%;
            box-sizing: border-box;
            padding: 200px 20px 0 20px;
        }

        .post-password-form {
            width: 700px;
            max-width: 90vw;
            text-align: left;
        }

        /* Custom styling for title and message */
        .password-protected-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .post-password-form p {
            font-size: 18px;
            margin-bottom: 20px;
        }

        /* Styling the form elements */
        .post-password-form input[type="password"] {
            padding: 10px;
            font-size: 16px;
            flex: 1;
            margin-right: 10px;
            box-sizing: border-box;
            height: 40px; /* Set a fixed height */
        }

        .post-password-form input[type="submit"] {
            padding: 7px 20px 10px 20px;
            font-size: 16px;
            font-weight: 600;
            background-color: #FF0050;
            color: white;
            border: none;
            cursor: pointer;
            box-sizing: border-box;
            height: 40px; /* Set a fixed height */
            display: flex;
            align-items: center;
        }

        .post-password-form input[type="submit"]:hover {
            background-color: #000000;
        }

        /* Flexbox container to align inputs */
        .password-input-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .additional-info {
            margin-top: 20px;
            font-size: 18px;
        }

        .additional-info a {
            color: #FF0050;
            text-decoration: none;
        }

        .additional-info a:hover {
            text-decoration: underline;
        }
    </style>';

    // Add Custom JavaScript for Message
    echo '<script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            var protectedMessage = document.querySelector(".post-password-form p");
            if (protectedMessage) {
                protectedMessage.textContent = "You are not allowed here.";
            }
        });
    </script>';
}

add_action('wp_head', 'customize_password_protected_page');

// Add the Title Header and Additional Text with Link
function add_custom_password_title($content) {
    if (post_password_required()) {
        $title = '<div class="post-password-form-wrapper"><div class="post-password-form"><h1 class="password-protected-title">Login to Access</h1>';
        $additional_info = '<div class="additional-info">If you do not have a password then go here: <a href="https://learn.websquadron.co.uk">learn.websquadron.co.uk</a></div>';
        $content = $title . '<div class="password-input-container">' . $content . '</div>' . $additional_info . '</div></div>';
    }
    return $content;
}
add_filter('the_content', 'add_custom_password_title');