/* --------------------------------- */
/* RESET E SFONDO GIF */
/* --------------------------------- */

html, body {
    margin: 0;
    padding: 0;
    height: 100%; 
    width: 100%;
    overflow: hidden; 
}

.main-background-gif {
    background-image: url('glitter.gif'); /* IMPOSTA QUI LA TUA GIF */
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    
    /* Centra il riquadro */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --------------------------------- */
/* RIQUADRO CENTRALE (#D9D0D0) */
/* --------------------------------- */

.elegant-box {
    /* Il colore richiesto (#D9D0D0) */
    background-color: #D9D0D0; 
    
    /* Auto-adattamento al contenuto (scritte e fiore) */
    display: inline-block; 
    padding: 30px 50px; /* Spazio interno attorno al contenuto */
  
    
    /* Effetto Ombra/Brillantezza */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), /* Ombra esterna */
                
    
    text-align: center;
}

/* --------------------------------- */
/* STILE TESTO BIANCO ELEGANTE */
/* --------------------------------- */

.intro-content {
    /* Contenitore interno */
}

/* Titolo */
.elegant-text {
    font-family: 'Herr Von Muellerhoff', cursive; 
    font-size: 6em; 
    color: #ffffff; /* Testo Bianco */
    margin-bottom: 5px;
    
    /* Effetto luccicante bianco/brillantezza */
    text-shadow: 
        0 0 10px #ffffff,
        0 0 20px #f7f7f7,
        0 0 30px #ffe6f7; /* Leggero alone rosa pastello per un tocco finale */
}

/* Paragrafo (Sottotitolo) */
.elegant-text-small {
    font-family: 'Herr Von Muellerhoff', cursive; /* Usa la stessa calligrafia per eleganza */
    font-size: 3em; /* Dimensioni più piccole del titolo */
    color: #ffffff; /* Sottotitolo Bianco */
    margin-top: 5px;
    margin-bottom: 40px;
    
    /* Applica lo stesso effetto di luccichio del titolo */
    text-shadow: 
        0 0 8px #ffffff,
        0 0 15px #f7f7f7; 
}

/* --------------------------------- */
/* STILE PULSANTE FIORE */
/* --------------------------------- */

.enter-button-flower {
    display: block; 
    text-decoration: none; 
    margin-top: 20px; 
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.flower-icon {
    width: 100px; /* Imposta la dimensione del fiore (regola questo valore se è troppo grande/piccolo) */
    height: auto;
    border: none;
    vertical-align: middle; 
    
    /* Effetto luccicante sul fiore */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) 
            drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
    
    transition: filter 0.3s, transform 0.3s;
}

.enter-button-flower:hover .flower-icon {
    transform: scale(1.1); /* Si ingrandisce un po' al passaggio del mouse */
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1)) 
            drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}