@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Dancing+Script:wght@400;700&display=swap');

/* Stile generale della pagina */
body {
    font-family: Arial, sans-serif;
    color: #263241;
}

/* Applica il font Lora alla navbar, al logo, al titolo principale e alla citazione */
.navbar-personale,
.navbar-personale .nav-link,
.brand-text,
#home h1,
.citazione {
    font-family: "Lora", serif;
}

/* Navbar personalizzata */
.navbar-personale {
    background-color: rgba(15, 13, 26, 0.90);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Logo del sito */
.brand {
    display: flex; /* display flex permette di disporre e allineare facilmente gli elementi interni */
    align-items: center;
    gap: 12px;
}

/* Riquadro con la lettera E */
.brand-badge {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex; /* Permette di centrare la lettera dentro il riquadro */
    justify-content: center; /* Centra la lettera in orizzontale */
    align-items: center; /* Centra la lettera in verticale */
    background: linear-gradient(135deg, #ff7a59, #7c5cff);
    color: white;
}

/* Testo accanto al logo */
.brand-text {
    font-size: 1.5rem;
    letter-spacing: 0.5px;
    color: white;
}

/* Link della navbar */
.navbar-personale .nav-link {
    color: white;
    font-size: 1.1rem;
    margin-left: 15px;
    transition: color 0.2s;
}

/* Sezione principale */
#home {
    padding: 40px 0; /* Spazio sopra e sotto il contenuto principale */
}

/* Titolo principale */
#home h1 {
    color: #1e3a5f;
    margin-bottom: 30px;
}

/* GIF principale */
.gif {
    display: block; /*rende l'immagine un elemento a blocco, così occupa correttamente la sua riga nel carosello*/
    margin: 30px auto;
    max-width: 500px; /* Impedisce alla GIF di diventare troppo grande */
    width: 90%; /* La rende adattabile sugli schermi piccoli */
    border-radius: 20px;
}

/* Citazione */
.citazione {
     margin-top: 35px;
    color: #1e3a5f;
}

.citazione p {
    font-family: "Dancing Script", cursive; /* Font decorativo per effetto manoscritto */
    font-size: 2.2rem;
    margin-bottom: 10px;
}

/* Nome dell'autore della citazione */
.citazione footer {
    font-family: "Lora", serif;
    font-size: 1.2rem;
}