<script setup lang="ts">

</script>

<template>
    <footer class="footer">
        <span>&copy; Dr Edgy Adventures</span>
    </footer>
</template>

<style scoped>
.footer {
    will-change: transform, opacity;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5dvh;

    /* glassy background */
    background: hsla(30, 100%, 46%, 0.8);

    /* frosted borders */
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);

    /* chamfered corners */
    clip-path: polygon(
        20px 0,                  /* top-left chamfer */
        calc(100% - 20px) 0,     /* top-right chamfer */
        100% 20px,
        100% 100%,
        0 100%,
        0 20px                   /* bottom-left chamfer */
    );

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    color: white;
}
</style>
