.container {
    display: grid;
    grid-template-columns: 80% 20%;
    grid-template-rows: 100%;
    gap: 0px 0px;
    grid-template-areas:
        "titre connexion";
    background-color: #4f0007;
}

html {
    overflow-y: scroll;
}

.titre {
    grid-area: titre;
    display: flex;
    justify-content: center;
    align-items: center;
}

.connexion {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 25% 25% 25% 25%;
    gap: 0px 0px;
    grid-template-areas:
        "loginLabel passwordLabel"
        "login password"
        "connecter connecter"
        "collection collection";
    grid-area: connexion;
}

.listeJeux {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
}

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

table {
    background-color: #eeeeee;
    width: 100%;
    margin: 5%;
    padding: 5%;
    height: 350px;
}

td {
    text-align: center;
}

img {
    width: 150px;
}

.loginLabel {
    grid-area: loginLabel;
}

.passwordLabel {
    grid-area: passwordLabel;
}

.login {
    grid-area: login;
}

.password {
    grid-area: password;
}

.connecter {
    grid-area: connecter;
}

.collection {
    grid-area: collection;
    visibility: hidden;
}

.boutonsAjouter {
    visibility: hidden;
    background-color: lightgreen;
}

#txtLogin,
#txtPassword {
    width: 85%;
    border-radius: 42px;
}

#connecter,
#collection {
    width: 97%;
}

.loginLabel,
.passwordLabel,
.login,
.password,
.connecter,
.collection {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5%;
}

.loginLabel,
.passwordLabel {
    color: black;
    background-color: #eeeeee;
    width: 90%;
    height: 50%;
    margin-top: 25px;
    margin-left: 5%;
    margin-bottom: 50px;
    font-size: 10pt;
}

h1 {
    color: black;
    background-color: #eeeeee;
    width: 90%;
    height: 50%;
    text-align: center;
    vertical-align: middle;
    padding-top: 0.5%;
    padding-right: 5%;
    font-size: 40pt;
}

.loginLabel,
.passwordLabel,
button {
    border-radius: 42px;
    font-weight: bold;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: #dddddd;
}

#compte{
    width: 100%;
    text-align: center;
    vertical-align: middle;
    padding-top: 5px;
    background-color: #eeeeee;
    font-size: 20px;
}

@media screen and (max-width: 1070px) {
    .listeJeux {
        grid-template-columns: 50% 50%;
    }

    .container {
        display: flex;
        flex-flow: column;
    }

    .titre {
        width: 100%;
    }

    h1{
        font-size: 30pt;
    }

    .loginLabel,
    .passwordLabel {
        margin-top: 0%;
        margin-bottom: 0%;
    }

    .connexion{
        grid-template-rows: 25% 25% 25% 25%;
    }
}