html,body {
  height: 100%;
  margin: 0;
  padding: 0;
  
}
.paginabella {
  background-attachment: fixed;
  min-height: 120vh;
}

.navbar {
  display: flex;
  
}
.hamburger {
  display: none;
  font-size: 35px;
  cursor: pointer;
  color: white;
  z-index: 1001;
}
/*HEADER , NAVBAR*/
.header {
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  padding: 3px 100px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  box-sizing: border-box;
  transition: background-color 0.3s, top 0.3s;
  z-index: 1000; /* Per tenerla sopra tutti gli elementi */
  backdrop-filter: blur(3px);
}
/*LOGO*/
.logo {
  width: 100px;
  height: 100px;
 
}

/*lINK NAVBAR*/
.navbar a {
  text-decoration: none;
  font-size: 30px;
  color: red;

  text-shadow: 0 0 1px rgb(153, 153, 153);
  font-weight: 500;
  margin-left: 40px;
  font-family: pazzo;

  float: left;
  padding: 1px;
}

/*Font VIDEOGAME*/
@font-face {
  font-family: "pazzo";
  src: url(font/pazzo.otf);
  font-style: normal;
  font-weight: 100;
}
@font-face {
  font-family: "caccone";
  src: url(font/caccone.ttf);
  font-style: normal;
  font-weight: 100;
}

/*titolo TOZZO STUDIOS*/

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centra verticalmente */
  align-items: center;       /* centra orizzontalmente */
  height: 100vh;
  background: url('immagini/tuo-sfondo.jpg') no-repeat center/cover;
}


#media-section {
  background-color: #000;
  padding-top: 80px;        /* aumenta questo valore finché non trovi il “nero” che ti piace */
  padding-bottom: 40px;
}


.centro-sito {
  position: relative;              /* Contenitore per il titolo assoluto */
  width: 100%;
  height: 100%;
  
}

.titolo {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  
  font-family: pazzo;
  font-size: 285px;
  white-space: nowrap;
  
  background-color: #ffee00;
  text-shadow: 0 0 19px rgba(202, 202, 202, 0.72);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  
  animation: sfoc 1s infinite alternate;
  overflow: hidden;
  margin: 0;                        /* Rimuove margini che disturbano il centering */
  text-align: center;
}


.primo,
.secondo {
  width: 100%;
  display: block;

  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
/*HOVER LINK NAVBAR*/
.navbar a:hover {
  color: yellow;
  text-shadow: 0 0 19px rgb(182, 180, 180);
}

.container {
  background-image: url("immagini/siss.png"); /* Sostituisci con il tuo percorso */
  background-size: cover;
  background-position: center;
  padding: 50px;
  border-radius: 10px; /* Opzionale, per angoli arrotondati */
}




/*
#galleria li {
  width: 100%;
  max-width: 300px;
  margin: 10px;
}//*/


#galleria li {
  margin: 5px;
  border: 6px solid #ff0000;
  float: left;
  width: 30%;
  list-style: no;
  margin-left: 23px;
}

#galleria li:hover {
  border: 6px solid #c8ff00;
}

#galleria li img {
  width: 100%; /* Rende l'immagine responsiva */
  height: 300px; /* Imposta un'altezza fissa per tutte le immagini */
  object-fit: cover; /* Assicura che l'immagine riempia lo spazio senza deformarsi */
  border-radius: 10px; /* Opzionale, per angoli arrotondati */
}

#galleria li div {
  padding: 15px;
  text-align: center;
  margin-left: ;
}

#media-section {
  background-color: black;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Per effetto parallax */
  min-height: 100vh; /* Imposta un'altezza minima di tutta la finestra */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.titol {
  color: #ffd900;
  text-align: center;
  font-family: pazzo;
  font-size: 120px;
 
  text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.74);
  animation: lampeggio 0.7s infinite alternate;
  
