body{
      background-color: #E7EAE1;
}

.main {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
   margin: 20px;
   background-color: #E7EAE1;
}

#screensaver {
  transition: opacity 10s linear;
}

/* MENU */
.top-bar{
   display: flex;
   font-family: Arial, Helvetica, sans-serif;
   background-color: #E7EAE1;
   font-size: 24px;
   flex-direction: row;
   position: fixed;
   top: 0;
   width: 100vw;
   box-sizing: border-box;
   padding: 20px;
   z-index: 1000;
}

.top-bar__title{
   padding-right: 30px;
}

ul{
   display: flex;
   flex-direction: row;
}

a{
   color:  rgb(166, 166, 166);
   text-decoration: none;
}


.top-bar a.active{
   color:  #7C8966;
   text-decoration: none;
}
.top-bara:hover{
   color:  #7C8966;
   text-decoration: none;
}

li{
   padding-right: 30px;
}


 /* filtri pagina catalogo*/

 .filters__controls{
   display: flex;
   position: sticky;
   background-color: #E7EAE1;
   padding: 50px 0 50px 0;
   top: 60px;
   flex-direction: row;
   justify-content: space-between;
   z-index: 10000;
   color: #7C8966;
 }

 .filters__controls a{
   padding: 5px 10px 5px 10px;
   margin-right: 10px;
   background-color: #E7EAE1;
   border: 2px solid rgba(124, 137, 102, 0.5);
   border-radius: 10px;
   cursor: pointer;
   transition: all 0.2s ease;
}

.filters__controls a:hover {
   color: white;
   background-color: #7C8966;

}

.filters__controls a.active {
  color: rgb(255, 255, 255);
  background-color: #7C8966;
}



/* ITEMS */
.items{
   overflow: hidden;
}
.items__year{
   width: 100%;
   font-size: 20px;
   margin-top: 100px;
}
.items__projects{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 30px;
    margin-top: 20px;
 }
 .item{
   color: #444444;
 }

 .item a{
   color: #444444;
 }
 .item__images{
    position: relative;
    width: 100%;
 }

 .item__images video{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

 .item__gallery-1{
    width: 100%;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 15px;
    border-radius: 10px;
    overflow: hidden;
    z-index: 20;
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.3);
    border: 0.1px solid rgb(198, 198, 198);
      background-color: #E7EAE1;
 }

 .item__gallery-1 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
 }

 .item__gallery-2{
    width: 100%;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 30px;
    border-radius: 10px;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.3);
    border: 0.1px solid rgb(198, 198, 198);
   background-color: #E7EAE1;

 }

 .item__gallery-2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
 }

 .item__cover{
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 30;
    border: 0.1px solid rgb(198, 198, 198);
   background-color: #E7EAE1;
 }

 .item__cover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
 }

 .item__title{
   margin-top: 40px;
 }

 .item__categories{
   margin-top: 20px;
 }

 .item__category{
   padding: 5px 10px 5px 10px;
   border: 1px solid #7C8966;
   border-radius: 5px;
   background-color: #7C8966;
   color: white;
   font-size: 14px;
 }






 /* SINGLE */
 .project-header{
   font-size: 24px;
   color: black;
 }
 .button-back{
   font-size: 24px;
   border: none;
   cursor: pointer;
   position: absolute;
   padding: 0 0 0 0;
   background-color: #E7EAE1;
   top: 15px;
 }

 .project-title{
   text-align: center;
 }

 .project-images{
   display: grid;
   grid-template-columns: repeat(3,1fr);
   gap: 30px;
   margin-top: 30px;
 }

 .project-images__item{
   aspect-ratio: 1 / 1;
   border-radius: 10px;
   overflow: hidden;
   border: 0.5px solid black;
 }

 .project-images__item img,  .project-images__item video{
   width: 100%;
   height: 100%;
   object-fit: cover;
 }


 /* filtri pagina singola*/

 .filters{
   display: flex;
   position: sticky;
   background-color: #E7EAE1;
   padding: 50px 0 50px 0;
   top: 60px;
   font-size: 20px;
   flex-direction: row;
   justify-content: space-between;
   z-index: 10000;
   color: #7C8966;
 }

 .filters button{
   padding: 5px 10px 5px 10px;
   margin-right: 10px;
   background-color: #E7EAE1;
   font-size: 20px;
   border: 1px solid #7C8966;
   border-radius: 10px;
}