main {
    display: flex;
    justify-content: center;
    align-items: center;
}

main a {
    text-decoration: none;
    color: #000000;
}

main form {
    display: grid;
    grid-template-rows: auto auto auto auto;
    width: 50%;
    max-width: 300px;
    margin: auto;
    grid-gap: 1ch;
}

main form input, main>form>input[type="button"] {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 0.25em;
}

main>form>input[type="button"]:hover {
    background-color: #f0f0f0;
    border: 1px solid #000000;
}

@media (max-width: 768px) {
    main form {
        width: 70%;
        max-width: 100%;
    }
}

@media (max-width: 400px) {
    main form {
        width: 95%;
        max-width: 100%;
    }
}