@layer reset, base, layout, reactivity;

@layer reset {
    * {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
    }
}

@layer base {
    :root {
        font-family: Helvetica, sans-serif;
        color: white;
        background: #0a0a0a;
    }
}

@layer layout {
    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    header {
        display: flex;
        place-content: center;
        padding: 1em;
    }

    h1 {
        display: flex;
    }

    main {
        flex: 1 0;
    }

    footer {
        padding: 1em;
    }

    button {
        border-radius: 0.4em;

        font-size: 1em;
        padding: 0.75em 2.5em;
    }
}

@layer reactivity {
    button:enabled:hover {
        cursor: pointer;
        opacity: 0.7;
    }

    button:enabled:active,
    button:enabled:focus {
        opacity: 0.7;
    }
}