*,
body {
    margin-top: 20px;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
}

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
}

@media screen and (min-width: 431px) {
    form {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 30%;
        margin: auto;
        text-align: center;
    }
    .champ:hover {
        background-color: rgb(175, 102, 244) !important;
    }
    .valide:hover {
        background-color: red;
        color: yellow;
    }
    input {
        text-align: center;
        font-size: larger;
        border-radius: 10px;
    }
    label {
        font-weight: bold;
        font-size: larger;
    }
    .erreur {
        text-align: center;
        color: red;
        font-size: x-large;
    }
}

@media screen and (max-width: 431px) {
    form {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 80%;
        margin: auto;
        text-align: center;
    }
    .champ:hover {
        background-color: rgb(175, 102, 244) !important;
    }
    .valide:hover {
        background-color: red;
        color: yellow;
    }
    input {
        text-align: center;
        font-size: larger;
        border-radius: 10px;
    }
    label {
        font-weight: bold;
        font-size: larger;
    }
    .erreur {
        text-align: center;
        color: red;
        font-size: x-large;
    }
}