/* Impostazioni generali del corpo della pagina */
body {
    background: #0d0d0d; /* Colore di sfondo scuro */
    color: #00ffcc; /* Colore del testo verde acqua */
    font-family: 'Cascadia Mono', monospace; /* Font monospace */
    display: flex; /* Utilizzo del flexbox per il layout */
    justify-content: center; /* Centra il contenuto orizzontalmente */
    align-items: flex-start; /* Allinea il contenuto in alto */
    min-height: 100vh; /* Altezza minima della pagina pari alla finestra del browser */
    margin: 0; /* Rimuove i margini predefiniti */
    overflow: auto; /* Permette lo scorrimento */
}

/* Stile del contenitore principale */
.container {
    text-align: center; /* Testo centrato */
    max-width: 800px; /* Larghezza massima del contenitore */
    padding: 20px; /* Spaziatura interna */
    border: 2px solid #00ffcc; /* Bordo verde acqua */
    border-radius: 10px; /* Angoli arrotondati */
    box-shadow: 0 0 10px #00ffcc; /* Ombra verde acqua */
    background: #1a1a1a; /* Sfondo scuro per il contenitore */
    position: relative; /* Posizionamento relativo */
    z-index: 1; /* Livello di profondità */
    animation: neon 1.5s infinite alternate; /* Effetto neon */
    margin-bottom: 20px; /* Spaziatura inferiore per evitare che il contenuto venga tagliato */
}

/* Stile dell'immagine del profilo */
.profile-photo {
    width: 200px; /* Larghezza dell'immagine */
    height: 200px; /* Altezza dell'immagine */
    margin-bottom: 20px; /* Spaziatura inferiore */
    position: relative; /* Posizionamento relativo per l'animazione */
    border-bottom-color: #00ffcc; /* Colore del bordo inferiore */
    border-left-color: #00ffcc; /* Colore del bordo sinistro */
    border-right-color: #00ffcc; /* Colore del bordo destro */
    border-top-color: #00ffcc; /* Colore del bordo superiore */
    overflow: hidden; /* Nasconde gli elementi fuori dai bordi */
    border: 2px solid #00ffcc; /* Bordo verde acqua */
    box-shadow: 0 0 10px #00ffcc; /* Ombra verde acqua */
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease, background-color 0.3s ease; /* Transizione per hover */
    animation: glitch-img 1s infinite; /* Animazione di glitch */
}

    /* Effetto hover per l'immagine del profilo */
    .profile-photo:hover {
        transform: scale(1.1); /* Ingrandisce l'immagine */
        box-shadow: 0 0 10px rgba(0, 255, 204, 0.7), inset 0 0 5px rgba(0, 255, 204, 0.5); /* Aggiunge un'ombra esterna e interna */
        background-color: rgba(0, 255, 204, 0.1); /* Cambia il colore di sfondo */
    }

/* Stile del titolo con effetto cyberpunk */
.cyberpunk-title {
    font-size: 2.5em; /* Dimensione del font */
    color: #00ffcc; /* Colore del testo neon verde acqua */
    text-shadow: 0 0 5px #00ffcc, 0 0 10px #00ffcc, 0 0 20px #00ffcc, 0 0 40px #00ffcc; /* Ombra neon */
    animation: neon 1.4s infinite; /* Animazione di glitch */
    position: relative; /* Posizionamento relativo per l'effetto glitch */
}

    /* Effetto hover per il titolo */
    .cyberpunk-title:hover {
        animation: glitch-hover 0.7s infinite; /* Animazione di glitch al passaggio del mouse */
    }

/* Animazione di glitch per l'hover */
@keyframes glitch-hover {
    0% {
        text-shadow: 2px 2px #00ffcc, -2px -2px #00ffcc; /* Ombra del testo */
        clip: rect(24px, 9999px, 44px, 0);
    }

    20% {
        text-shadow: -2px -2px #00ffcc, 2px 2px #00ffcc; /* Ombra del testo invertita */
        clip: rect(85px, 9999px, 140px, 0);
    }

    100% {
        text-shadow: -2px -2px #00ffcc, 2px 2px #00ffcc; /* Ombra del testo invertita */
        clip: rect(0px, 9999px, 70px, 0);
    }
}

/* Aggiornamento dell'animazione di glitch per il titolo */
@keyframes glitch {
    0% {
        text-shadow: 2px 2px #00ffcc, -2px -2px #ff00ff; /* Ombra del testo */
        clip: rect(24px, 9999px, 44px, 0);
        background: #00ffcc; /* Colore di sfondo */
    }

    20% {
        text-shadow: -2px -2px #00ffcc, 2px 2px #ff00ff; /* Ombra del testo invertita */
        clip: rect(85px, 9999px, 140px, 0);
    }

    100% {
        text-shadow: -2px -2px #00ffcc, 2px 2px #ff00ff; /* Ombra del testo invertita */
        clip: rect(0px, 9999px, 70px, 0);
    }
}

