I am newbie with javascript and here is my problem.

Here is my code

https://codepen.io/nguyencuc2035/pen/XWVXxxK

As you can see in my code, I wrote a javascript to display a banner named toast at a right conner and here is the code

<script>
        function toast({
            title = '',
            message = '',
            type = 'info',
            duration = 3000
        }) {
            const main = documet.getElementById('toast');
            if (main) {
                const toast = documet.createElement('div');
                toast.classList.add('toast');
                toast.innerHTML = `
                <div class="toast__icon">
                <i class="fa-solid fa-circle-check"></i>
                </div>
                <div class="toast__body">
                <h3 class="toast__title">Success</h3>
                <p class="toast__msg">Import an external stylesheet:</p>
                </div>
                <div class="toast__close">
                <i class="fa-solid fa-xmark"></i>
                </div>
                `;
                main.appendChild(toast);
            }
        }
        toast({
            title: 'Success',
            message: 'Import an external stylesheet:',
            type: 'success',
            duration: 3000
        })
    </script>

Of course in the styles.css I wrote .toast .toast__icon , .toast__body , .toast__close,

But my problem is, when I ran my code, it only display the toast__body and toast__close, not display the toast.

Could you please give me some advice for this problem ? Thank you very much for your time.