/* -------------------------------------------------------------------------------- */
/* ! Base */
/* -------------------------------------------------------------------------------- */
/* Tavolozza */
:root {
    --primary: #9ea9b8;
    --secondary: #6729ad;
    --accent: #AF1618;
    --light: #f9f8fa;
    --dark: #1b1b1c;
    background-color: var(--light);
  }
  

  
  /* Reset */
  * {
    margin: 0;
    padding: 0;
  }


  a {
    text-decoration: none;
  }

  a:hover {
    cursor: pointer;
  }


  li {
    list-style-type: none;
  }
  
  /* Tipografia */
  body {
    font-family: 'IBM Plex Sans', sans-serif;
    color: var(--dark);
  }

  h1 {
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-size: 55px;
    color: var(--dark);
  }
  h2 {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 35px;
  }


  
  /* p,
  ul {
    font-size: 1.2em;
    line-height: 1.2em;
  } */
  

  .bold h4 {
    font-weight: 900;
  }

  .italic h4{
    font-style: italic;}

    .stretti {
      background: solid #b20505;
    }

/* -------------------------------------------------------------------------------- */
/* ! Grid System */
/* -------------------------------------------------------------------------------- */

.welcome-grid {
  display: grid;
  grid-template-columns: 2fr 3fr; /* 2/5 e 3/5 dello spazio totale */
  grid-template-rows: 2fr; /* due righe */
  /* gap: 20px; */
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, auto);
    gap: 80px;
    padding: 10px;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 2fr; /* due righe */
  gap: 20px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(10, auto);
  gap: 10px;
  padding: 10px;
}


  /* -------------------------------------------------------------------------------- */
/* ! Header */
/* -------------------------------------------------------------------------------- */

.fixed {
  background: var(--light);
  width: 100%;
  z-index: 999;
}

.header{
  display: flex;
  justify-content: space-between;
  /* justify-content: space-around; */
  align-items: center;
  margin-top: 0.7em;
  border-bottom: 2px solid var(--dark);
  margin-bottom: 80px;
}

.logo {
  padding-left: 1em;
  font-size: 3em;
}


.site-nav li{
  display: inline-block;
  font-size: 1.5em;
  font-weight: 500;
}
.site-nav a{
  padding: 8px;
  color: var(--dark);
  font-family: 'IBM Plex Sans', sans-serif;
}
.cont {
  margin-right: 1em;
}


a:hover{
  cursor: pointer;
}

#contacts-link,
#projects-link,
#about-link {
  color: var(--accent);
}

  /* -------------------------------------------------------------------------------- */
/* ! Welcome */
/* -------------------------------------------------------------------------------- */

.weltit  {
  margin-bottom: 50px;
  margin: 2em 3em 1em 150px;
  font-size: 70px;
}

.welcome {
  display: grid;
  margin: 0em 4em 0em 150px;
}

.welcome__text h2 {
  font-family: 'IBM Plex Mono', sans-serif;
  font-weight: 500;
  line-height: 1.6em;
  font-size: 1.9em;
}

.welcome__img {
  color: var(--light);
  width: 20em;
  height: auto;
  margin-left: 4em;
}

.welcome__text {
  grid-column: 1 / span 3;
  grid-row: 1; 
}

.welcome__img {
  grid-column: 4 / span 2; 
  grid-row: 1; 
}

.welcome__img2 {
  display: none;
}
.bttlacrima {
  font-weight: 800;
  color: var(--accent);
  cursor: pointer;
}
.bttlacrima:hover {
  color: var(--secondary);
}


 /* -------------------------------------------------------------------------------- */
/* ! About */
/* -------------------------------------------------------------------------------- */

.about {
  flex-wrap: wrap;
}

.about h2 {
  font-size: 2em;
  margin: 0.5em 1em 2em 1em;
}

.about h3 {
  font-size: 1.3em;
  font-weight: 300;
  line-height: 1.5em;
  margin: 2.7em 2em 2em 1em;
  font-family: 'IBM Plex Sans', sans-serif;
}

