* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


@font-face {
    font-family: 'Clash-Grotesk-M';
    src: local('Clash-Grotesk'), url(font/ClashGrotesk-Medium.woff) format('woff');
}

@font-face {
    font-family: 'Clash-Grotesk-R';
    src: local('Clash-Grotesk'), url(font/ClashGrotesk-Regular.woff) format('woff');
}

@font-face {
    font-family: 'Clash-Grotesk-S';
    src: local('Clash-Grotesk'), url(font/ClashGrotesk-Semibold.woff) format('woff');
}

@font-face {
    font-family: 'Clash-Grotesk-L';
    src: local('Clash-Grotesk'), url(font/ClashGrotesk-Light.woff) format('woff');
}

body {
    background-color: black;
    transition: background-color 0.5s ease;
    margin-left: 5vw;
    margin-right: 5vw;
    padding-top:4vh;
}


html {
    font-size: 16px;
}
.greatissima { 
    font-family: Clash-Grotesk-S;
    font-size: 2.5rem;
    color: #ffffff;
    line-height: 4.5vh;

}

  /* MENU */
h3 {
    font-family: Clash-Grotesk-S;
    font-size: 1.8rem;
    color: #ffffff;
    line-height: 4vh;
    text-align: right;
}

.menu {
    display: flex;
    flex-direction: column;
    text-align: right;
    justify-content: center;
    padding-top: 18vh;
    gap:-3vh;
    margin-left: 5vw;
    padding-bottom: 20vh;
}
.menu a {
    text-decoration: none;
    color:#ffffff;
    transition: transform 0.2s ease;
    text-align: right;
    }

.menu h3{
    transition: transform 0.2s ease;

}
.menu h3:hover {
        transform: translateX(-20px);
    }

 .menu h3:active {
        transform: translateX(-40px);
 }

    


.color-buttons {
    padding-top: 15vh;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.color-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: solid 1.5px #ffffff;
    cursor: pointer;
    transition: transform 0.2s;
}

.color-btn:hover {
    transform: scale(1.25);
}

