@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");
}
body{
    background: #e1dcd1;
    color: black;
    /* google font */
    font-family: 'IBM', sans-serif;
    margin: 16px;
    margin-top: 70px;

}

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

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


.header{
    font-family: "IBM";
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    position: fixed; 
    top: -10px;
    left : -10px;
    right: -10px;
    background: black;
}
.maingrid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    gap:12px;

}

figure{
    margin: 0;
    padding:0;
}

.p{
    grid-column : 1/3;
    grid-row: span 1;
}
h2{
    color: black;
    font-family: 'IBM2', sans-serif;
}

h1{
    color: black;
    font-family: 'IBM2', 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;
    margin: 0;

}


.item{ 
    margin: 0px;
}


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)
  }


  .p3{padding: 0px 0x 0px 0px;
    }

  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;
}

 
 .projetmtr figcaption{
    opacity:0.9;
}

.projetmtr img{
    filter:grayscale(0)
}


h1,
p {
    color:#000000;
    margin-bottom: -10px;
    font-family: 'IBM';
}

h2,
p {
    color: #9453d9;
    line-height: 15px;
    margin-top: 40px;
    
}

h3,
p {
    color: #f5f5f5;
    line-height: 0px;
    margin-top: 40px;
}

h4,
p {
    color: #f5f5f5;
    line-height: 15px;
    margin-top: 40px;
}

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

.formations {
    color: black;
font-size: 16px;
line-height: 21px;
}

.competences {
    color: black;
    font-size: 16px;
    line-height: 25px;
}

.experience {
    color: black;
    font-size: 16px;
    line-height: 20px; 
}

.competences strong{
    color: #9453d9 ;
    font-family: 'IBM1';
}

.experience strong{
    color: #9453d9 ;
    font-family: 'IBM1';
}

.experience strong1{
    font-family: 'IBM1';
}

.formations strong{
    color: #9453d9 ;
    font-family: 'IBM1';
}


@media (max-width:1260px){
    .maingrid{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:760px){
    .maingrid{
        grid-template-columns: 1fr;
    }
}

marquee{
    color:#8c15bb;
}

.bio-mtr {
    padding: 24px;
    color: #ffffff;
    background: rgba(104, 86, 116, 0.705);
    line-height: 20px;
    font-size: 16px;
    line-height: 1.2;
    max-width: 360px;
    min-width: 250px;
    max-height: 350px;
}