:root {

    --gradient-stop-1: #FDFBF7;
    --gradient-stop-2: #F4EFE6;
    --gradient-stop-3: #E2D4C3;
    --gradient-stop-4: #A94A4C;
    --gradient-stop-5: #7A1C28;
    --gradient-stop-6: #4A0E17;
    --text-oscuro: #2C1A1D;
    --text-claro: #F7F2EB;
    --color-accent: #D93848;

    --alarmante: red;
    --correcto: green;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: 0;
}

body {
    background: var(--gradient-stop-4);
}

main {
    background: var(--gradient-stop-3);
    width: 50%;
    margin: 8em auto;
    padding: 2em 5em;
    border-radius: 10px;
    min-height: 30em;

    box-shadow: 0px 6px 20px 6px rgba(0, 0, 0, 0.49);
    -webkit-box-shadow: 0px 6px 20px 6px rgba(0, 0, 0, 0.49);
}

main>h1 {
    text-align: center;
    color: var(--text-oscuro);
}

main>form>label,
main>form>input,
main>form>button {
    display: block;
    padding: 1em;
    text-align: center;
    margin: 1em auto;
}

main>form>button {
    background: var(--gradient-stop-6);
    padding: 1.2em;
    color: var(--text-claro);
}

main>form>button:hover {
    color: var(--color-accent);
}

@media screen and (width < 768px) {

    main {
        background: var(--gradient-stop-3);
        width: 100%;
        margin: 8em 0;
        padding: 2em 5em;
        border-radius: 0;
        align-self: center;
        justify-self: center;
        min-height: 0;
        box-shadow: none;
    }
}