body{
    
    
    flex-direction: column;

    background-color: rgb(190, 83, 77);
    font-size: 18px;

}

div.head{
    display: inline-block;
}

#head_{

    text-align:  center;
    margin-left: 5%;
    margin-right: 5%;
}

div.q_learning{

    margin-top : 5%;
}

canvas{
    box-shadow: black 20px 10px 50px;;
}

h1 {
    color: white;
}
.q_learning {

    color : rgb(236, 220, 220);
}

img {
    border-radius: 3px;
    border-color: black;
    border-width: 10 px;
    position: center;
    width: 40%;
 

}

.same_ {
    display: inline-block;

}

#best {
    margin-left : 100px;
}

#display{

    vertical-align: top;
    margin-top : 10%
    

}

button {

    border-color: rgb(150, 21, 118);
    color: white;
    background-color: blueviolet;
    margin-top: 30px;
    margin-left: 30%;
    width : 80%;    
}

#titile_table{

    margin-left: 100px;

}


.calcul {

    width: 50%;
}

#table_state{

    margin-bottom: 10%;
}

.game_board{

    margin-top : 5%;
    max-width: 80%;
    max-height: 50%;
}

.perso{

    width: 60%;
    margin-left: 30%;
    margin-top: 30%;

}

.state{

    margin-top: -80px;
    margin-left: 6%;
}

.perso:hover{

    scale: 120%;
    transition: 0.5s;
    
}


.table_t{

    margin-top: 3%;
}