@import url("theme.css");

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--np-page);
    color: var(--np-text);
}

body {
    padding: 10px;
}

h1 {
    width: 100%;
    min-height: 30px;
    margin: 0;
    padding: 0 6px;
    background: var(--np-heading-accent);
    color: var(--np-heading-text);
    text-align: center;
    font-size: 20px;
    line-height: 30px;
}

#inscription,
#recuperation_mdp {
    width: min(320px, 100%);
    margin: 0 auto;
    padding: 10px;
    border: 1px solid var(--np-border);
    background: var(--np-surface);
    box-shadow: var(--np-shadow);
}

#inscription form,
#recuperation_mdp form {
    display: grid;
    gap: 7px;
}

input {
    width: 100%;
    max-width: 280px;
    min-height: 28px;
    margin-inline: auto;
    padding: 4px 6px;
    border: 1px solid var(--np-border);
    background: var(--np-surface);
    color: var(--np-text);
    text-align: left;
}

input[type="submit"],
button {
    display: block;
    width: 100%;
    max-width: 280px;
    min-height: 36px;
    margin: 3px auto 0;
    border: 1px solid var(--np-accent);
    background: var(--np-heading-accent-soft);
    color: var(--np-text);
    text-align: center;
}

input[type="submit"]:hover,
button:hover {
    background: var(--np-accent-hover);
}