Жуткая форма подписки с криком на CSS и JS

Жуткая форма подписки с проницающим криком как в фильме ужасов на CSS и JS которую можно использовать на тематическом сайте или на Хеллоуин. Тестируем, применяем по назначению))

HTML

<html>

<head>
    <link rel="stylesheet" href="index.css">
    <link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
</head>

<body>
    <form id="myForm">
        <h3>Join our spooky newsletter</h3>
        <input type="email" placeholder="skeleton@halloweentown.com" id="email-input">
        <button>Subscribe</button>
        <span>💀 if you dare 💀</span>
    </form>

    <div id="submitted">
        <h1>Boo!</h1>
        <p>There's thrilling content coming your way</p>
        <iframe class="giphy-embed" src="https://giphy.com/embed/5oWpOD8Thsmo8" ; frameBorder="0"></iframe>
    </div>

    <audio id="torture">
        <source src="http://soundbible.com/grab.php?id=1548&type=mp3" type="audio/mpeg">
        Your browser does not support the audio effect
    </audio>

    <script src="index.js"></script>
</body>

</html>

CSS

/* Submitted by Colin Myers :) */

body {
    margin: 0;
    background: #000;
    font-size: 20px;
    font-family: "Metal Mania", cursive;
    letter-spacing: 2px;
    color: #fff;
}

form {
    padding-top: 30vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h3 {
    color: #ff7518;
    margin-bottom: 0.5em;
}

span {
    font-size: 12px;
    margin-top: 0.5em;
}

input {
    width: 15rem;
    height: 1.5em;
    border: none;
    padding: 2px 5px 2px 5px;
    font-family: "Metal Mania", cursive;
    font-size: inherit;
}

input:focus {
    outline: none;
}

button {
    display: block;
    background-color: #ff7518;
    font-size: 15px;
    cursor: pointer;
    border: none;
    padding: 0.5em 2em;
    margin-top: 1em;
    font-family: "Metal Mania", cursive;
    letter-spacing: 3px;
}

button:hover,
button:focus {
    background-image: linear-gradient(to right, #ff7518 0%, #000 100%);
    color: #fff;
    outline: 1px solid #ff7518;
}

button:active {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

#submitted {
    padding-top: 2em;
    text-align: center;
    display: none;
}

const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const email = document.getElementById("email-input");
const form = document.getElementById("myForm");
const submittedMessage = document.getElementById("submitted");
const audio = document.getElementById("torture");
const error = document.getElementById("error");

form.addEventListener("submit", function (e) {
    e.preventDefault();
    if (!emailRegex.test(email.value)) {
        document.getElementById("error").style.display = "block";
        return;
    } else {
        form.style.display = "none";
        audio.play();
        submittedMessage.style.display = "block";
        console.log("email: ", email.value);
    }
});