body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4; /* Couleur de fond légère */
}

.container {
    text-align: center;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombre douce pour le conteneur */
    background-color: white; /* Fond blanc pour le conteneur */
    border-radius: 10px; /* Bordures arrondies */
    max-width: 90%; /* Maximum width with some padding from edges */
}

canvas {
    margin-top: 20px;
    border: 1px solid #ccc; /* Bordure plus subtile */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombre pour le canvas */
}

button, input[type="range"] {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #007BFF; /* Couleur bleue pour l'interactivité */
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover, input[type="range"]:hover {
    background-color: #0056b3; /* Couleur plus foncée au survol */
}

input[type="range"] {
    -webkit-appearance: none; /* Enlève l'apparence par défaut pour Safari */
    width: 95%; /* Utilise toute la largeur disponible */
    background-color: #ddd; /* Fond pour la barre de curseur */
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%; 
    background: #007BFF;
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #007BFF;
    cursor: pointer;
}

#upload {
    margin-top: 10px;
}

#decor-thumbnails img {
    cursor: pointer;
    transition: transform 0.3s ease;
}

#decor-thumbnails img:hover {
    transform: scale(1.1);
}


/* Style général du conteneur de compteur */
.counter-container {
    margin-top: 20px;
    padding: 10px;
    background-color: #f8f9fa; /* fond clair */
    border-radius: 8px; /* bordures arrondies */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* légère ombre pour le relief */
    
    font-family: 'Arial', sans-serif; /* police de caractères */
}

/* Style du texte du compteur */
.counter-text {
    font-size: 16px; /* taille de la police */
    color: #333; /* couleur du texte */
}

/* Style du nombre de téléchargements pour le mettre en évidence */
.download-count {
    font-weight: bold; /* texte en gras */
    color: #0056b3; /* couleur bleue pour ressortir */
    margin-left: 5px; /* espacement pour séparer le texte du nombre */
    font-size: 18px; /* taille de la police un peu plus grande */
}
.text-container {
    text-align: center;
    margin-top: 20px;
}

#copyText {
    width: 90%; /* Ajuster selon la largeur désirée */
    height: 150px; /* Hauteur pour contenir environ 10 lignes */
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #007BFF;
    color: white;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}
#copyButton.copied {
    background-color: #4CAF50; /* Vert */
    color: white;
}

#copyButton {
    transition: background-color 0.3s, color 0.3s;
}


/* Styles de base pour desktop */

/* Ajouter des styles spécifiques pour les écrans plus petits */
@media (max-width: 900px) {
    .container {
        padding: 10px;
        max-width: 100%;
        box-shadow: none; /* Optionnel: retirer l'ombre pour un look plus épuré sur mobile */
    }

    canvas {
        width: 100%; /* Assurez-vous que le canvas ne dépasse pas les limites de l'écran */
        max-width: 360px; /* Optionnel: limiter la taille maximale du canvas */
        height: auto; /* Ajuster la hauteur automatiquement */
        margin-top: 10px;
    }

    button, input[type="range"] {
        width: 100%; /* Utiliser toute la largeur disponible pour faciliter l'interaction */
        padding: 8px 10px; /* Légère réduction du padding */
    }

    .counter-container {
        font-size: 14px; /* Réduire la taille de la police pour le texte du compteur */
    }

    #decor-thumbnails img {
        width: 40px; /* Réduire la taille des vignettes */
        height: 40px;
    }

    /* Réduire la taille de la police pour les petits écrans */
    .counter-text, .download-count {
        font-size: 14px;
    }
}

/* Vous pouvez ajouter des queries pour d'autres tailles d'écran si nécessaire */