@charset "UTF-8";

:root {
  /* Padding e margini */
  --padding-default: 0.25rem;
  --padding-top: 0.25rem;
  --padding-right: 0.25rem;
  --padding-bottom: 0.25rem;
  --padding-bottom-filetti: calc(0.25rem / 2);
  --padding-left: .25rem;
  --margin-bottom-default: 0.25rem;
  --margin-top-default: 0.25rem;
  --padding-sito: .5rem;

  /* Colori */
  --color-black: #000;
  --color-white: #fff;
  --color-background: #050505;
  --color-gray: rgb(220, 220, 220);
  --color-yellow: yellow;
  --color-border: #000;

  /* Font e tipografia */
  --font-size-base: 1rem;
  --font-size-small: 0.875em;
  --font-size-large: 1.25em;
  --line-height-base: 1.5;

  /* Altezze e larghezze */
  --menu-width: calc(100vw / 8);
  --menu-height: 80vh;
  --project-height: auto;
  --image-width: 100%;
  --image-height: auto;

  /* Transizioni */
  --transition-duration: 0.4s;
  --transition-ease: ease-in-out;

  /* z-index */
  --z-index-header: 5000;
  --z-index-menu: 100;
  --z-index-active-menu: 1000;

  /* Posizionamento */
  --top-header: 0;
  --top-menu: calc(25vh / 2);
  --right-menu: 0;
}


@font-face {
    font-family: "baikal";
    src: url(../fonts/Baikal-Medium.otf);
  }


  html {
    /* scroll-behavior: smooth; */
    animation: fadeIn 1.5s;
    transition: 0.4s;
    background-color: white;
  }

  h1{
    font-size: .8em;
    font-family: baikal;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  h4{
    font-size: .8em;
    font-family: baikal;
    line-height: 1;
  }

  h5{
    font-size: 1em;
    font-family: baikal;
  }

.tab{
  display: inline-block;
  margin-left: 1.5em;
}

  h2{
    font-size: .6em;
    font-family: baikal;
  }

  h3{
    font-size: .8em;
    font-family: baikal;
    text-indent: -4em;
    margin-left: 4em;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: max-content auto;
  }

  li {
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
    gap: .4rem;
  }


/* @media (max-width: 900px) {


  h1{
    font-size: .8em;
    font-family: baikal;
    font-variant-numeric: tabular-nums;
  }

} */

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  .viewport-about{
    position: relative;
    background-color: black;
    height: 100%;
    width: 100%;
}

/* header */

/* Header */
.header-content {
  padding: var(--padding-sito);
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: var(--padding-sito);
  z-index: var(--z-index-header);
  background-color: var(--color-white);
  text-align: left;
  top: var(--top-header);
}

.header-home{
  width: 25%;
}

.header-navigation{
  width: 25%;
  text-align: right;
  padding-right: var(--padding-right);
}

.header-language{
  width: 50%;
  text-align: right;
}
   
.allineadestra {
    text-align: right;
  }



/* setup generale about */



* , *:before, *:after{ 
  box-sizing:border-box; 
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
  -ms-box-sizing:border-box;
}


.containerprincipale {
  padding: .5rem;
  display: flex;
  position: absolute;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
  width: 100%;
  top: var(--top-menu);
  z-index: 100;
}

.quattro {
  height: 25vh;
  width: 50%;
}
  .quattroabout {
    margin-top: 3px;
    margin-bottom: 3%;
    height: auto;
    width: calc(((100vw/8)*5));
    position: relative;
    left: 0;
  }

.sei {
  top: calc(1rem + 16px);
  position: sticky;
  height: 100%;
  width: calc((100vw/8)*3 - 1.5rem - 1rem);
  left: 0;
  z-index: 600;
}

.bv{
  top: calc(16px + 1.5rem);
  z-index: 1000;
  padding-left: calc((100vw/8*1) - 1rem - 1.5vw);
}
 
.sei .allineadestra {
  text-align: right;
  background-color: rgb(255, 255, 255);
  background-color: greenyellow;
}


.sezione {
width: 100%;
height: auto;
margin-bottom: 3%;
}

.grid-container {
  grid-template-columns: calc(100%/8) calc(100%/8) calc(100%/8) calc(100%/8) calc(100%/8) calc(100%/8) calc(100%/8) calc(100%/8);
  display: grid;
  margin: 0;
  width: 100%;
  height: auto;
}


.item1 {
  grid-column-start: 1;
  grid-column-end: 2;
  font-family: baikal;
}

.item2 {
  padding-bottom: 0.5rem;
  grid-column-start: 4;
  grid-column-end: 5;
  font-family: baikal;
}

.item3 {
  padding-bottom: 0.5rem;
  grid-column-start: 5;
  grid-column-end: 6;
  font-family: baikal;
  text-align: left;
}

.item4 {
  padding-bottom: 0.5rem;
  grid-column-start: 6;
  grid-column-end: 8;
  font-family: baikal;
}
.item5 {
  padding-left: 1rem;
  padding-bottom: 0.5rem;
  grid-column-start: 6;
  grid-column-end: 8;
  font-family: baikal;
}
.item6 {
  padding-left: 1rem;
  grid-column-start: 6;
  grid-column-end: 8;
  font-family: baikal;
}
   
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: max-content auto;
      font-family: baikal;
      transition: 0.6s;
    }

    li {
      display: grid;
      grid-column: span 2;
      grid-template-columns: subgrid;
      gap: 5rem;
    }
  
  
  .tab{
    display: inline-block;
    margin-left: 5%;
  }