height: 18vh;
  
  
}
.titol:hover {
  color: #ffd900;
  text-shadow: 2px 2px 40px rgba(255, 255, 255, 0.74);
  animation: none;
}
a {
  text-decoration: none;
}
.paginabella{

 display: flex;
 align-items: center;
gap: 50px ;

    height: 100%; /* Occupa tutta la schermata */
    
  

 background : linear-gradient(180deg,   #15161b,rgb(151, 96, 12), rgb(12, 3, 3)) repeat;
}
.titol2{
  margin: 0;
  padding: 0;
}

.etho{
 
margin: 0px;
padding: 0px  ;
height: 100%;

}
.paga {
  margin: 0;
  padding: 0;
  display: inline-block;
}

.paga a {
  display: inline-block;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.paga h1 {
  margin: 0;
  padding: 0;
  font-size: 150px;
  font-family: pazzo;
  color: white;
  position: relative;
  left: 150px;
  
}

.paga h1:hover {
  color: red;
}


.giffo{
position: relative;
top: 300px;
bottom: 20px;
}


footer{background-color: rgb(151, 22, 22);
  position: ;
  left: 0;
  bottom: 0;
  }

.footercontainer{
  width: 100%;
  padding: 70px 30px 20px;
}

.iconesocial{
display: flex;
justify-content: center;

}

.iconesocial a{
text-decoration: none;
padding: 10px;
background-color: rgb(148, 45, 45);
margin: 10px;
border-radius: 50%;
}
.iconesocial a i{

font-size: 2em;
  color: black;
  opacity: 0.9;
}

.iconesocial a:hover{
background-color:black;
transition: 0.9s; 
}
.iconesocial a:hover i{
color: white;
transition: 0.5s;

}


.footernav{
  margin: 30px;
}
.footernav ul{
text-decoration: none;
  display: flex;
  justify-content: center;
}

.footernav ul li a{
text-decoration:none;
  color: white;
  margin: 20px;
  font-size: 1.3em;
  opacity: 0.6;
  transition: 0.5s;
}
.footernav ul li a:hover{
opacity: 1;
}

.footerbottom{
padding: 20px;  
text-align: center; 
background-color: rgb(0, 0, 0);
}

.footerbottom p{
  color: rgb(217, 255, 4);
}

.designer{
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 400;
  margin: 0px 5px;
}



.wrapper{
  display: flex;
  flex-direction: column;
  min-height: 100;
}


.parte2{
  background-attachment:fixed ;
 background-image:url(immagini/sis.png);
height:80%;
width: 100%;
display: flex;
}




.parte3{

height: 100%;
width: 100%;
display: flex;
background: linear-gradient(black,black,rgb(255, 125, 19));

}
.parte3 p{

color: white;
font-family: caccone;

font-size: 2em;
padding: 20px;
margin-top: 200px;

}


.parte3 h1{

  color:rgb(255, 125, 19);
  font-family: pazzo;
  
  font-size: 10em;
  
  margin-top: 30px;
width: 2px;

}


  .WHO{color: white;
  font-family: caccone;
  text-align: center;
  margin: 0 auto;
  width: fit-content;
  font-size: 40px;

}

.WHO2{color: white;
  font-family: caccone;
  text-align: center;
  margin:  auto;
  width: fit-content;
  font-size: 40px;
  margin-top: 25px;
}





.att{ color: #ffee00;
  text-shadow: 0 0 19px rgba(22, 224, 39, 0.72);
font-family: caccone;
text-align: center;
margin: auto;
width: fit-content;
margin-top: 70px;
padding: 60px;
font-size: 40px;}

.eto{

width: 45%;
height: 100%;
flex-shrink: 0;
}

.etoz{
  width: 60%;
  height: 100%;
  flex-shrink: 0;
float: right;
}

.parteinf  {
background:linear-gradient(black,rgb(90, 7, 7),rgb(92, 53, 3));
width: 100%;
height: 100%;

}


.parteinf p{
  font-family: caccone;
font-size: 42px;
color: white;
text-shadow: 0 0 20px rgba(217, 255, 0, 0.72);
position: absolute;
top: 200px;

margin-right: 50%;
}


iframe {
  
  width:  100% !important;
  padding: 30px;
  
  margin-top: 70px;
}

.penultima{

width: 100%;
height: 100%;
background-color: #0c0c0c;
display: flex;
}



.sinistra{


  margin-right:%;
}


.destra{}






.penultima h1{
color: #b0df07;
font-family: caccone;
font-size: 20px;
margin-top: 10%;
margin-left: 5%;
margin-bottom: 20%;
text-shadow: 0 0 20px rgb(255, 2, 2);
}



.mobile-link {
  display: none;
}






@media (max-width: 1783px) {
.penultima h1{

font-size: 20000px;

}
  .navbar a {
    font-size: 30px;
    margin: 10px ;
  }

  .logo {
    width: 30px;
    height: 100px;
  }

  .header {
    padding: 1px 2px;
  }
  #galleria li {
    margin: 5px;
   justify-content: center;
 margin-left: 10px;
  
    list-style: none;
    
  }
  .primo{

width: 100%;
height: 100%;

  }
 

  @media (max-width: 1565px) {

.destra{display: none;}


  }

@media (min-width: 1115px) {

.penultima h1{

font-size: 15px;


}

}

@media (max-width: 1580px) {
  .WHO {
    font-size:  0px;
    
  }

  .navbar a {
    font-size: 30px;
    margin: 10px ;
  }

  .logo {
    width: 30px;
    height: 100px;
  }

  .header {
    padding: 1px 2px;
  }
  #galleria li {
   
 
    width: 600px;
margin: 50px;
    height:20em;
   
    
  }
 
  .caccac{
margin-right: 20px;


  }

.titol{
  margin: 0 auto;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  font-size: 50px;
}
.titolo{font-size: 190px;
  top: 50%;}
.parte3 p{

font-size: 1.7em;

}
.att{

font-size: 2em;
  margin-top: 20px;
}
}





@media (max-width: 1300px) {
  .parte3, p {
    font-size: 70%;
    line-height: 1.4;
    
    margin: auto;
  }
  .att{

    font-size: 30px;
  }
    iframe{
      margin-top: 0;
    }
    
    
    #galleria li{
      width: 400px;
      height: 20em;
      margin:100px;
      
      
    }
    .titol{
      margin-right: 30px;
      
    }
}

