<script lang="ts">
    var ratCounter = 0;

    let playSound = function() {
        let bolt = new Audio(`common/rat/bolt${ratCounter}.wav`)
        bolt.volume = 0.2;
        bolt.play();
        ratCounter += 1;
        if (ratCounter == 3) {
            ratCounter = 0;
        }
    }
</script>

<footer>
    <div class="background">
        <hr>
        <div class="content-container">
            <div class="content-box center-box">
                <p>〔 2023–2026 〕denizk0461</p>
            </div>
            <div class="content-box">
                <h6>Content</h6>
                <a href="/projects">Projects</a>
                <a href="/blog">Blog</a>
                <a href="/garden">Digital Garden</a>
            </div>
            <div class="content-box">
                <h6>Meta</h6>
                <a href="/meta/about">About</a>
                <a href="/meta/feeds">Feeds</a>
                <a href="https://codeberg.org/denizk0461/pages-svelte">Page Source</a>
                <a href="/meta/privacy">Privacy & Cookies</a>
            </div>
        </div>
        <input
            type="image"
            onclick={playSound} 
            title="the bottom rat" 
            alt="the bottom rat" 
            class="bottom-rat" 
            src="/common/rat/spookyrat.webp">
    </div>
</footer>

<style>
    footer {
        margin-top: auto;
        width: 100%;
    }

    footer h6 {
        font-family: var(--font-mono);
    }

    footer p, footer a {
        display: block;
        font-family: var(--font-mono);
        font-weight: 400;
        color: var(--color-text);
        text-decoration: none;
        font-size: 1rem;
        margin: 0;
    }

    footer a:hover {
        font-weight: 700;
    }

    .bottom-rat {
        position: absolute;
        width: 20%;
        max-width: 100px;
        right: 0;
        bottom: 0;
    }

    .background {
        background-color: var(--color-background-highlight);
        backdrop-filter: blur(6px);
        margin-top: 32px;
    }

    .content-container {
        box-sizing: border-box;
        max-width: var(--page-width);
        margin: 0 auto;
        padding: 0 var(--margin-content-side);
        display: flex;
        flex-flow: row;
        gap: 16px;
        justify-content: space-evenly;
        align-items: flex-start;
        padding-bottom: 16px;
    }

    .content-box {
        width: 100%;
        margin: 16px 0;
    }

    .center-box {
        margin: auto 0;
    }

    @media screen and (max-width: 800px) {
        .content-container {
            flex-direction: column;
            gap: 0;
            padding-bottom: 32px;
        }

        .content-box {
            margin: 8px 0;
        }

        .center-box {
            margin: 16px 0 8px;
        }
    }
</style>