a {
    text-decoration: none; /* Rimuove la sottolineatura */
    color: inherit; /* Mantiene il colore del testo del contenitore genitore */
}

.progetto:hover{
    color: rgb(160, 160, 160);
    transition: ease-in-out .3s;
}

a:hover{
    color: rgb(160, 160, 160);
    transition: ease-in-out .3s;
}

.filettoabout {
  position: sticky;
  top: calc(1rem + 16px);
  width: 1.5rem;
  height: 3px;
  border-top: 1.5px solid var(--color-white);
  background-color: var(--color-black);
  margin-top: 0;
}


@media only screen and (max-width: 1400px){
  .menu-active .immagini{
      display: none;
      width: 0;
  }
}

@media only screen and (max-width: 1000px){
  .grid-container {
    grid-template-columns: calc(100%/4) calc(100%/4) calc(100%/4) calc(100%/4);
    display: grid;
    margin: 0;
    width: 100%;
    height: auto;
  }



.item1 {
  grid-column-start: 1;
  grid-column-end: 2;
  font-family: baikal;
}

.item2 {
  padding-bottom: 0.5rem;
  grid-column-start: 1;
  grid-column-end: 2;
  font-family: baikal;
}

.item3 {
  padding-bottom: 0.5rem;
  grid-column-start: 2;
  grid-column-end: 3;
  font-family: baikal;
  text-align: left;
}

.item4 {
  padding-bottom: 0.5rem;
  grid-column-start: 3;
  grid-column-end: 5;
  font-family: baikal;
}
.item5 {
  padding-left: 1rem;
  padding-bottom: 0.5rem;
  grid-column-start: 3;
  grid-column-end: 5;
  font-family: baikal;
}
.item6 {
  padding-left: 1rem;
  grid-column-start: 3;
  grid-column-end: 5;
  font-family: baikal;
}

.quattroabout {
  margin-top: 3px;
  margin-bottom: 3%;
  height: auto;
  width: 100%;
  position: relative;
  left: 0;
}

.sei {
/* top: calc(1rem + 16px); */
position: static;
height: auto;
width: calc(100% - 1.5rem);
left: 0;
/* z-index: 600; */
}
.bv{
  /* z-index: 1000; */
  padding-left: calc((100vw/8*1) - 1rem - 1.5vw);
}
.filettoabout {
  /* position: sticky; */
  /* top: calc(1rem + 12.8px * 3); */
  width: 1rem;
  height: 3px;
  border-top: 1.5px solid var(--color-white);
  background-color: var(--color-black);
  /* margin-top: 0; */
}
h1{
  font-size: .6em;
  font-family: baikal;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

h2{
  font-size: .4em;
  font-family: baikal;
}

h5{
  font-size: .8em;
  font-family: baikal;
}

}

@media only screen and (min-width: 1920px){



  h1{
    font-size: 2.4em;
  }

  h2{
    font-size: 1.8em;
  }

  h4{
    font-size: 2.4em;
  }
  
  h5{
    font-size: 3em;
  }

  .filettoabout {
    top: calc(1rem + 48px * 1);
    height: 4.5px;
  }

  .sei {
    top: calc(1rem + 48px * 1);  
  }
  
  .bv{
    top: calc(1rem + 48px * 1);
  }

}