/*COLORI
nero: 191815
giallo: ffc500
bianco: f8f4ed
rosa: cca4a3
rosso: b32821
*/
*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Helvetica', 'sans-serif';
  color: #191815;
  font-size: 2.1vw;
  background: #f8f4ed; /* fallback */
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("sfondo_astratto_lr.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02); 
}

.box-bianco{
  background: #f8f4ed; 
  border: 1.5px solid #191815;          
  padding: 0;
  max-width: 75ch;
  margin: 0 auto;    
}


.logo-container {
 z-index: 10;
 display: flex;
 align-items: center;
 justify-content: space-between; /*Spazio tra logo e button*/
 position: relative;
 top: 2vw;
 padding: 1vw 6vw 0;
 width: 100%;
 height: auto;
}

.logo-container img {
    width: 6vw;
    min-width: 80px;
    height: auto;
}

.button-container {
  display: flex; /* Raggruppa i button */
  gap: 25px; /* Spaziatura tra i button */
}

.button {
 color: #191815;
 text-decoration: none; 
 margin-top: auto;
 padding: 5px 0px;
 font-size: 1.1vw;
 font-weight: 200;
 letter-spacing: 3px;
 border: none; 
 outline: none; 
 background: none; 
}

.button:hover {
 font-weight: 900;
}

.title-container {
 width: 100%;
 max-width: 100%;
 padding: 3vw 5vw; 
 text-align: left;
}

h1 {
  font-family: 'Helvetica', sans-serif;
  font-size: 10vw;
  max-width: 90%;
  font-weight: 100;
  letter-spacing: 35px;
  text-align: left;
  color: #191815; 
  margin: 3vw 0;
}

h3 {
  font-family: 'Helvetica', sans-serif;
  font-size: 3vw;
  max-width: 90%;
  font-weight: 100;
  letter-spacing: 20px;
  text-align: left;
  margin: 0 0;
  margin-bottom: 3vw;
}

/*-----------------------------------*/

/*MEDIA 768PX*/
@media (max-width: 768px) {

.logo-container {
display: flex;
margin-bottom: 20px;
flex-direction: row; /* Elementi in riga */
align-items: flex-start; /* Allinea tutto a sinistra */
    }

 .button-container {
    margin-top: 15px;
    justify-content: center; /* Centra i bottoni sotto al logo */
    flex-direction: row; /* Bottoni in verticale */
    width: auto;
    }
    
  .button {
    padding: 5px 0px;
    letter-spacing: 1px;
    font-size: 12px;
    }
    
  .title-container {
    margin-top: 10vw;
    width: 100%;
    }
    
  h1 {
    font-size: 50px;
    margin-top: 0vw;
    max-width: 90%;
    letter-spacing: 20px;
  }
    
     h3 {
    font-size: 26px;
    letter-spacing: 10px;
    }

  .posters-title, .frames-title, .rebrand-title {
    font-size: 15px;    
    }
    
  .grid-container {
    grid-template-columns: repeat(1, 1fr); /* Una sola colonna per schermi piccoli */
    grid-gap: 15px; /* Riduce la spaziatura tra le immagini */
    width: 100%;
    margin: 0 0;  
  }
    .grid-item {
        max-width: 90%;
    }
}
/*-----------------------------------*/

/*MEDIA 480PX*/
@media (max-width: 480px) {
    
.logo-container{
    position: relative;     /* IMPORTANT: toglie l'assoluto del desktop */
    top: auto;
    left: auto;
    width: 100%;
    padding: 4vw;
    margin-bottom: 4vw;
    display: flex;
    flex-direction: column; /* logo sopra, bottoni sotto */
    align-items: flex-start;
    gap: 3vw;
  }

 .button-container{
    display: flex;
    flex-direction: row;    /* bottoni affiancati */
    flex-wrap: wrap;        /* se non ci stanno, vanno a capo */
    gap: 4vw;
    width: 100%;
    margin-top: 0;
    justify-content: flex-start;
  }
    
 .button {
    padding: 5px 5px;    
    letter-spacing: 1px;
    font-size: 12px;
    white-space: nowrap;  
    }
    
    .title-container {
    margin-top: 5vw;
    }
    
    h1 {
    font-size: 48px;
    max-width: 90%;
    letter-spacing: 4px;
  }
    
    h3 {
    font-size: 26px;
    letter-spacing: 10px;
    }
    
  .posters-title, .frames-title, .rebrand-title {
    font-size: 15px;    
    }
    
  .grid-container {
    grid-template-columns: repeat(1, 1fr); /* Una sola colonna per schermi piccoli */
    grid-gap: 15px; /* Riduce la spaziatura tra le immagini */
    width: 100%;
    margin: 0 0;  
  }
    
  .grid-item {
    max-width: 90%;
  }  
}
/*-----------------------------------*/

.frames-descrizione, .rebrand-descrizione {
  font-family: 'Helvetica', sans-serif;
  letter-spacing: 2px;
  font-weight: 200;
  font-size: clamp(12px, 1.2vw, 30px);
  line-height: clamp(15px, 1.5vw, 30px);
}

.descrizione {
  font-family: 'Helvetica', sans-serif;
  letter-spacing: 2px;
  font-weight: 400;
  font-size: clamp(12px, 1.2vw, 30px);
  line-height: clamp(15px, 1.5vw, 30px);
}

.frames-descrizione, .rebrand-descrizione {
  margin-bottom: 4vw;
}

.posters-container, .frames-container, .rebrand-container {
 width: 100%;
 max-width: 100%;
 padding: 3vw 5vw; 
 text-align: left; 
}

  .posters-title, .frames-title, .rebrand-title {
  font-family: 'Helvetica', sans-serif;
  font-size: clamp(18px, 2vw, 80px);
  max-width: 90%;
  font-weight: 800;
  letter-spacing: 2vw;
  text-align: left;
  color: #191815; 
  margin: 3vw 0;
  border-top: 1.5px solid #191815; 
  padding-top: 2vw;
} 

.grid-container {
  display: grid;
    grid-template-columns: repeat(2, 1fr);  /* Crea due colonne */
    grid-gap: 20px;  /* Spazio tra le immagini */
    width: 100%;
    margin: 0 0;
}

.grid-item {
  width: 100%; /* Adatta le immagini alla cella */
  height: auto; /* Mantiene le proporzioni */
  border: 1.5px solid #191815;    
}

.grid-item:hover {
  opacity: 40%;  
}

    

a {
  color: #191815;
  font-family: 'Helvetica', sans-serif;   
  text-decoration: underline;
}

a:hover {
  font-weight: 500;
}


.divider {
    max-width: 100%;
    height: 1px;
    background-color: #191815;
}

.footer-container{
   text-align: left;
   margin-top: 2vw;  
   padding-top: 50px;
   margin: 2vw 5vw;
}

.footer-container img{
   width:10vw;
}

.footer{
   width: 100%;
   text-align: left;
   font-family: 'Courier New', sans-serif;
   font-size: clamp(12px, 0.7vw, 30px);   
   font-weight: 600;
   padding-bottom: 50px;
   padding-left: 0px;
   overflow-wrap: anywhere; 
   word-break: break-word;    
}

.link {
   color: #b32821;
   font-family: 'Courier New', sans-serif;
   font-size: clamp(12px, 0.7vw, 30px);
   font-weight: 600; 
}