<div class="top d-flex justify-content-center align-items-center vh-100">
    <div class="top-content">
        <image src="media/logo.png" width="100%" height="auto" alt="Tiny Life"></image>
        <h4>A fun simulation game where you mess with people's lives</h4>

        <div class="container top-container">
            <div class="row">
                <div class="col site">
                    <h3>Play the free beta</h3>
                    <a href="https://ellpeck.itch.io/tiny-life">
                        <image src="media/itch.png" alt="itch.io" width="200px" height="auto"></image>
                    </a>
                </div>
                <div class="col site">
                    <h3>Wishlist and play</h3>
                    <a href="https://store.steampowered.com/app/1651490/Tiny_Life/">
                        <image src="media/steam.png" alt="Steam" width="200px" height="auto"></image>
                    </a>
                </div>
            </div>
            <a class="link" href="https://twitter.com/TinyLifeGame">Follow on Twitter</a>
            <a class="link" href="https://ellpeck.de/discord">Join the Discord</a>
            <a class="link" href="https://docs.tinylifegame.com">See Modding Docs</a>
            <a class="link" href="https://press.ellpeck.de/tinylife/">Get Press Kit</a>
        </div>
    </div>
</div>

<script>
    let x = Math.random() * 100;
    let y = Math.random() * 100;

    let angle = Math.random() * 2 * Math.PI;
    let addX = Math.cos(angle) * 0.02;
    let addY = Math.sin(angle) * 0.02;

    let background = $(".top");
    background.css("background-position", `${x}% ${y}%`);

    $(window).on("load", function () {
        setInterval(function () {
            x += addX;
            y += addY;
            if (x < 0 || x > 100)
                addX *= -1;
            if (y < 0 || y > 100)
                addY *= -1;
            background.css("background-position", `${x}% ${y}%`);
        }, 30);
    });
</script>