/* Titolo gigante responsivo */
@media (max-width: 1116px) {
  .titolo {
    font-size: 145px;
    top: 50%;
   
  }

  .titol {
    font-size: 50px;
    margin: 0 auto;
    width: auto;
    margin-left: 0;
    margin-right: 40px;
  }

  .paga h1 {
    font-size: 60px;
    left: 0;
    text-align: center;
    
  }
  
}

/* xs */
/* @media (min-width: 475px) {} */

/* sm */
/* @media (min-width: 640px) {} */

/* md */
/* @media (min-width: 768px) {} */

/* lg */
/* @media (min-width: 1024px) {} */

/* xl */
/* @media (min-width: 1280px) {} */

/* 2xl */
/* @media (min-width: 1536px) {} */
/* 2xl */
@media (max-width: 1116px) {
  .navbar {
    
    
  }

  .navbar a {
    font-size: 30px;
    margin: 10px ;
  }

  .logo {
    width: 30px;
    height: 100px;
  }

  .header {
    padding: 1px 2px;
  }
  #galleria li {
    margin: 5px;
   justify-content: center;
 margin-left: 50px;
    width: 40%;
  
    list-style: none;
    
  }
  .primo{

width: 100%;
height: 100%;

  }
  .att{

font-size: xx-large;
margin-top: 5px;
  }
  .parte3 p{

font-size: 23px;

  }
  .penultima h1{
font-size: 16px;

margin-right: 60px;

  }
  .destra{display: none;}
  .etoz{display: none;}

}

/* Titolo gigante responsivo */
@media (max-width: 915px) {
  .titolo {
    font-size: 112px;
    top: 50%;
    margin-right: 200px;
   
  }
.penultima h1{

display: none;


}
  .titol {
    font-size: 50px;
    margin: 0 auto;
    width: auto;
    margin-left: 0;
    margin-right: 10px;
  }

  .paga h1 {
    font-size: 60px;
    left: 0;
    text-align: center;
    
  }
.parte3 p{

font-size: 20px;


}


.container{

 
              /* Imposta larghezza massima al 100% */
           /* Imposta una larghezza massima per il video */
  padding: 5px;
  
}

#media-section {
 
  
}
  .caccac{
    margin-right: 30px;
  }
  .centro-sito {
    background-image: url(immagini/23mob.png); /* sfondo alternativo mobile */
   }
   
   .primo {
     display: none; /* nasconde l'immagine 23.png */
   }
   .navbar {
    flex-direction: column;
    align-items: center;
  }

  .navbar a {
    font-size: 20px;
    margin: 5px ;
  }

  .logo {
    width: 30px;
    height: 100px;
  }

  .header {
    padding: 1px 2px;
  }
  #galleria li {
    margin: 5px;
   justify-content: center;
 margin-left: 25px;
    width: 90%;
    list-style: none;}
    .sinistra{
      
    }
}
@media (max-width: 915px){


  .navbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
  
    background-color: rgba(0, 0, 0, 0.95);
    transform: translateX(100%); /* parte fuori dallo schermo */
    opacity: 0;
    pointer-events: none;
  
    transition: transform 0.4s ease, opacity 0.4s ease;
    z-index: 999;
  }
  
  .navbar.open {
    transform: translateX(0);  /* entra con effetto slide */
    opacity: 1;
    pointer-events: auto;
  }
  
    
    
  
    .navbar a {
      margin: 10px 0;
      font-size: 50px;
    }
  
    .hamburger {
      display: block;
      margin-right: 30px;
    }
  
    .header {
      justify-content: space-between;
      padding: 20px 20px;
    }
  
  #galleria li {
    margin: 5px;
   justify-content: center;
 
    width: 90%;
    list-style: none;}


