<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gorestars</title>
    <link rel="icon" href="ico.png">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/typewriter.js" defer></script>
    <script src="js/title.js" defer></script>
</head>

<body>
    <video id="background-video" loop>
        <source src="2Scratch - E.T.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <div class="overlay" onclick="enterSite(); playVideo();">
        <div class="overlay-text">> click <</div>
    </div>

    <div class="container">
        <h1>gorestars.lol</h1>
        <div class="typewriter-container" style="height: 1.2rem; overflow: hidden;">
            <span id="animated-title"></span><span id="cursor">|</span>
        </div>
    </div>

    <div class="snowflakes fade-in">
        <div class="snowflake">♡</div>
        <div class="snowflake">♱</div>
        <div class="snowflake">♡</div>
        <div class="snowflake">/info</div>
        <div class="snowflake">♡</div>
        <div class="snowflake">♱</div>
        <div class="snowflake">♡</div>
        <div class="snowflake">sorrow</div>
        <div class="snowflake">♡</div>
        <div class="snowflake">♱</div>
        <div class="snowflake">♡</div>
    </div>

    <script>
        function enterSite() {
            const overlay = document.querySelector('.overlay');
            const overlayText = document.querySelector('.overlay-text');

            overlay.classList.add('fade-out');
            overlayText.classList.add('fade-out');

            setTimeout(function () {
                overlay.style.display = 'none';
                overlayText.style.display = 'none';
            }, 2000);
        }

        function playVideo() {
            var video = document.getElementById('background-video');
            video.volume = 0.08;
            video.play();
        }
    </script>
</body>

</html>