---
interface Props {
    title?: string;
}

const { title = "eInk Dashboard" } = Astro.props;
---

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{title}</title>
    </head>
    <body>
        <slot />
    </body>
</html>

<style is:global>
    :root {
        --bg: #000000;
        --fg: #ffffff;
        --border: #ffffff;
        --gray: #808080;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: var(--bg);
        color: var(--fg);
        font-family: "Courier New", Courier, monospace;
        font-size: 14px;
        line-height: 1.5;
        padding: 5rem;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: bold;
        font-family: "Courier New", Courier, monospace;
    }

    button {
        background-color: var(--bg);
        color: var(--fg);
        border: 1px solid var(--border);
        padding: 0.5rem 1rem;
        font-family: "Courier New", Courier, monospace;
        cursor: pointer;
    }

    button:hover {
        background-color: var(--fg);
        color: var(--bg);
    }

    input,
    textarea,
    select {
        background-color: var(--bg);
        color: var(--fg);
        border: 1px solid var(--border);
        padding: 0.5rem;
        font-family: "Courier New", Courier, monospace;
        font-size: 14px;
    }

    input:focus,
    textarea:focus,
    select:focus {
        outline: 2px solid var(--fg);
    }
</style>