#formazione {
  grid-column: 1/ span 3;
  grid-row: 1/1;
  border-right: 1px solid var(--accent);
}

#skills {
  grid-column: 4/ span 5;
  grid-row: 1/1;
  
}

#attivita {
  grid-column: 6/ span 9;
  grid-row: 1/2;
  border-left: 1px solid var(--accent);
}

.annifor,
.anniatt,
.skillsez {
  font-size: 0.9em;
  font-weight: 600;
}

.slash {
  visibility: hidden;
}


 /* -------------------------------------------------------------------------------- */
/* ! Progetti */
/* -------------------------------------------------------------------------------- */

.projects__img {
  /* margin: 130px 50px 60px 50px; */
  margin: 7em 3.5em 5em 3.5em;
}

.projects__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flo {
  grid-column: 1/3;
  grid-row: 1/3;
  
}

.nos {
  grid-column: 4/8;
  grid-row: 1/2;
}

.tal {
  grid-column: 6/9;
  grid-row: 2/3;
}

.aim {
  grid-column: 2/7;
  grid-row: 3/5
}

.inn {
  grid-column: 1/4;
  grid-row: 6/7;
}

.ele {
  grid-column: 5/9;
  grid-row: 5/8;
}

.image-container:hover .image-overlay {
  opacity: 1;
}

.grayscale {
  filter: grayscale(100%);
  transition: filter 0.5s ease-in-out;
}

.image-container:hover .grayscale {
  filter: grayscale(0%);
}

/* oppure:

.grayscale {
  filter: grayscale(1);
  transition: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.image-container:hover .grayscale{
  filter: grayscale(0) brightness(1);
} */

/* -------------------------------------------------------------------------------- */
/* ! Contatti */
/* -------------------------------------------------------------------------------- */

.contacts {
  margin-top: 3em;
}

.contacts a {
  color: var(--dark);
  font-family: 'IBM Plex Mono', sans-serif;
  font-size: 1em;
  font-weight: 800;
  margin-left: 1.5em;
  line-height: 1.8em;
}

.contacts h1 a:hover {
  color: var(--accent);
  cursor: pointer;
}


/* testo aggiuntivo */
.hover-text {
  display: none;
  color: var(--dark); /* colore testo che appare */
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 300;
  font-size: 40px;
}

.contacts a:hover .hover-text {
  display: inline-block;
}


/* -------------------------------------------------------------------------------- */
/*  Floating */
/* -------------------------------------------------------------------------------- */




/* -------------------------------------------------------------------------------- */
/*  Nostalgia */
/* -------------------------------------------------------------------------------- */

/* .pianta {
    color: var(--light);
    width: 20em;
    position: relative;
  } */

/* -------------------------------------------------------------------------------- */
/*  Tales */
/* -------------------------------------------------------------------------------- */


.row {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
}
.row .column {
  flex: 10%;
  padding: 50px;
  height: 100%;
}

.row .column img{
  border-color: var(--dark);
  margin: 15px 15px 15px 15px;
  width: 100%;
  height: 100%;
  /* filter: grayscale(1);
  transition: cubic-bezier(0.175, 0.885, 0.32, 1.275); */
}

/* .row .column img:hover{
  filter: grayscale(0) brightness(1);
} */

.colum .centred {
  justify-content: center;
}



/* .project__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imgtal1 {
  grid-column: 1/3;
  grid-row: 1/3;
  
}

.imgtal2 {
  grid-column: 4/8;
  grid-row: 1/2;
}

.imgtal3 {
  grid-column: 6/9;
  grid-row: 2/3;
}

.imgtal4 {
  grid-column: 2/7;
  grid-row: 3/5
}

.imgtal5 {
  grid-column: 1/4;
  grid-row: 6/7;
} */

/* -------------------------------------------------------------------------------- */
/*  Ai Margini */
/* -------------------------------------------------------------------------------- */

.primi1,
.primi2,
.primi3,
.glitch,
.sempre {
  max-width: 19em;
  margin: 1px;
  justify-content: space-between;
}

