html, body {
 margin: 0;
  padding: 0;
 }
 
 body {
   height: 100%;
 	 width: 100%;
  	background-color:#FFCC99;
   	font-family: 'Cause', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
        font-size: 15px;
		color: #863526;
		  /* Bild als Hintergrund festlegen */
	  background-image: url('img/sfondo9.jpg');
	
	  /* Bild zentrieren */
	  background-position: center center;
	
	  /* Bild nicht wiederholen (kacheln) */
	  background-repeat: no-repeat;
	
	  /* WICHTIG: Bild anpassen */
	  background-size: cover;
	
	  /* Bild fixieren (optional, für Scrolling-Effekt) */
	  background-attachment: fixed;
	
	  /* Mindesthöhe für den gesamten Viewport */
	  min-height: 100vh;
    }
	
	button {
  	font-family: 'Cause', sans-serif;
    font-optical-sizing: auto;
	color: #863526;
    font-style: normal;
        font-size: 15px;
 	 font-weight: bold;
}
.header {
		z-index: 1;
		margin: auto;
		/*min-width: 500px;*/
		height: 100px;
		background-color: rgba(255, 244, 233, 0.8);
		box-shadow: 10px 5px 5px rgba(0.5, 0.5, 0.5, 0.2);
		border-radius:15px; 
		border: 2px solid #f0ba02; 
		border-collapse: collapse; 
		 }

.corpo {
		z-index: 2;
		margin: auto;
			/*min-width: 500px;*/
		background-color: rgba(255, 244, 233, 0.4);
		box-shadow: 10px 5px 5px rgba(0.5, 0.5, 0.5, 0.2);
			border-radius:15px; 
			border: 2px solid #f0ba02; 
		border-collapse: collapse; 
		 }
.bottom {
		z-index: 2;
		margin: auto;
			/*min-width: 500px;*/
		background-color: rgba(255, 244, 233, 0.1);
		box-shadow: 10px 5px 5px rgba(0.5, 0.5, 0.5, 0.2);
			border-radius:15px; 
			border: 2px solid #f0ba02; 
		border-collapse: collapse; 
		 }

.inter {
height: 5px;
 }

a {
    color: #863526;
    text-decoration: none;
	font-family: 'Cause', sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.cause-bold {
 font-family: 'Cause', sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

/*shadow su immagini nella tabella*/
.tab-image{
	filter: drop-shadow(7px 10px 7px rgba(0,0,0,0.4));	
}
.tab-image2{
	filter: drop-shadow(7px 10px 7px rgba(0,0,0,0.4));	
}

  .cella-sfondo {
    /* Percorso dell'immagine */
    background-image: url('img/box2bk.png');
    /* Impedisce la ripetizione */
    background-repeat: no-repeat;
    /* Centra l'immagine */
    background-position: center;
    /* Adatta l'immagine coprendo la cella */
    background-size: 100%;

  }
/* Stile di base tabella per schermi grandi (2 colonne) */
table.responsive-table {
    width: 95%;
    border-collapse: collapse;
}

table.responsive-table td, 
table.responsive-table th {
    border: 0;
    padding: 10px;
}

	.header, .corpo, .bottom {
		width: 75%;
  }
  
  img {
    max-width: 100%;
    max-height: 100%;
}
  
 
/*image loop*/
.loop {
  width: 400px;
  height: 210px;
  filter: drop-shadow(5px 10px 5px rgba(0,0,0,0.3));	
  position: relative;
  animation-name: myAnimation;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.loop2 {
  width: 308px;
  height: 274px;
  filter: drop-shadow(5px 10px 5px rgba(0,0,0,0.3));	
  position: relative;
  animation-name: myAnimationchi;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

@keyframes myAnimation {
	0% {content:url('img/hp_1.png');}
  33% {content:url('img/hp_2.png');}
  66%  {content:url('img/hp_3.png');}
  100%   {content:url('img/hp_1.png');}
  /*100%   {background-image:url('img/hp_1.png');}*/
}
  
 @keyframes myAnimationchi {
	0% {content:url('img/chi1.png');}
  25% {content:url('img/chi2.png');}
  50%  {content:url('img/chi3.png');}
  75%   {content:url('img/chi4.png');}
  100% {content:url('img/chi1.png');}
  /*100%   {background-image:url('img/hp_1.png');}*/
}

/* Media Query per schermi piccoli (es. tablet/smartphone < 600px) */
@media screen and (max-width: 700px) {
    table.responsive-table, 
    table.responsive-table tbody, 
    table.responsive-table tr, 
    table.responsive-table td {
        display: block; /* Trasforma tutto in blocco */
        width: 99%;    /* Ogni elemento occupa tutta la larghezza */
    }
    
    /* Nasconde l'intestazione se necessario */
    table.responsive-table thead {
        display: none;
    }
    
    table.responsive-table tr {
    }
}




 /* Styles for Tablets (e.g., screens between 768px and 1024px wide) */
  	/* Mobile */
 	 @media only screen and (max-width: 767px) {
            .header, .corpo, .bottom {
				width: 95%;
                /*background-color: #fff4e9;*/
            }
			.loop {
		width: 60%;
		height: 60%;
        }
		
		 	.march {
			 width: 80%;
			 height: auto;
			}
	 }
	 /* Tablet */
    @media (min-width: 768px) and (max-width: 1024px) {
      
		.header, .corpo, .bottom {
		width: 95%;
        }
		
		.loop, .loop2 {
		width: 70%;
		height: 70%;
        }
        /* More tablet-specific styles */
    }
	

  @media(min-width: 1100px) and (max-width: 1300px) {
      
		.header, .corpo, .bottom {
		width: 85%;
        }
        /* More tablet-specific styles */
    }
	
 @media (min-width: 1501px) {
   
		.header, .corpo, .bottom {

		width: 75%;

		 }
    }