@font-face {
    font-family: "IBM";
    src: url("/FONTS/IBMPlexSans-Regular.woff2") format("woff2"),
    url("/FONTS/IBMPlexSans-Regular.woff") format("woff");
}

@font-face {
    font-family: "IBM1";
    src: url("/FONTS/IBMPlexSans-SemiBold.woff2") format("woff2"),
    url("/FONTS/IBMPlexSans-SemiBold.woff") format("woff");
}

html{
    scroll-behavior: smooth;
    cursor : url("cursor.png") 16 16 , pointer;
    opacity: 1;
}

a:hover{
    cursor: url("cursor.png") 16 16, auto;
}



body{
    background: #e1dcd1;
    color: black;
    /* google font */
    font-family: 'IBM', sans-serif;
    margin: 16px;
    margin-top: 70px;

}

.header{
    font-family: "IBM";
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    position: fixed; 
    top: -10px;
    left : -10px;
    right: -10px;
    background: #9453d9;
}

h2{
    color: black;
    font-family: 'IBM1', sans-serif;
}

h1{
    color: black;
    font-family: 'IBM1', sans-serif;
}

a{
    color:#9453d900;
}

a ul{
    color:#e1dcd1;

}


.item :hover h2{
    color: #9453d9;
}

.item :hover ul{
    color: white;
    font-family: 'IBM1';
}

.item :hover p{
    color: #9453d9;
}


img{
    max-width: 100%;
    display: block;
    filter:grayscale(1)

}

.imgp img{
    max-width: 100%;
    display: block;
    filter:grayscale(0)

}



.item{ 
    margin: 0px;
}

.grid{
    display: grid;
     grid-template-columns: repeat( auto-fit, minmax(120px, 300px) );
     gap:15px;
}

p {
    padding: 0px 0px 0px 0px;
}
.texte{
    padding: 80%;
    color: black;
}

.home {
    font-family: "IBM";
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    margin-bottom: 12px;
    background: #9453d9;
    top: 0;
    z-index:999;
    
}

.item:hover img {
    opacity: 0.1;
    width: 100%;
    opacity: 1;
    transition: 0.2s;
    filter:grayscale(0)
  }


  h4 {
    color: black;
    font-size: 25px;
    max-width: 480px;
    font-family: "IBM";
    display: grid;
    place-items: center;
    place-self: center;
  }

.cat-name {
    opacity: 0;
    transition: opacity .4s;
    display: block;
}


.grid-projet {
    display: grid;
     grid-template-columns: repeat( auto-fit, 3fr );
     gap:0px;

}



.grid-images {
    display: grid;
     grid-template-columns: repeat( auto-fit, 1fr 1fr 1fr );
     gap:0px;
    
}



.projetmtr{
    margin:0;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
 }
 
 .projetmtr figcaption{
    opacity:0.9;
}

.projetmtr img{
    background: #686763;
    padding:12px;
}

.gridmtr{
        grid-column: 1/4;
        align-content: center;
    }
    
    marquee{
        color:#4f006e;
    }