.black { background-color: black; }
.red { background-color: #E0482D; }
.blue { background-color: #036EE0; }
.yellow { background-color: #FC9B0A; }





/* WORKS */

#sez-works {
    display: flex;
    flex-direction: column;
}

h1 { 
    font-family: Clash-Grotesk-S;
    font-size: 2.7rem;
    color: #ffffff;
    line-height: 6vh;

}

/* PING PONG*/

.pingpong {
    padding-top: 10vh;
    padding-bottom: 20px; 
}

h2 {
    font-family: Clash-Grotesk-L;
    color: #ffffff;
    font-size: 1.8rem;
}

h5 { 
    font-family: Clash-Grotesk-R;
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 0px;
}

.parolechiave-pingpong{
    display: flex;
    flex-direction: row;
    padding-top: 3vh;
}

.parolechiave-pingpong-uno {
    padding: 4px;
    border: solid thin #ffffff;
    border-radius: 4px;
    padding-left: 10px ;
    padding-right: 10px;
}

.parolechiave-pingpong-due {
    margin-left: 12px;
    padding: 4px;
    padding-left: 35px;
    padding-right: 35px;
    border: solid thin #ffffff;
    border-radius: 4px;  
}


.testo-pingpong{
    padding-top: 5vh;
    font-family: Clash-Grotesk-R;
    color: #ffffff;
    font-size: 1rem;
    line-height: 18px;
}

.immagini-pingpong{
    padding-top: 5vh;
}
.immagini-pingpong img, video{
    width:100%;
    height: auto;
    padding-top:1vh;
}
.gruppo1-pingpong{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:1%;
}
/* citta della tipografia*/

.scopriamo {
    padding-top: 20vh;
    padding-bottom: 20px; 
}

h2 {
    font-family: Clash-Grotesk-L;
    color: #ffffff;
    font-size: 1.8rem;
}

h5 { 
    font-family: Clash-Grotesk-R;
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 0px;
}

.parolechiave-scopriamo{
    display: flex;
    flex-direction: row;
    padding-top: 3vh;

}

.parolechiave-scopriamo-uno {
    padding: 4px;
    border: solid thin #ffffff;
    border-radius: 4px;
    padding-left: 23px ;
    padding-right: 23px;
}

.parolechiave-scopriamo-due {
    margin-left: 12px;
    padding: 4px;
    padding-left: 11px ;
    padding-right: 11px;
    border: solid thin #ffffff;
    border-radius: 4px;  
}

.parolechiave-scopriamo-tre {
    margin-left: 12px;
    padding: 4px;
    padding-left: 35px ;
    padding-right: 35px;
    border: solid thin #ffffff;
    border-radius: 4px;  
}

.immagini-scopriamo{
    padding-top: 5vh;
}
.immagini-scopriamo img{
    width:100%;
    height: auto;
    padding-top:1vh;
}

.gruppo1-scopriamo{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:1.5%;
}

.gruppo1-scopriamo img{
    width:49.2%;
    height: auto;
}

.gruppo2-scopriamo{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:1.5%;
}

.gruppo2-scopriamo img{
    width:49.2%;
    height: auto;
}


.testo-scopriamo{
    padding-top: 3vh;
    font-family: Clash-Grotesk-R;
    color: #ffffff;
    font-size: 1rem;
    line-height: 18px;
}

/* empty rule*/

.emptyrule {
    padding-top: 20vh;
    padding-bottom: 20px; 
}

h2 {
    font-family: Clash-Grotesk-L;
    color: #ffffff;
    font-size: 1.8rem;
}

h5 { 
    font-family: Clash-Grotesk-R;
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 0px;
}

.parolechiave-emptyrule{
    display: flex;
    flex-direction: row;
    padding-top: 3vh;
}

.parolechiave-emptyrule-uno {
    padding: 4px;
    border: solid thin #ffffff;
    border-radius: 4px;
    padding-left: 16px ;
    padding-right: 16px;
}

.parolechiave-emptyrule-due {
    margin-left: 12px;
    padding: 4px;
    padding-left: 12px ;
    padding-right: 12px;
    border: solid thin #ffffff;
    border-radius: 4px;  
}

.parolechiave-emptyrule-tre {
    margin-left: 12px;
    padding: 4px;
    padding-left: 26px ;
    padding-right: 26px;
    border: solid thin #ffffff;
    border-radius: 4px;  
}
.testo-emptyrule{
    padding-top: 3vh;
    font-family: Clash-Grotesk-R;
    color: #ffffff;
    font-size: 1rem;
    line-height: 18px;
}

.immagini-emptyrule{
    padding-top: 5vh;
}
.immagini-emptyrule video{
    width:100%;
    height: auto;
}
.immagini-emptyrule img{
    width:100%;
    height: auto;
    padding-bottom:1vh;
}

.gruppo1-emptyrule{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:1.5%;
}


/* endless*/

.endless {
    padding-top: 20vh;
    padding-bottom: 20px; 
}

h2 {
    font-family: Clash-Grotesk-L;
    color: #ffffff;
    font-size: 1.8rem;
}

h5 { 
    font-family: Clash-Grotesk-R;
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 0px;
}

.parolechiave-endless{
    display: flex;
    flex-direction: row;
    padding-top: 3vh;
}

.parolechiave-endless-uno {
    padding: 4px;
    border: solid thin #ffffff;
    border-radius: 4px;
    padding-left: 11px ;
    padding-right: 11px;
}

.parolechiave-endless-due {
    margin-left: 12px;
    padding: 4px;
    padding-left: 38px ;
    padding-right: 38px;
    border: solid thin #ffffff;
    border-radius: 4px;  
}

.immagini-endless{
    padding-top: 5vh;
}
.immagini-endless img{
    width:100%;
    height: auto;
    padding-top:1vh;
}
.gruppo1-endless{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:1.5%;
}

.testo-endless{
    padding-top: 3vh;
    font-family: Clash-Grotesk-R;
    color: #ffffff;
    font-size: 1rem;
    line-height: 18px;
}


/* contraddizione*/

.contraddizione {
    padding-top: 20vh;
    padding-bottom: 20px;
}

h2 {
    font-family: Clash-Grotesk-L;
    color: #ffffff;
    font-size: 1.8rem;
}

h5 { 
    font-family: Clash-Grotesk-R;
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 0px;
}

.parolechiave-contrad{
    display: flex;
    flex-direction: row;
    padding-top: 3vh;
}

.parolechiave-contrad-uno {
    padding: 4px;
    border: solid thin #ffffff;
    border-radius: 4px;
    padding-left: 13px ;
    padding-right: 13px;
}

.parolechiave-contrad-due {
    margin-left: 12px;
    padding: 4px;
    padding-left: 37px ;
    padding-right: 37px;
    border: solid thin #ffffff;
    border-radius: 4px;  
}

.gruppo1-contrad{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:1.5%;
}

.immagini-contraddizione{
    padding-top: 5vh;
}

.immagini-contraddizione video{
    width:100%;
    height: auto;
}
.immagini-contraddizione img{
    width:100%;
    height: auto;
    padding-bottom:1vh;
}

.testo-contrad{
    padding-top: 3vh;
    font-family: Clash-Grotesk-R;
    color: #ffffff;
    font-size: 1rem;
    line-height: 18px;
}

/* CCSF*/

.ccsf {
    padding-top: 20vh;
    padding-bottom: 20px; 
}

h2 {
    font-family: Clash-Grotesk-L;
    color: #ffffff;
    font-size: 1.8rem;
}

h5 { 
    font-family: Clash-Grotesk-R;
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 0px;
}

.parolechiave-ccsf{
    display: flex;
    flex-direction: row;
    padding-top: 3vh;
}

.parolechiave-ccsf-uno {
    padding: 4px;
    border: solid thin #ffffff;
    border-radius: 4px;
    padding-left: 16px ;
    padding-right: 16px;
}

.parolechiave-ccsf-due {
    margin-left: 12px;
    padding: 4px;
    padding-left: 12px ;
    padding-right: 12px;
    border: solid thin #ffffff;
    border-radius: 4px;  
}

.parolechiave-ccsf-tre {
    margin-left: 12px;
    padding: 4px;
    padding-left: 26px ;
    padding-right: 26px;
    border: solid thin #ffffff;
    border-radius: 4px;  
}
.testo-ccsf{
    padding-top: 3vh;
    font-family: Clash-Grotesk-R;
    color: #ffffff;
    font-size: 1rem;
    line-height: 18px;
}

.immagini-ccsf{
    padding-top: 5vh;
    padding-bottom: 50vh;
}
.immagini-ccsf video{
    width:100%;
    height: auto;
}
.immagini-ccsf img{
    width:100%;
    height: auto;
    padding-bottom:1vh;
}


#sez-about{
    padding-bottom: 35vh;
}
.testo-about{
    font-family: Clash-Grotesk-R;
    font-size:1.4rem;
    color: #ffffff;
    line-height: 30px;
    padding-top: 10vh;

}

.testo-contacts{
    font-family: Clash-Grotesk-R;
    font-size:1.4rem;
    color: #ffffff;
    line-height: 30px;
    padding-top: 10vh;
    padding-bottom:35vh;
}

.parolebold{
    font-family: Clash-Grotesk-S;
    font-size:1.4rem;
}






/* media query (text) */
@media (min-width: 376px) {
    .greatissima{
        font-family: Clash-Grotesk-S;
        font-size: 2.7rem;
        color: #ffffff;
        line-height: 4.7vh;

    }
    
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .greatissima{
        font-family: Clash-Grotesk-S;
        font-size: 3rem;
        color: #ffffff;
        line-height: 5vh;

    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .greatissima{
        font-family: Clash-Grotesk-S;
        font-size: 3.5rem;
        color: #ffffff;
        line-height: 5.6vh;

    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    body {
        background-color: black;
        transition: background-color 0.5s ease;
        margin-left: 15vw;
        margin-right: 15vw;

    }
    
    .greatissima{
        font-family: Clash-Grotesk-S;
        font-size: 5rem;
        color: #ffffff;
        line-height: 7vh;
        margin-left: -12vw;
        width:110%;
        position: center;

    }
    h1 { 
        font-size: 5rem;
        
    }
    
      /* MENU */
    h3 {
        font-family: Clash-Grotesk-S;
        font-size: 2rem;
        color: #ffffff;
    }
    
    .menu {
        display: flex;
        flex-direction: column;
        text-align: flex-end;
        justify-content: center;
        padding-top: 19vh;
        gap:0.5vh;
        margin-right: -5vw;
        margin-left: 72vw;
        width: 10%;
    }
    .menu a {
        text-decoration: none;
        color:#ffffff;
    }

    .menu h3{
        text-align: right;
        transition: transform 0.2s ease;
    
    }
    .menu h3:hover {
            transform: translateX(-20px);
        }
    
     .menu h3:active {
            transform: translateX(-40px);
     }

    
    .color-buttons {
        padding-top: 20vh;
        display: flex;
        justify-content: center;
        gap: 15px;
    }
    
    .color-btn {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        border: solid 1.8px #ffffff;
        cursor: pointer;
        transition: transform 0.2s ease;
    }
    
    .color-btn:hover {
        transform: scale(1.25);
    }
    .color-btn:active {
        transform: scale(1.35);
    }
    
    .black { background-color: black; }
    .red { background-color: #E0482D; }
    .blue { background-color: #036EE0; }
    .yellow { background-color: #FC9B0A; }

    .pingpong {
        display: flex;
        flex-direction: column;
        align-items: center; 
      }
    
      .testo-iniziale {
        display: flex;
        flex-direction: row; 
        justify-content: space-between; 
        align-items: baseline; 
        width: 100%; 
      }
      
      .titolo-parolechiave,
      .testo-pingpong {
        width: 47%; 
      }
    
    .parolechiave-pingpong{
        font-size:1.4rem;
        padding-top: 1vh;

    }
    .gruppo1-pingpong{
        display: flex;
        flex-direction: row;
        gap:1.2%;
    }
    
    .gruppo1-pingpong video{
        width:40%;
        height:auto;
    }
    .gruppo1-pingpong img{
        width:58.6%;
        height:auto;
    }
    
    .testo-pingpong {
        padding-left:0vw;
        font-size:1.2rem;
        line-height: 23px;
        font-family: Clash-Grotesk-L;
    }

    .scopriamo {
        display: flex;
        flex-direction: column;
        align-items: center; 
      }
    
      .testo-iniziale {
        display: flex;
        flex-direction: row; 
        justify-content: space-between;
        align-items: baseline; 
        width: 100%; 
      }
      
      .titolo-parolechiave,
      .testo-scopriamo {
        width: 47%; 
      }

      .parolechiave-scopriamo{
        font-size:1.2rem;
        padding-top: 1vh;

    }
    .gruppo1-scopriamo{
        gap:1.1%;
        flex-wrap: nowrap;
    }
    .gruppo1-scopriamo img{
        width:24.15%;
        height:auto;
    }
    .gruppo2-scopriamo{
        gap:1.1%;
        flex-wrap: nowrap;
    }
    .gruppo2-scopriamo img{
        width:24.15%;
        height:auto;
    }

    .testo-scopriamo {
        padding-left:0vw;
        font-size:1.2rem;
        line-height: 20px;
        font-family: Clash-Grotesk-L;
    }

    .emptyrule {
        display: flex;
        flex-direction: column;
        align-items: baseline; 
      }
    
      .testo-iniziale {
        display: flex;
        flex-direction: row; 
        justify-content: space-between; 
        align-items: baseline; 
        width: 100%; 
      }
      
      .titolo-parolechiave,
      .testo-emptyrule {
        width: 47%; 
      }

      .parolechiave-emptyrule{
        font-size:1.2rem;
        padding-top: 1vh;

    }

    .immagini-emptyrule video{
        width:100%;
        height:auto;
    }
    .gruppo1-emptyrule{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

    }
    .gruppo1-emptyrule {
        gap:1%;
        flex-wrap: wrap;
    }

    .gruppo1-emptyrule img{
        width:49.5%;
        height:auto;
    }

    .testo-emptyrule {
        padding-left:0vw;
        font-size:1.2rem;
        line-height: 23px;
        font-family: Clash-Grotesk-L;
    }

    .endless {
        display: flex;
        flex-direction: column;
        align-items: baseline; 
      }
    
      .testo-iniziale {
        display: flex;
        flex-direction: row; 
        justify-content: space-between; 
        align-items: baseline; 
        width: 100%; 
      }
      
      .titolo-parolechiave,
      .testo-endless {
        width: 47%; 
      }

      .parolechiave-endless{
        font-size:1.2rem;
        padding-top: 1vh;

    }
    .gruppo1-endless{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:1.2%;
}

    .gruppo1-endless {
        gap:1.1%;
        flex-wrap: nowrap;
    }

    .gruppo1-endless img{
        width:32.6%;
        height:auto;
    }

    .testo-endless {
        padding-left:0vw;
        font-size:1.2rem;
        line-height: 20px;
        font-family: Clash-Grotesk-L;
    }

    .contraddizione {
        display: flex;
        flex-direction: column;
        align-items: baseline; 
      }
    
      .testo-iniziale {
        display: flex;
        flex-direction: row; 
        justify-content: space-between; 
        align-items: baseline; 
        width: 100%; 
      }
      
      .titolo-parolechiave,
      .testo-contrad {
        width: 47%; 
      }

      .parolechiave-contrad{
        font-size:1.2rem;
        padding-top: 1vh;

    }

    .immagini-contraddizione video{
        width:100%;
        height:auto;
    }

    .gruppo1-contrad {
        gap:1%;
        flex-wrap: wrap;
    }

    .gruppo1-contrad img{
        width:49.4%;
        height:auto;
    }

    .testo-contrad {
        padding-left:0vw;
        font-size:1.2rem;
        line-height: 23px;
        font-family: Clash-Grotesk-L;
    }

    .ccsf {
        display: flex;
        flex-direction: column;
        align-items: baseline; 
      }
    
      .testo-iniziale {
        display: flex;
        flex-direction: row; 
        justify-content: space-between; 
        align-items: baseline; 
        width: 100%; 
      }
      
      .titolo-parolechiave,
      .testo-ccsf {
        width: 47%; 
      }

      .parolechiave-ccsf{
        font-size:1.2rem;
        padding-top: 1vh;

    }

    .immagini-ccsf video{
        width:100%;
        height:auto;
    }

    .testo-ccsf {
        padding-left:0vw;
        font-size:1.2rem;
        line-height: 23px;
        font-family: Clash-Grotesk-L;
    }
    
    .testo-about{
        font-size: 2rem;
        line-height: 45px;
    }

    .parolebold{
        font-size: 2rem;
    }

    .testo-contacts{
        font-size: 2rem;
        line-height: 45px;

    }


}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .greatissima{
        font-family: Clash-Grotesk-S;
        font-size: 5rem;
        color: #ffffff;
        line-height: 7vh;
        margin-left: -12vw;
        position: center;

    }
}