.stretti {
  max-width: 100vw;
}
.strettigif {
  object-fit: cover;
  max-width: 70vh;
}

.foto {

  max-width: 80vh;
}

/* -------------------------------------------------------------------------------- */
/*  Innesco */
/* -------------------------------------------------------------------------------- */


/* .project__img {
  margin: 130px 50px 60px 50px;
  margin: 7em 3.5em 5em 3.5em;
} */

/* .project__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

.flo {
  grid-column: 1/3;
  grid-row: 1/3;
  
}

.nos {
  grid-column: 4/8;
  grid-row: 1/2;
}

.tal {
  grid-column: 6/9;
  grid-row: 2/3;
}

.aim {
  grid-column: 2/7;
  grid-row: 3/5
}

.inn {
  grid-column: 1/4;
  grid-row: 6/7;
}

.ele {
  grid-column: 5/9;
  grid-row: 5/8;
}


/* -------------------------------------------------------------------------------- */
/*  Elettra */
/* -------------------------------------------------------------------------------- */

.ele h2 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 35px;
  margin: 2em 2em 2em 2.5em;
}


/* -------------------------------------------------------------------------------- */
/* ! Footer */
/* -------------------------------------------------------------------------------- */


.footer-inside {
  background: var(--dark);
  padding: 20px 3% 10px 3%;
  line-height: 1.2em;
  margin-top: 100px;
  position: static;
}

.footer-inside p {
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--primary);
}

.footer-inside .mail {
  font-size: 16px;
  font-weight: 300;
}

.credits {
  font-size: 14px;
  font-weight: 200;
  text-align: right;
}

.footer-inside .fa-brands {
  color: var(--primary);
  font-size: 27px;
  padding: 10px;
  text-align: left;
}
.social {
  display: flex;
  flex-direction: row;
}

.fa-brands:hover {
  color: var(--accent);
}

.policy {
  font-weight: 100;
  grid-column: 3/7;
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 1.5em;
  justify-content: right;
}

.policy a {
  color: var(--primary);
  cursor: pointer;
}

.policy li {
  margin-left: 50px; 
}






  /* -------------------------------------------------------------------------------- */
/* ! Media query big */
/* -------------------------------------------------------------------------------- */

@media (max-width: 1200px) and (min-width: 1021px) {

  .weltit  {
    margin-bottom: 50px;
    margin: 2em 3em 1em 100px;
    font-size: 60px;
  }
  
  .welcome {
    display: grid;
    margin: 0em 4em 0em 100px;
  }
  
  .welcome__text h2 {
    font-family: 'IBM Plex Mono', sans-serif;
    font-weight: 500;
    line-height: 1.6em;
    font-size: 1.6em;
  }
  
  .welcome__img {
    color: var(--light);
    width: 18em;
    height: auto;
    margin-left: 4em;
  }
  
  .welcome-grid img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  /* .welcome__text h1 {
    grid-column: 1 / span 4;
    grid-row: 1; 
  } */
  .welcome__text h2 {
    grid-column: 1 / span 4;
    grid-row: 1; 
  }
  .welcome__img {
    grid-column: 4 / span 2; 
    grid-row: 1; 
  }

  .weltes .par2 {
    display: none; /* no <br> */
  }

  .projects__img {
    /* margin: 130px 50px 60px 50px; */
    margin: 6em 3.5em 4.5em 3.5em;
  }
  
  .contacts a {
    font-weight: 600;
  }
  

  }


  /* -------------------------------------------------------------------------------- */
/* ! Media query large */
/* -------------------------------------------------------------------------------- */

