/* Stile di base per il corpo della pagina */
body {
    background-color: #000; /* Sfondo nero */
    color: white; /* Testo bianco */
    font-family: Arial, sans-serif; /* Font di base */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('https://i.pinimg.com/736x/63/32/ef/6332ef5ae80d90d626fb9bec11f762a9.jpg'); /* Immagine di sfondo */
    background-size: cover; /* Adatta l'immagine a tutta la pagina */
    background-position: center; /* Centra l'immagine */
}

/* Container con bordo rosso */
.container {
    border: 2px solid red; /* Bordo rosso */
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo scuro con trasparenza per migliorare la leggibilità */
    width: 300px; /* Larghezza del container */
    text-align: center;
    border-radius: 10px; /* Angoli arrotondati */
}

h1 {
    font-size: 4em;
    font-weight: bold;
    background: linear-gradient(to right, rgb(42, 148, 153), rgb(128, 0, 0)); /* Gradiente da rosso a viola */
    -webkit-background-clip: text; /* Applicato solo al testo */
    background-clip: text; /* Applicato solo al testo */
    color: transparent; /* Rende il testo trasparente per vedere il gradiente */
    margin-bottom: 0.5em;
}

/* Stile per ogni voce del menu */
.menu-item {
    margin: 15px 0;
}

/* Stile per i link del menu */
.menu-item a {
    text-decoration: none; /* Rimuove la sottolineatura */
    color: rgb(42, 148, 153); /* Colore rosa per i link */
    font-size: 1.2em; /* Dimensione del font */
    display: block;
    transition: color 0.3s ease; /* Aggiunge transizione al colore */
}

/* Hover: cambia colore da rosa a rosso chiaro */
.menu-item a:hover {
    color:  rgb(255, 0, 0); /* Colore rosso chiaro al passaggio del mouse */
}

/* Opzione: Link al primo livello */
.menu-item a:focus,
.menu-item a:active {
    color: rgb(42, 148, 153); /* Colore rosso chiaro se il link è attivo o selezionato */
}