Custom Alert in html

<!--Custom Alert Box-->

<!--To use custom alert, use the alert() function...-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        body{
            background-color: rgb(175, 175, 175);
            font-family: sans-serif;
        }
        #alert-box{
            height: auto;
            width: 15rem;
            background-color: #FFFFFF;
            text-align: center;
            border-radius: .5rem;
            padding: 1rem;
            margin: auto;
            display: none;
        }
        #alert-btn{
            transform: translateX(8.1rem) translateY(-6.3rem);
            height: 1.5rem;
            width: 1.5rem;
            font-weight: bold;
            background-color: #FFAAAA;
            border-style: solid;
            border-radius: .5rem;
            border-color: #FF6666;
        }
        #alert-btn:hover{
            transform: translateX(8.1rem) translateY(-6.3rem) scale(1.1);
        }
    </style>
    <div id="alert-box">
        <h1 id="alert-title">ALERT</h1>
        <button id="alert-btn">&times;</button>
        <h3 id="alert-msg"></h3>
    </div>
    <script>
        alert = (txt) => {
            const id = (input) => {
                return document.getElementById(input)
            }

            id("alert-box").style.display = "block"
            id("alert-msg").innerHTML = txt
            id("alert-btn").onclick = () => {
                id("alert-box").style.display = "none"
            }
        }

        /*
            Example
        */

        alert("Alert Test")
    </script>
</body>
</html>