.footercontainer{

width: 85%;

}

.centro-sito {
 background-image: url(immagini/23-mob.png); /* sfondo alternativo mobile */
}

.primo {
  display: none; /* nasconde l'immagine 23.png */
}
.parteinf p{

  font-size: 32px;
}
}






@media (max-width: 724px) {

  /* Visualizza il menu solo quando .open è presente */
  .navbar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;

  background-color: rgba(0, 0, 0, 0.95);
  transform: translateX(100%); /* parte fuori dallo schermo */
  opacity: 0;
  pointer-events: none;

  transition: transform 0.4s ease, opacity 0.4s ease;
  z-index: 999;
}

.navbar.open {
  transform: translateX(0);  /* entra con effetto slide */
  opacity: 1;
  pointer-events: auto;
}

  .titol{

width: 100%;

  }
  #galleria{

   margin-left: 10px;
   margin-right: 10px;
  }

  .navbar a {
    margin: 10px 0;
    font-size: 50px;
  }

  .hamburger {

  }

  .header {
    justify-content: space-between;
    padding: 20px 20px;
    
  }


  .titolo {
    font-size: 100px;
    top: 50%;
    white-space: normal; /* Permetti il ritorno a capo automatico */
    /* Aggiungi un ritorno a capo se necessario */
  }

iframe{display: none;}

.parte2{background-attachment:unset;}
  .titol {
    font-size: 50px;
    padding-right: 4%;
    margin-left: 0;
    margin-right: 0;
  }

  .paga h1 {
    font-size: 60px;
    left: 0;
    text-align: center;
  
  }
  .caccac{
    margin-right: 20px;
  
  }

.att{
  font-size: 27px;
  margin-right:20px;
  margin-left: 20px;
  
  padding: 20px;
  
  
}

  .parte3{
    display: none;
  }
  .sinistra{
  margin: 30px;
  width: 400px;
}}
  .destra{display: none;}
  .WHO{font-size: 15px;
  margin: 20px;}


  .parteinf p{

    font-size:100%;
    margin: 10%;
    
    
  }
  html, body {
    overflow-x: hidden;
    box-sizing: border-box;
  }
  *, *::before, *::after {
    box-sizing: inherit;
  }
  .giff{

      margin-top: 20%;
      width: 100%;
      height: 100%;
  }
  .don{
display: none;

  }
  .desktop-link {
    display: none;
  }
  .mobile-link {
    display: inline;
  }
}



@media(max-width:457px;) {
  
/* Impostazioni generali */

.desktop-link {
  display: none;
}
.mobile-link {
  display: inline;
}

/* Impostazioni dell'header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%; /* Imposta la larghezza al 100% */
  box-sizing: border-box; /* Assicura che padding e bordi non superino la larghezza */
}

/* Navbar - imposta la larghezza e posizionamento */
.navbar {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #333;
  width: 100%; /* Imposta la larghezza al 100% */
  height: 100vh; /* Usa tutta l'altezza dello schermo */
  transform: translateX(-100%); /* Inizialmente nascosto */
  transition: transform 0.3s ease;
  box-sizing: border-box;
}

.navbar.open {
  transform: translateX(0); /* Quando il menu è aperto */
}

.navbar a {
  padding: 20px;
  text-decoration: none;
  color: #fff;
  text-align: center;
  display: block;
}

/* Hamburger */
.hamburger {
  font-size: 30px;
  color: white;
  cursor: pointer;
  z-index: 1001;


  
}

/* Media query per schermi più piccoli */
@media (max-width: 455px) {
  .navbar {
    display: none; /* Evita che i link si sovrappongano al logo */
  }

  .navbar a {
    display: none;
  }

  .hamburger {
    display: none;
  }
  .desktop-link {
    display: none;
  }
  .mobile-link {
    display: inline;
  }
}

/* Media query per schermi più larghi */
@media (min-width: 456px) {
  .navbar {
    display: flex;
    flex-direction: row;
    position: relative;
    transform: none; /* Mantieni il menu visibile */
    height: auto;
  }
  .desktop-link {
    display: none;
  }
  .mobile-link {
    display: inline;
  } 
  .navbar a {
    padding: 15px 20px;
    font-size: 18px;
  }

  .hamburger {
    display: none; /* Nascondi l'hamburger menu sui desktop */
  }
}

  
}



@keyframes lampeggio {
  0% {
    color: #ffd900;
    text-shadow: 2px 2px 40px rgba(255, 255, 255, 0.74);
    
  }

  100% {
    color: #ff0000;
    
  }