@media (max-width: 1020px) and (min-width: 769px) {

  .weltit  {
    margin-bottom: 50px;
    margin: 2em 1.5em 1em 35px;
    font-size: 55px;
  }
  
  .welcome {
    display: grid;
    margin: 0em 3em 0em 35px;
  }
  
  .welcome__text h2 {
    font-family: 'IBM Plex Mono', sans-serif;
    font-weight: 500;
    line-height: 1.6em;
    font-size: 1.4em;
  }
  
  .welcome__img {
    color: var(--light);
    width: 16em;
    height: auto;
    margin-left: 4em;
  }
  
  .welcome-grid img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .weltes .par2 {
    display: none; /* Nasconde solo il <br> */
  }


  .about h2 {
    font-size: 1.9em;
    margin: 0.5em 1em 2em 0.6em;
  }
  
  .about h3 {
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1.5em;
    margin: 2.7em 1.4em 2em 1em;
  }
  
  .projects-grid {
    gap: 50px;
    padding: 25px;
}

  .projects__img {
    /* margin: 130px 50px 60px 50px; */
    margin: 5em 2em 4.5em 2em;
  }
  
  .projects__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .flo {
    grid-column: 1/3;
    grid-row: 1/3;
  }
  
  .nos {
    grid-column: 4/8;
    grid-row: 1/2;
  }
  
  .tal {
    grid-column: 6/9;
    grid-row: 2/3;
  }
  
  .aim {
    grid-column: 2/7;
    grid-row: 3/5
  }
  
  .inn {
    grid-column: 1/4;
    grid-row: 6/7;
  }
  
  .ele {
    grid-column: 5/9;
    grid-row: 5/8;
  }

/* Nostalgia */
  /* .titoli h1 {
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-size: 45px;
    color: var(--dark);
  }
  
  .txtflo {
    font-size: 1.3em;
    font-weight: 500;
    line-height: 1.6em;
    margin: 0px 5em 1em 4em;
    font-family: 'IBM Plex Mono', sans-serif;
  }
  
  .row {
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
  }
  
  .row .column {
    flex: 10%;
    padding: 50px;
    height: 100%;
  }
  
  .row .column img{
    margin: 15px 15px 15px 15px;
    width: 100%;
    height: 100%;
  } */



  .contacts {
    margin-top: 3.5em;
  }
  
  .contacts a {
    font-size: 0.9em;
    font-weight: 600;
    margin-left: 1.5em;
    line-height: 2em;
  }

  .hover-text {
    font-weight: 300;
    font-size: 30px;
  }


  .footer-inside {
    padding: 20px 3% 15px 3%;
  }

  .policy {
    font-size: 14px;
    font-weight: 300;
  }

}


    /* -------------------------------------------------------------------------------- */
/* ! Media query medium */
/* -------------------------------------------------------------------------------- */
@media (max-width: 768px) and (min-width: 601px) {

  
  .logo {
    font-size: 3em;
  }
  
  .site-nav li{
    display: inline-block;
    font-size: 1.3em;
    font-weight: 500;
  }
  .site-nav a{
    padding: 5px;
  }



  .weltit  {
    margin-bottom: 50px;
    margin: 1.5em 1.2em 1em 35px;
    font-size: 42px;
  }
  
  .welcome {
    display: grid;
    margin: 0em 2em 9em 35px;
  }
  
  .welcome__text h2 {
    font-family: 'IBM Plex Mono', sans-serif;
    font-weight: 500;
    line-height: 1.6em;
    font-size: 1.2em;
  }
  
  .welcome__img {
    color: var(--light);
    width: 13em;
    height: auto;
    margin-left: 2em;
  }
  
  .welcome-grid img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .weltes br {
    display: none; /* Nasconde solo il <br> */
  }


  .about-grid {
    display: flex;
  }

  .about h2 {
    font-size: 1.6em;
    margin: 0em 0.8em 0em 0.6em;
  }
  
  .about h3 {
    font-size: 1em;
    font-weight: 300;
    line-height: 1.5em;
    margin: 2em 1.4em 2em 1em;
  }

    
  #formazione {
    border-right: none;
    border-bottom: 1px solid var(--accent);
  }
  #attivita {
    border-left: none;
    border-bottom: 1px solid var(--accent);
  }

  .sez {
    display: none;
  }
  .slash {
    visibility: visible;
  }


  
  .projects-grid {
    gap: 25px;
    padding: 12px;
}

  .projects__img {
    /* margin: 130px 50px 60px 50px; */
    margin: 5em 2em 4.5em 2em;
  }

  .row{
    width: 100%;
    margin: 0;
    margin-top: 30px;
  }
  .row .column{
    flex: 100%;
    padding: 0 10px;
  }

  }


  .contacts {
    margin-top: 3.5em;
  }
  
  .contacts a {
    font-size: 0.7em;
    font-weight: 600;
    margin-left: 1.5em;
    line-height: 2em;
  }
  
  .hover-text {
    display: none;
    color: var(--dark); /* colore testo che appare */
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 200;
    font-size: 22px;
  }


  .footer-inside {
    padding: 20px 3% 20px 3%;
  }
  
  .footer-inside .mail {
    font-size: 14px;
  }
  
  .policy {
    font-weight: 200;
    font-size: 13px;
  }
  .policy li {
    margin-left: 30px;
  }

  .credits {
    font-size: 12px;
  }
  
  .footer-inside .fa-brands {
    font-size: 24px;
    padding: 11px;
  }



