/*
====================================
CSS Landing Page Monologo Logo
Ottimizzato per tutti i Display
====================================
*/

/* 1. Reset di base per una migliore consistenza tra i browser */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Stile per il corpo (Centraggio e Sfondo Gradient) */
body {
    /* Imposta un'altezza minima pari all'altezza della finestra (viewport) */
    min-height: 100vh; 
    
    /* Usa Flexbox per centrare il contenuto perfettamente */
    display: flex;
    /* Allinea orizzontalmente al centro */
    justify-content: center; 
    /* Allinea verticalmente al centro */
    align-items: center; 
    
    /* SFONDO CON SFUMATURA (GRADIENT) - Veloce e Nativo */
    /* Crea una sfumatura lineare dagli angoli. Colori estratti dall'immagine: */
    background: linear-gradient(
        to bottom right,         /* Direzione: Alto-Sinistra verso Basso-Destra */
        #0033FF 0%,              /* Blu Brillante/Elettrico (Inizio) */
        #000033 100%             /* Blu Scuro/Navy (Fine) */
    );
    
    /* Assicura la copertura totale dello sfondo */
    background-size: cover;
    /* Rimuove lo scorrimento dello sfondo */
    background-attachment: fixed;
}

/* 3. Stile per l'immagine del logo (Responsività) */
.logo {
    /* max-width: 100% assicura che il logo non trabordi dal contenitore */
    max-width: 100%; 
    height: auto; /* Mantiene le proporzioni */
    
    /* Funzione CLAMP() per la Responsività Fluida:
       - Minimo: 150px
       - Ideale: 40% della larghezza del viewport (40vw)
       - Massimo: 300px
    */
    width: clamp(150px, 40vw, 300px); 
    
    /* Garantisce che l'immagine sia trattata come un blocco */
    display: block; 
    margin: 0 auto;
    
    /* Piccola transizione per un effetto gradevole al ridimensionamento */
    transition: width 0.3s ease-in-out;
}