/* impostazioni di default */
* {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px grey;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ff7f3c;
  border-radius: 10px;
}

/* Handle on hover
::-webkit-scrollbar-thumb:hover {
  background: #b30000;
} */

body {
  background-color: #e8e8e8;
  overflow-x: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@font-face {
  font-family: "Neue Machina";
  src: url("assets/PPNeueMachina-PlainRegular.otf") format("truetype");
}

/* For desktop: - definisco larghezza colonna  */
.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25.66%;
}
.col-3-4 {
  width: 30%;
}
.col-4 {
  width: 33.33%;
}
.col-4-5 {
  width: 40%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}

/* definisco spaziatura vuota */
.offset-1 {
  margin-left: 8.33%;
}

.offset-2 {
  margin-left: 16.66%;
}

.offset-3 {
  margin-left: 25%;
}
.offset-4 {
  margin-left: 33.33%;
}
.offset-4-5 {
  margin-left: 3%;
}

.offset-5 {
  margin-left: 41.66%;
}

.offset-6 {
  margin-left: 50%;
}

/* .offset-7 {
  margin-left: 58.33%;
} */

/* PROVA */
/* Contenitore principale delle colonne */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: max(16px, 1vw); /* Gap massimo di 16px tra le immagini e ai lati */
  box-sizing: border-box;
  padding-left: max(16px, 1vw); /* Padding costante ai lati del contenitore */
  /* padding-right: max(16px, 1vw); Padding costante ai lati del contenitore */
}

/* Definizione delle colonne per le immagini */
.col-1p,
.col-2p,
.col-3p,
.col-4p,
.col-5p,
.col-6p {
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Esempio per colonne in percentuali */
.col-1p {
  width: calc(16.66% - max(16px, 1vw)); /* Larghezza colonna meno il gap */
}
.col-2p {
  width: calc(33.33% - max(16px, 1vw));
}
.col-3p {
  width: calc(50% - max(16px, 1vw));
}
.col-4p {
  width: calc(66.66% - max(16px, 1vw));
}
.col-5p {
  width: calc(83.33% - max(16px, 1vw));
}
.col-6p {
  width: calc(100% - max(16px, 1vw));
}
/* FINE PROVA */

.myHeader {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  z-index: 100;
  transition: all 0.3s ease;
}

.nav-up {
  top: -50px;
}

.nav-down {
  top: 0px;
}

.menu-voice {
  padding: 3%;
  padding-top: 1%;
  padding-bottom: 1%;
  font-family: "roc-grotesk", sans-serif;
  font-size: 1.7rem;
  font-weight: 500;
}

.presentationContainer {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.presentation {
  font-family: "Neue Machina", sans-serif;
  font-size: 6rem;
  font-weight: 500;
  position: fixed;
}

.text-scramble {
  font-size: 2rem;
  background-color: #ff7f3c;
  text-align: center;
}

.proj {
  position: relative;
  font-family: "Neue Machina", sans-serif;
  font-size: 3.8rem;
  padding: 0.8%;
  padding-left: 5%;
  font-weight: 800;
}

a {
  text-decoration: none;
}

a:link,
a:visited,
a:hover {
  color: black;
}

/* per transition blur sulle scritte, ma fa effetto strano foto */
/* li {
  transition: filter .5s;
} */

/* blurrare elementi non hoverati */
ul:hover li:not(:hover) {
  -webkit-filter: blur(7px);
  -moz-filter: blur(7px);
  -o-filter: blur(7px);
  -ms-filter: blur(7px);
  filter: blur(7px);
}

ul {
  width: 61%;
}

.proj1:hover #cover1,
.proj1:hover #description1,
.proj2:hover #cover2,
.proj2:hover #description2,
.proj3:hover #cover3,
.proj3:hover #description3,
.proj4:hover #cover4,
.proj4:hover #description4,
.proj5:hover #cover5,
.proj5:hover #description5,
.proj6:hover #cover6,
.proj6:hover #description6,
.proj7:hover #cover7,
.proj7:hover #description7,
.proj8:hover #cover8,
.proj8:hover #description8,
.proj9:hover #cover9,
.proj9:hover #description9 {
  display: block;
  -webkit-animation: text-focus-in 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53)
    both;
  animation: text-focus-in 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

.follow-img {
  display: none;
  width: 70%;
  transition: ease 0.2s;
  position: absolute;
  /* border-radius: 20px; */
  transform: translate(-50%, -50%);
  z-index: -3;
}

.description {
  display: none;
  width: 70%;
  max-width: 900px;
  position: absolute;
  font-family: "roc-grotesk", sans-serif;
  font-size: 1.3rem;
  line-height: 1.7rem;
  font-weight: 400;
  z-index: -3;
}

#description1 p,
#description2 p,
#description3 p,
#description4 p,
#description5 p,
#description6 p,
#description7 p,
#description8 p,
#description9 p {
  display: block;
  padding-left: 50%;
  top: 100px;
}

/* così l'ultima immagine non esce dal fondo */
#description9 {
  margin-top: -6%;
}

#description1 p span,
#description2 p span,
#description3 p span,
#description4 p span,
#description5 p span,
#description6 p span,
#description7 p span,
#description8 p span,
#description9 p span {
  background-color: #ff7f3c;
}

.proj9 {
  padding-bottom: 8%;
}

footer {
  position: fixed;
  display: flex;
  justify-content: space-between;
  bottom: 0;
  left: 0;
  width: 100%;
}

.footer-voice {
  padding: 3%;
  padding-bottom: 1%;
  font-family: "roc-grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

#sign {
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: -1;
}

@media only screen and (max-width: 800px) {
  /* For mobile phones:  sempre larghezza colonna*/

  [class*="col-"] {
    width: 100%;
    flex-direction: row;
  }

  [class*="offset-"] {
    margin-left: 0%;
    flex-direction: row;
  }

  .container-mobile {
    padding-left: 5%;
    padding-right: 5%;
  }

  .myHeader {
    padding-top: 2%;
  }

  .description {
    font-size: 1rem;
    line-height: 1.3rem;
  }

  #name {
    font-size: 3.2rem;
    /* Add text wrapping for name */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .text-scramble {
    font-size: 1.2rem;
  }

  .footer-voice {
    font-size: 0.8rem;
    padding-bottom: 2%;
  }

  .proj {
    font-size: 3rem;
    line-height: 3.2rem;
    /* Use full width and only break when necessary */
    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
    /* Allow wrapping */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  ul {
    width: 100%;
  }

  .proj-container {
    padding-bottom: 35%;
  }

  #sign {
    display: none;
  }
}

/* Add additional breakpoint for very small screens */
@media only screen and (max-width: 480px) {
  #name {
    font-size: 2.5rem;
  }

  .proj {
    font-size: 2.5rem;
    line-height: 2.7rem;
  }

  .text-scramble {
    font-size: 1rem;
  }
}

/* Add breakpoint for very small screens (phones in portrait) */
@media only screen and (max-width: 320px) {
  #name {
    font-size: 2rem;
  }

  .proj {
    font-size: 2rem;
    line-height: 2.3rem;
  }

  .text-scramble {
    font-size: 0.9rem;
  }
}

/* mette il padding interno agli elementi */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}