#area {
    display: block;
    margin: auto;
    border: 2px solid #333;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

#stats {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center; 
}


#stats p {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    margin: 10px 0;
    line-height: 1.5;
    color: #333;
}

.game {
    display: flex;
    flex-direction: column;
    height: 98vh;
    width: 98vw;
    justify-content: space-between;
}

.conteneur {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

button {
    margin-right: 10px; 
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #3498db;
    color: #fff;
    box-shadow: 0 2px 4px rgba(80, 13, 13, 0.1); 
    transition: background-color 0.3s ease-in-out; 
}

a {
    padding: 18px 14px;
    border: none;
    border-radius: 10px;
    background-color: #3498db;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    transition: background-color 0.3s ease-in-out; 
}


button:hover, a:hover {
    background-color: #2085c9;
}

button svg, a svg {
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}


#hall-of-fame > div {

    display: flex;
    flex-direction: column;
    text-align: center;
  
}


table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f0f0f0;
}


.setting {
    display: flex;
    align-items: center;
    justify-content:space-between;
    margin-top: 1rem;
}

.setting * {
    display: block;
}

button {
    padding: 10px 20px;
    font-size: 1.2em;
}

#setting-canvas-largeur, #setting-canvas-hauteur, #label-setting-vitesse {
    margin: 0 10px;
    font-size: 1.5em;
}


#modale-setting > div, #consignes > div {
    display: flex;
    flex-direction: column;
}

#consignes {
    font-size: 1.4rem;
}

#btn-reset-setting, #btn-quit-setting {
    width: 100%;
}
.head-modal{
    display: block;
    width: 100%;
    text-align: center;
    margin: 0 10px;
    font-size: 1.8em;
}

dialog {
    border-radius: 1rem;
}