/* Stile dei pulsanti */
.button {
    display: inline-block; /* Visualizzazione inline-block */
    padding: 10px 20px; /* Spaziatura interna */
    margin-top: 20px; /* Spaziatura superiore */
    text-align: center; /* Testo centrato */
    background: #00ffcc; /* Sfondo verde acqua */
    color: #000; /* Colore del testo nero */
    text-decoration: none; /* Rimozione della sottolineatura */
    border-radius: 5px; /* Angoli arrotondati */
    font-size: 18px; /* Dimensione del font */
    transition: background 0.3s ease, filter 0.3s ease; /* Transizione per hover */
    box-shadow: 0 0 5px #00ffcc; /* Ombra verde acqua */
}

    /* Stile dei pulsanti al passaggio del mouse */
    .button:hover {
        background: #00e6b8; /* Cambia il colore di sfondo */
        filter: brightness(0.7); /* Aumenta la luminosità */
        box-shadow: 0 0 10px #00e6b8; /* Ombra verde acqua */
    }

    /* Stile dei pulsanti con attributo download */
    .button[download] {
        margin-bottom: 20px; /* Spaziatura inferiore */
    }

/* Stile del contenitore del chatbot */
#chatbot-container {
    margin-top: 20px; /* Spaziatura superiore */
    background: #1a1a1a; /* Sfondo scuro */
    padding: 10px; /* Spaziatura interna */
    border-radius: 5px; /* Angoli arrotondati */
    box-shadow: 0 4px 8px rgba(0, 255, 255, 0.5); /* Ombra verde acqua */
    color: #00ffcc; /* Colore del testo */
    animation: neon 0.5s infinite alternate; /* Effetto neon */
}

/* Stile dei messaggi del chatbot */
#chatbot-messages {
    max-height: 300px; /* Altezza massima */
    overflow-y: auto; /* Scroll verticale */
    margin-bottom: 10px; /* Spaziatura inferiore */
}

/* Stile dell'input del chatbot */
#chatbot-input {
    width: calc(100% - 110px); /* Larghezza calcolata */
    padding: 10px; /* Spaziatura interna */
    margin-right: 10px; /* Spaziatura destra */
    border: 1px solid #00ffcc; /* Bordo verde acqua */
    background: #0d0d0d; /* Sfondo scuro */
    color: #00ffcc; /* Colore del testo */
}

/* Classe per nascondere elementi */
.hidden {
    display: none; /* Nasconde l'elemento */
}

/* Animazione di glitch per il testo */
@keyframes glitch {
    0% {
        text-shadow: 2px 2px #ff00ff, -2px -2px #00ffff; /* Ombra del testo */
        clip: rect(24px, 9999px, 44px, 0);
    }

    20% {
        text-shadow: -2px -2px #ff00ff, 2px 2px #00ffff; /* Ombra del testo invertita */
        clip: rect(85px, 9999px, 140px, 0);
    }

    100% {
        text-shadow: -2px -2px #ff00ff, 2px 2px #00ffff; /* Ombra del testo invertita */
        clip: rect(0px, 9999px, 70px, 0);
    }
}

/* Stile dell'iframe */
iframe {
    position: fixed; /* Posizionamento fisso */
    bottom: 10px; /* Posizione dal basso */
    right: 10px; /* Posizione da destra */
    z-index: 1000; /* Livello di profondità */
}

/* Stile del testo del terminale */
.terminal-text {
    font-family: 'Cascadia Mono', monospace; /* Font monospace */
    font-size: 1em; /* Dimensione del font */
    color: #00ffcc; /* Colore del testo verde acqua */
    color: rgba(0, 255, 204, 0.7); /* Colore del testo verde acqua */
    color: inherit; /* Colore del testo ereditato */
    background: inherit; /* Sfondo scuro */
    padding: 10px; /* Spaziatura interna */
    border-radius: 5px; /* Angoli arrotondati */
    position: relative; /* Posizionamento relativo */
    display: inline-block; /* Necessario per il posizionamento */
    animation: neon 1.0s infinite alternate; /* Effetto neon */
}

/* Effetto neon per i bordi */
@keyframes neon {
    0%, 100% {
        box-shadow: 0 0 2px #00ffcc, 0 0 5px #00ffcc, 0 0 5px #00ffcc, 0 0 10px #00ffcc;
    }

    50% {
        box-shadow: 0 0 5px #00e6b8, 0 0 7px #00e6b8, 0 0 15px #00e6b8, 0 0 30px #00e6b8;
    }
}

/* Sfondo Matrix */
.matrix-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Posiziona lo sfondo dietro il contenuto */
    background: black;
    overflow: hidden;
    animation: matrix-animation 5s linear infinite;
}

/* Stile dei messaggi del chatbot */
#chatbot-messages {
    max-height: 300px; /* Altezza massima */
    overflow-y: auto; /* Scroll verticale */
    margin-bottom: 10px; /* Spaziatura inferiore */
    background: #0d0d0d; /* Sfondo scuro */
    padding: 10px; /* Spaziatura interna */
    border-radius: 5px; /* Angoli arrotondati */
    box-shadow: 0 0 5px #00ffcc; /* Ombra verde acqua */
}

.user {
    color: #00ffcc; /* Colore del testo per l'utente */
    margin-bottom: 10px; /* Spaziatura inferiore */
}

.chatbot {
    color: #ff00ff; /* Colore del testo per il chatbot */
    margin-bottom: 10px; /* Spaziatura inferiore */
}