---
interface Props {
    title: string
}

const { title } = Astro.props;
---

<div class="card">
    <h2>{title}</h2>
    <slot/>
</div>
<style>
    .card h2 {
        font-family: "Sharp PC3K-2x", monospace;
        font-size: 1em;
        text-align: center;
        padding: 8px 0 4px 0;
        background-color: var(--foreground);
        color: var(--background);
    }

    .card {
        width: fit-content;
        /* the golden rule i think */
        /* max-width: 800px is my everything */
        max-width: 800px;
        height: fit-content;
        background-color: var(--background);
        color: var(--foreground);
        box-shadow: .25em .25em var(--foreground);
        padding: 1em;
    }
</style>
