body {
    margin: 8px;
    padding: 0;
    background-color: hsl(180, 1%, 14%);
    display: flex;
    flex-direction: column; /* empile verticalement */
    align-items: center; /* centrer */
}

canvas {
    /* border: 2px solid lightseagreen; */
    border: 2px solid #f0f6f0;
    margin-bottom: 6px; /* espace entre canvas et console */
}
 
* {
    font-family: KiwiSoda;
}

#text-input-overlay, #color-picker-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #222;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0 10px black;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9999;
    color: white;
    font-family: Arial, sans-serif;
}

#text-input-overlay input, #color-picker-overlay input {
    padding: 8px 10px;
    font-size: 16px;
    border-radius: 8px;
    border: 2px solid #555;
    background: #333;
    color: white;
    outline: none;
    width: 150px;
}

#text-input-overlay input:focus, #color-picker-overlay input:focus {
    border-color: #ff9800;
}

#text-input-overlay button, #color-picker-overlay button {
    margin: 5px;
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    background-color: #ff9800;
    color: #222;
    font-weight: bold;
    cursor: pointer;
}

#text-input-overlay button:hover, #color-picker-overlay button:hover {
    background-color: #ffa733;
}

@font-face {
    font-family: 'KiwiSoda';
    src: url(../assets/KiwiSoda.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}