/* -------------------------------------------------------------------------------- */
/* ! Media query small */
/* -------------------------------------------------------------------------------- */
@media (max-width: 600px) {


  .logo {
    padding-left: 0.8em;
    
  }
  .header {
    margin-top: 0em;
  }
  .site-nav li{
    display: inline-block;
    font-size: 1em;
    font-weight: 500;
  }
  .site-nav a{
    padding: 10px;
  }


  .weltit  {
    margin-bottom: 50px;
    margin: 1.5em 1em 0.8em 17px;
    font-size: 35px;
    font-weight: 600;
  }
  
  .welcome {
    display: grid;
    margin: 0em 1em 9em 17px;
  }
  
  .welcome__text h2 {
    font-family: 'IBM Plex Mono', sans-serif;
    font-weight: 400;
    line-height: 1.3em;
    font-size: 0.9em;
  }
  
  .welcome__img {
    color: var(--light);
    width: 9em;
    height: auto;
    margin-left: 1em;
  }
  
  .welcome-grid img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }


  .weltes br {
    display: none; /* Nasconde solo il <br> */
  }


  .about-grid {
    display: flex;
  }

  .about h2 {
    font-size: 1.6em;
    margin: 0em 0.8em 0em 0.6em;
  }
  
  .about h3 {
    font-size: 1em;
    font-weight: 300;
    line-height: 1.5em;
    margin: 2em 1.4em 2em 1em;
  }

    
  #formazione {
    border-right: none;
    border-bottom: 1px solid var(--accent);
  }
  #attivita {
    border-left: none;
    border-bottom: 1px solid var(--accent);
  }

.sez {
    display: none;
  }
  .slash {
    visibility: visible;
  }


  .projects-grid {
    gap: 15px;
    padding: 2px;
}

  .projects__img {
    /* margin: 130px 50px 60px 50px; */
    margin: 5em 1.5em 4.5em 1.5em;
  }
  .row{
    width: 100%;
    margin: 0;
    margin-top: 30px;
  }
  .row .column{
    flex: 100%;
    margin: 30px 30px 30px 30px;
  }

  .contacts {
    margin-top: 3.5em;
  }
  
  .contacts a {
    font-size: 0.6em;
    font-weight: 500;
    margin-left: 1.5em;
    line-height: 2em;
  }
  
  .contacts a:hover .hover-text {
    display: none; 
  }
  
  .footer-inside {
    padding: 10px 3% 10px 3%;
  }
  
  .footer-inside .mail {
    font-size: 11px;
    font-weight: 400;
  }
  
  .policy {
    font-weight: 300;
    font-size: 11px;
    flex-direction: column;
    align-items: flex-end;
  }
  .policy li {
    margin-left: 20px;
  }

  .credits {
    font-size: 10px;
    font-weight: 200;
    text-align: center;

  }
  
  .footer-inside .fa-brands {
    font-size: 20px;
    padding: 11px;
  }
  
  
  }