body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #000;
    color: #fff;
}


header {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.header-content {
    display: flex;
    align-items: center; /* Allinea verticalmente il logo e il nome */
}


.logo {
    width: 75px; /* Puoi cambiare questa dimensione in base alle tue esigenze */
    height: 75px;
}

.site-name {
    margin: 10px 0;
    font-size: 3em; /* Dimensione maggiore per il titolo del sito */
    color: #fff;
    padding: 0px 20px;
}

.typewriter {
    height: 1.5em; /* Altezza fissa per la casella dell'effetto macchina da scrivere */
    display: flex;
    align-items: center; /* Centra verticalmente il testo */
    overflow: hidden;
    border-right: 0.15em solid #fff;
    font-size: 2em; /* Dimensione del testo all'interno della casella */
    background: #000; /* Sfondo della casella per mantenere il contrasto */
}

.typewriter h2 {
    margin: 0;
    white-space: nowrap; /* Mantiene il testo su una sola riga */
    color: #fff;
}

.social-links ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    gap: 20px; /* Spazio tra i link */
    margin: 0;
    padding: 25px
}

.social-links li {
    margin: 0;
}

.social-links a {
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 2.5em; /* Ingrandisce le icone */
}

.social-links i {
    margin-right: 0; /* Rimuove il margine destro delle icone */
}

.social-links a:hover {
    text-decoration: none; /* Mantiene la decorazione del testo invariata al passaggio del mouse */
}