*{
    margin: 0%;
    padding: 0%;
    top: 0%;
    
}
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;

font-family: 'Urbanist', sans-serif;
}


h6{
   color: white;
   padding: 10px;
}
.ImgProfile{
    width: 152px;
    height: 152px;
    border-radius: 10px;
    background:  1.695px -25.997px / 100% 149.817% no-repeat;
}
.boxProfilePhoto .ImgProfile{
    object-fit: cover;
    object-position: 20% 10%;
    overflow: hidden;
    width: 152px;
    height: 152px;
    border-radius: 10px;
    background:  1.695px -25.997px / 100% 149.817% no-repeat;
}

.boxBio{
    display: flex;
    height: 240px;
    padding-top: 40px;
 
    justify-content: center;
    align-items: center;
    gap: calc(25vw - 10%);
}

#boxContent{

 
    display: flex;
    flex-direction: column;
    justify-content: center;
  
    align-items: center;
    width: 170px;
    gap: 10px;
}
#boxContent p{

   display: flex;
   text-align: center;
 
  
    font-size: 16px;
}
#boxContent h1{
    font-size: 24px;
}



.boxVideo{
    position: absolute;
    width: 100%;
    height: auto;
    top: -5%;
    z-index: -1;
   
   
}
ul{
  

    display: flex;
    padding: 10px 0px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;

}
.BoxBtProjects{
    font-size: 16px;
    color: white;
    text-decoration: none;
    font-style: none;
    display: flex;
    padding: 10px 35px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    background: #212529 ;
    background-color: #212529;

}

.boxLetsTalk{
    color:#212529 ;
    font-size: 14px;
font-style: none;
text-decoration: none;
display: flex;
padding: 10px 25px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 5px;
border: 1px solid #000;

}

.icons{
    
    width: 35px;
    height: auto;
    padding: 10px;
    
}

.BoxPrd{
    display: flex;
   
    width: 300;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    height: auto;
    
}
.boxPr{
    width: 147px;
    height: 227px;
    background-color: red;
   
}








@media screen and (min-width: 1100px) {
    .boxVideo{
       top: -5%;
        
    }
    .icons{
    -webkit-filter: invert(100%); /* Safari/Chrome */
    filter: invert(100%);
    }

   
  }


  @media screen and (orientation:landscape) {

    p{
        color: white;
        
    }
    h1{
        color: white;
    }
    .boxLetsTalk{
        border: 1px solid #ffffff;
    }
  }