/* Stili di base per desktop e schermi più grandi */
.image {
    width: auto; /* Imposta la larghezza dell'immagine */
    height: auto; /* Mantiene le proporzioni dell'immagine */
    margin-bottom: 150px;
    margin-top: 150px;
    align-items: center;
    transition: transform 0.3s; /* Aggiunge una transizione per l'effetto di ingrandimento */
    border: 5px solid #000; /* Aggiunge un bordo nero attorno all'immagine */
}

/* Stili del corpo della pagina */
body {
    margin: 0;
    padding: 0;
    background-image: url('images/zombie/ComfyUI_02427_.png'); /* Immagine di sfondo */
    background-size: cover; /* Adatta l'immagine di sfondo per coprire l'intero schermo */
    background-position: center; /* Centra l'immagine di sfondo */
    background-repeat: no-repeat; /* Impedisce la ripetizione dell'immagine */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: "Cutive Mono", monospace;
}
/* Contenitore per l'immagine */
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* La larghezza del contenitore è l'intero schermo */
    max-width: 100%; /* Imposta un massimo del 100% della larghezza dello schermo */
    padding: 0; /* Nessun padding per evitare spazi non necessari */
    margin: 20px auto; /* Margine per creare spazio sopra e sotto */
    box-sizing: border-box; /* Include il padding e il bordo nel calcolo della larghezza */
}

/* Immagine */
.image-container img {
    width: 100%; /* L'immagine si ridimensiona per adattarsi alla larghezza del contenitore */
    height: auto; /* Mantiene le proporzioni corrette */
    object-fit: contain; /* Impedisce il taglio dell'immagine */
    max-width: 500px; /* Limita la larghezza massima dell'immagine */
}

/* Media query per schermi più piccoli (cellulare) */
@media (max-width: 768px) {
    .image-container {
        padding: 10px; /* Aggiungi un po' di spazio attorno all'immagine su dispositivi mobili */
    }

    .image-container img {
        max-width: 90%; /* Riduci la larghezza dell'immagine per evitare che tocchi i bordi */
    }
}