body {html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

.container {
    width: 100%;
    text-align: center;
}

.area-immagine {
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.area-immagine img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: pointer;
}

.contenitoreT {
    width: 300px;
    margin: 20px auto;      /* centra il DIV */
    border: 2px solid black;
    padding: 10px;
    text-align: center;     /* centra il testo */
}

.testoA {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.mia-tabella {
    width: 70%;
    margin: 0 auto;
    border: 1px solid #000;
    border-collapse: collapse;
}

.mia-tabella th,
.mia-tabella td {
    border: 1px solid #000;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

.testoB {
    font-size: 14px;
    text-align: center;
}

/* Schermata immagine ingrandita */
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 1000;
}

.contenitore-grande {
    width: 100vw;
    height: 100vh;
    overflow: auto;
    cursor: grab;
}

.contenitore-grande img {
    display: block;
    max-width: none;
    max-height: none;
}
.player {
    text-align: center;
    margin-top: 20px;
}

.titolo {
    font-size: 20px;
    margin-bottom: 10px;
}
/* CONTENITORE DEI TESTI */ 
.testi { width: 100%; display: flex; }

/* TESTO 1 E TESTO 2 */
 .testo1, .testo2, .testo3 { border: 1px solid black;
 padding: 20px;
 * box-sizing: border-box;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center; }
 /* MODALITÀ DUE TESTI */ /* ========================= */ 
 .due-testi .testo1, 
 .due-testi .testo2 { width: 50%; }
 
 /* ========================= */ /* MODALITÀ UN SOLO TESTO */
 /* ========================= */
 .uno-testo .testo3 { 
 width: 100%;
 }
 .uno-testo .testo1,
 .uno-testo .testo2 {
	 display: none;
	 } 
     
     
.mioVideo {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
}
body:has(#MUSICAX:target) #RESTO {
    display: none;
}