:root {
    --bois-de-printemps: #F3F0E8;
    --lin-satine: #E2DDCF;
    --gris-olive: #A8A08C;
    --gris-olive-pale: #cfc9bc;
    --huitre-pale: #958C77;
    --huitre-foncé: #635e51;
    --couleur-hover: #5c5545b5;
    --gris-olive-fonce: #bab39e;
    --swiper-theme-color: #8a8473;
}
/*
.backgroundmatter{
    position: absolute;
    z-index: -7;
    width:100vw;
    height:100vh;
    max-width: 100%;
    max-height: 100%;
}
    */

/*---------------------------Page Menu---------------------------*/

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

}
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--huitre-foncé);
    border-radius: 10px;
  }

   
html, body {
    min-height: 100vh; 
    max-height: 100vh; 
    overflow: hidden;
}
    

body{
    background-color: var(--bois-de-printemps);
    width:100vw;
    max-width: 100%;
    display:flex;
    align-items: center;
    

    
}

.container-menu{
    max-width: 100%;
    width: 100vw;
    display:flex;
    flex-direction: column;
    align-items: center;
    
    

}

.image-paysage{
    margin-top:10px;
    width: 300px;
}

.text-projet, .text-projet-personnel, .text-propos {
    font-family: "Instrument Serif" ;
    
    font-size: 55px;
    text-align: center;
    color:var(--gris-olive);
    
}
.menu{
    width:100vw;
    
}
.menu a{
    text-decoration: none;
}
.menu-projet, .menu-propos, .menu-projet-personnel{
  
    border:  3px solid var(--gris-olive);
    border-left: none;
    border-right: none;

}
.menu-projet-personnel{
    border-top: none;
}
.menu-propos{
    border-top: none;
}

.nom-menu{
    height:100%;
}


.text-prenom, .text-nom{
    /*
    
    font-family: "Instrument Serif" ;
    
    font-family: "MuseoModerno", sans-serif;

    font-family: "Archivo Narrow", sans-serif;
    
    font-family: "Montserrat", sans-serif;

    font-family: "Prata", serif;

    font-family: "Bodoni Moda", serif;

    font-family: "Libre Bodoni", serif;

    font-family: "Imbue", serif;

    font-family: "Playfair", serif;
    */
    
    
    
    font-family: "Instrument Serif" ;
    font-size: 150px;
    margin-top:10px;
    line-height: 0.7;
    color:var(--gris-olive);
    height:auto;
    margin-bottom: 1px;
    
    font-weight: 500;
  
}

.menu p{
    
    margin:0;
}

/*
@media(max-height:900px){
    body{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
}
    */

/*
.nom-background{
    font-family: "Instrument Serif" ;
    font-size: 300px;
    position: absolute;
    z-index:-1;
}
*/

.menu-projet:active{
  
    background-color: var(--lin-satine);

}

.menu-propos:active{
  
    background-color: var(--lin-satine);

}

.menu-projet-personnel:active{
  
    background-color: var(--lin-satine);

}
@media(min-height:1000px){
    .image-paysage{
        margin-top:10px;
        width: 400px;
        
    }
    .text-prenom, .text-nom{
        font-size:200px;
        margin-top:10px;
        line-height: 0.7;

    }

}

@media(min-width:1000px) and (max-width:1100px){
    .image-menu img {
        height:250px !important;
        width:360px !important;
    }
}

@media(min-width:1000px){
    .container-menu{
        width: 100vw;
        height:100vh;
        display:grid;
        grid-template-areas:
        "b b a a"
        "b b c c"
        "b b c c";
    
    }
    .menu{
        width:60vw;
        grid-area: a;
    }
    .image-menu{
        width:40vw;
        grid-area: b;
        height:100%;
        display:flex;
        justify-content: center;
        align-items: center;
        border-right:3px solid var(--gris-olive);
    }
    .image-menu img{
        height:300px;
        width:450px;
    }
    .nom-menu{
        width:60vw;
        grid-area: c;
        display:flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .text-prenom, .text-nom{
        
        font-size: 230px;
       line-height: 0.7;
       padding-top: 10px;
    }
    .text-prenom{
        padding-left: 8%;
    }
    .text-nom{
        text-align: end;
        padding-right:8%;
    }
    .text-projet, .text-projet-personnel, .text-propos {
        text-align: end;
        padding-right:20px;
        
        
    }
    .menu-projet:hover{
  
        background-color: var(--gris-olive-pale);
    
    }
    
    .menu-propos:hover{
      
        background-color: var(--gris-olive-pale);
    
    }
    
    .menu-projet-personnel:hover{
      
        background-color: var(--gris-olive-pale);
    
    }

}
/*
@media(max-width:500px) and (max-height:700px){
    .text-nom, .text-prenom{
        font-size: 100px;
    }
}
*/

@media(min-width:1700px){
    .text-prenom, .text-nom{
        
        font-size: 300px;
       line-height: 0.7;
       padding-top: 10px;
    }
    .image-menu img{
        height:400px;
        width:600px;
    }
    
}

/*---------------------------Page Menu Projet---------------------------*/

.body-projet{
    min-height: 100vh;
    overflow-y: auto;
    display:grid;
    
}

.projets{
    max-width: 100%;
    width: 100vw;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:0;

}

.container-projet{
    max-width: 100%;
    width: 100vw;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    

}
.container-projet a{
    text-decoration: none;
}
.accueil-bouton{
    
    font-family: "Inria Serif";
    font-style:italic;
    font-weight: bold;
    font-size:36px;
    color:var(--huitre-pale);
    margin-top:10px;
    
}

.accueil-bouton:hover{
    color:var(--huitre-foncé);

}




.text-projet1, .text-projet2, .text-projet3, .text-projet4{
    font-family:"Newsreader";
    font-size: 42px;
    text-align: center;
    color:var(--huitre-pale);
    margin-top: 70px;
    margin-bottom:20px;

}







.titre{
    font-family: "Inria Serif";
    font-style:italic;
    font-weight: lighter;
    font-size:85px;
    letter-spacing: 5px;
    color:var(--huitre-pale);
    margin-bottom:10px;

}




.projet1, .projet2, .projet3, .projet4{
    border:  3px solid var(--gris-olive);
    border-left: none;
    border-right: none;
    width:100vw;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index:0;
    
    
}


    
.projet2, .projet3, .projet4{
    border-top: none;
    
}
.bouton-debut{
    
    border:  3px solid var(--gris-olive);
    margin:70px;
    width:300px;
    height:60px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.bouton-debut:hover{
    background-color: var(--huitre-pale);
    .bouton{
        color:var(--gris-olive-pale);
    }
}

.image-projet1, .image-projet2, .image-projet3, .image-projet4{
    position: relative;
    height:180px;
    width:300px;
    margin-bottom: 40px;
    
    

}
.bouton{
    font-family: "Inria Serif";
    font-weight: bold;
    font-size:23px;
    color:var(--gris-olive);
    
    
}




@media(min-width:450px){
    .image-projet1, .image-projet2, .image-projet3, .image-projet4{
    
        height:260px;
        width:400px;
        margin-bottom: 40px;
        
        
    
    }

    
}

@media(min-width:600px){
    .image-projet1, .image-projet2, .image-projet3, .image-projet4{
        height:340px;
        width:590px;
        margin-bottom: 40px;
        
    
    }
}

@media(min-width:768px){
    .image-projet1, .image-projet2, .image-projet3, .image-projet4{
        height:410px;
        width:660px;
       
        
    
    }

}



@media(min-width:1200px){
    .body-projet{
        width:100vw;
        max-width: 100%;
        overflow-y: hidden;
        display:flex;
       
    }
    .container-projet{
        display:grid;
        grid-template-areas:
        "a a c c"
        "a a b b"
        "a a b b";
        justify-content: space-between;
    }
    

    .project-titre{
        grid-area: a;
        padding-left:5px;
       
        height:100vh;
    }

    .projets{
        width:70vw;
        grid-area:b;
        display:grid;
        grid-template-columns: auto auto;
        gap: 10px;
        
    }

    .accueil-menu{
        grid-area:c;
        position: absolute;
    }

    .bouton-debut{
        display:none;
    }

    .projet1, .projet2, .projet3, .projet4{
        /*
        width:536px;
        height:352px;
        */
        /*
        width:500px;
        height:300px;
        */
        width:35vw;
        height:23vw;
        max-width:100%;
        border:  none;
       
        
    }

    .image-projet1, .image-projet2, .image-projet3, .image-projet4{

        /*
        height:220px;
        width:380px;
        */
        position: relative;
        width:33vw;
        height:21vw;
        margin:0;
        z-index: 1;
        
    
    }

  

    

    .titre{
        writing-mode: tb-rl;
        font-size:200px ;
        vertical-align: middle;
        text-align: center;
        height:100%;
        border-right:  3px solid var(--gris-olive);
    }
    .accueil-menu{
        vertical-align: middle;
        text-align: center;
        height:50%;
        width:2px;
        position:relative;
        
        
    }

    .accueil-bouton{
        font-size: 2vw;
        writing-mode: tb-rl;
        margin-top: 50px;
        margin-left:-70px;
        position: absolute;
    }
    
   
   .text-projet1, .text-projet2, .text-projet3, .text-projet4{
    position:absolute;
    z-index: 2;
    font-family: "Inria Serif";
    font-style:italic;
    font-weight:600;
    margin: 0;
    left:0;
    right:0;
    font-size: 2.8vw;
    color:var(--bois-de-printemps);
    opacity: 0;
   }

   #containerhovergradient:hover::before{
    opacity: 0.5;
}

#containerhovergradient{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



#containerhovergradient::before{
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y),
        var( --lin-satine),
        transparent 40%
    );
    content:"";
    border-radius: inherit;
    height:100%;
    left:0px;
    position: absolute;
    top:0px;
    width:100%;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s;
    
}

.projets a:nth-child(1):active{
    background-color: var(--lin-satine);
}

.projets a:nth-child(2):active{
    background-color: var(--lin-satine);
}
.projets a:nth-child(3):active{
    background-color: var(--lin-satine);
}
.projets a:nth-child(4):active{
    background-color: var(--lin-satine);
}
   
  
   

    
}

@media(max-width:1300px){
    .projet1:active{
        background-color: var(--lin-satine);
    }
    .projet2:active{
        background-color: var(--lin-satine);
    }
    .projet3:active{
        background-color: var(--lin-satine);
    }
    .projet4:active{
        background-color: var(--lin-satine);
    }
    .projet1-container-hover{
        display:none;
    }
    .projet2-container-hover{
        display:none;
    }
    .projet3-container-hover{
        display:none;
    }
    .projet4-container-hover{
        display:none;
    }
   

}

.projet1-container-hover, .projet2-container-hover, .projet3-container-hover, .projet4-container-hover{
    position: absolute;
    width:33vw;
    height:21vw;
    background-color: var(--couleur-hover);
    z-index:2;
    opacity: 0%;
    transition: opacity 0.3s;
    cursor: pointer;
}


@media(min-width:1000px){
   .container-projet{
    max-height:80%;
   }
}


.projet1:hover{
    .projet1-container-hover{ 
        opacity:100%;
    }
    .text-projet1{
        opacity: 100%;
        transition: opacity 0.3s;
    }
    
    
}
.projet2:hover{
    .projet2-container-hover{ 
        opacity:100%;
    }
    .text-projet2{
        opacity: 100%;
        transition: opacity 0.3s;
    }
    
    
}
.projet3:hover{
    .projet3-container-hover{ 
        opacity:100%;
    }
    .text-projet3{
        opacity: 100%;
        transition: opacity 0.3s;
    }
    
    
}
.projet4:hover{
    .projet4-container-hover{ 
        opacity:100%;
    }
    .text-projet4{
        opacity: 100%;
        transition: opacity 0.3s;
    }
    
    
}


@media(max-width:450px){

    .text-projet1, .text-projet2, .text-projet3,.text-projet4{
        font-size: 30px;
    }
}



@media(min-width:1450px){
    .accueil-bouton{
        margin-left: -90px ;
    }
}

@media(min-width:1600px){
    .accueil-bouton{
        margin-left: -110px ;
    }
}

@media(min-width:1800px){
    .accueil-bouton{
        margin-left: -130px ;
    }
}

/*---------------------------Page Projet spécifique ---------------------------*/


.body-vengeance{
    min-height: 100vh;
    overflow-y: auto;
    display:grid;
    
}

.vengeance-main{
    width:100vw;
    max-width: 100%;
    display:flex;
    flex-direction: column;
    
}

.container-vengeance{
    max-width: 100%;
    width: 100vw;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    

}
.container-vengeance a{
    text-decoration: none;
}
.accueil-bouton{
    
    font-family: "Inria Serif";
    font-style:italic;
    font-weight: bold;
    font-size:30px;
    color:var(--huitre-pale);
    margin-top:10px;
    
}

.menu-bouton:hover{
    color:var(--huitre-foncé);

}



.description-container .description{
    
    font-family: "Inria Serif";
    font-weight: bold;
    font-size:20px;
    color:var(--huitre-pale);
    margin-top:10px;
    text-align: center;

}

.roles-container .roles-titre{
    font-family:"Newsreader";
    font-weight: bold;
    font-size: 25px;
    color:var(--huitre-pale);

}

.roles-container .roles{
    font-family: "Inria Serif";
    font-weight: bold;
    font-size:18px;
    color:var(--huitre-pale);
    margin-top:none;
   

}

.roles-container{
    margin-top:80px;
    margin-left:10px;
}

.logiciels-container{
    margin-top:80px;
    text-align: right;
    margin-right:18px;
}

.logiciels-container .logiciels-titre{
    font-family:"Newsreader";
    font-weight: bold;
    font-size: 25px;
    color:var(--huitre-pale);

}

.logiciels-container .logiciels{
    font-family: "Inria Serif";
    font-weight: bold;
    font-size:18px;
    color:var(--huitre-pale);
    margin-top:none;
   

}

.container-vengeance a {
    margin:0;
}

.vengeance-main a {
    text-decoration: none;
}
.lien-site{
    text-align: center;
    margin: 30px;
}
    
.lien-site .lien-titre {
    font-family: "Newsreader";
    font-weight:600;
    font-style: italic;
    font-size:22px;
    color:var(--huitre-pale);
    
}

.description-container{
    margin-top:50px;
    width:500px;
    align-self: center;
}

.lien-site .lien-titre:hover{
    color:var(--huitre-foncé);
}

.div-carousel{
    position: relative;
    max-width:100%;
    width:100vw;
}


.swiper-slide{
    width: 100vw;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   
    
}


.swiper-slide img, .video{
    width:390px;
    height:230px;

}

carousel-container{
    max-width:100%;
    width:100vw;
    

}



.swiper-button-prev{
margin-left:110px;
font-weight: 600;
}

.swiper-button-next{
    margin-right:110px;
    font-weight: 600;
}




.vengeance-titre .titre{
    font-family: "Inria Serif";
    font-style:italic;
    font-weight: lighter;
    font-size:65px;
    letter-spacing: 5px;
    color:var(--huitre-pale);
    
    

}

.qui-container{
    margin-top:80px;
    margin-left:10px;

}

.qui-container .qui-titre{
    font-family:"Newsreader";
    font-weight: bold;
    font-size: 25px;
    color:var(--huitre-pale);

}

.qui{
    font-family: "Inria Serif";
    font-weight: bold;
    font-size:18px;
    color:var(--huitre-pale);
    margin-top:none;

}







.bouton-debut{
    
    border:  3px solid var(--gris-olive);
    margin:70px;
    width:300px;
    height:60px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.bouton-debut:hover{
    background-color: var(--huitre-pale);
    .bouton{
        color:var(--gris-olive-pale);
    }
}

.container-bouton-swiper{
    width:100vw;
    max-width:100%;
    height:100px;
    position: relative;
    display:flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 20px;
}



.bouton{
    font-family: "Inria Serif";
    font-weight: bold;
    font-size:23px;
    color:var(--gris-olive);
    
    
}

@media(min-width:600px){
    .roles-container{
        text-align: center;
    }

    .logiciels-container{
        text-align: center;
    }

    .qui-container{
        text-align: center;
    }
    .description-container{
        margin-left:5px;
        margin-right:5px;
        width:600px;
        align-self: center;
    }
    .description-container .description{
        font-size: 19px;
    }
    .roles-container .roles-titre, .logiciels-container .logiciels-titre, .qui-container .qui-titre{
        font-size: 28px;
    }
    .roles-container .roles, .logiciels-container .logiciels, .qui-container .qui{
        font-size: 20px;
    }
    .vengeance-titre .titre {
        font-size: 90px;
    }
    .lien-site .lien-titre{
        font-size: 25px;
    }

    .swiper-slide img, .video{
        width:570px;
        height:300px;
    
    }
    

}

@media(min-width:800px){
    .swiper-slide img, .video{
        width:780px;
        height:420px;
    
    }
}

@media(min-width:900px){

    .swiper-button-prev{
        margin-left:250px;
        font-weight: 600;
    }

    .swiper-button-next{
        margin-right:250px;
        font-weight: 600;
    }

    .swiper-slide img, .video{
        width:780px;
        height:420px;
    
    }

        
        
}




@media(min-width:1200px){
    .body-vengeance{
        width:100vw;
        max-width: 100%;
        overflow-y: hidden;
        display:flex;
       
    }
    .container-vengeance{
        display:grid;
        grid-template-areas:
        "a a c c "
        "a a b b"
        "a a b b";
        justify-content: space-between;
    }

    .description-container{
        margin-top:30px;
    }
    

    .vengeance-titre{
        grid-area: a;
        padding-left:5px;
        height:100vh;
    }

    .container-information{
        display:flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        margin-top:40px;
        margin-bottom:3px;
    }



    .roles-container{
        margin:0;
    }
    .logiciels-container{
        margin:0;
    }
    .qui-container{
        margin:0;
    }
    

    .vengeance-main{
        width:70vw;
        grid-area:b;
        
        
    }

    .swiper-slide img, .video{
        
        width:780px;
        height:420px;
        
    
    }


    .swiper-slide{
        width:100vw;
        max-width:100%;
    }

    .carousel-container{
        overflow: hidden;
    }

    .lien-site{
        left:20%;
        margin-left: -650px;
    }

    .lien-site .lien-titre {
        font-size:1.8vw;
    }
   
   

    .accueil-menu{
        grid-area:c;
        position: absolute;
    }

    .container-bouton-swiper{
        position:absolute;
        top:40%;
        width:100vw;
    }



    .bouton-debut{
        display:none;
    }

    .swiper-button-prev{
        margin-left:30px;
        font-weight: 600;
    }

    .swiper-button-next{
        margin-right:30px;
        font-weight: 600;
    }

    


    

  

    

    .vengeance-titre .titre{
        writing-mode: tb-rl;
        font-size:120px ;
        vertical-align: middle;
        text-align: center;
        height:100%;
        border-right:  3px solid var(--gris-olive);
    }
    .accueil-menu{
        vertical-align: middle;
        text-align: center;
        height:50%;
        width:2px;
        position:relative;
        
        
    }

    .accueil-bouton{
        font-size: 2vw;
        writing-mode: tb-rl;
        margin-top: 50px;
        position: absolute;
    }
    
  

    
}


@media(min-width:1500px){
    .lien-site{
        margin-left: -720px;
    }
}

@media(min-width:1700px){
    .lien-site{
        margin-left: -820px;
    }
}

@media(min-width:1900px){
    .lien-site{
        margin-left: -920px;
    }
}

@media(min-width:2100px){
    .lien-site{
        margin-left: -1020px;
    }
}
    




@media(min-width:1000px){
   .container-vengeance{
    max-height:80%;
   }
}




@media(min-width:1450px){
    .container-vengeance a #boutonaccueil{
        margin-left: -65px ;
    }

    

    
}

@media(min-width:1600px){
    .accueil-bouton{
        margin-left: -160px ;
    }
}

@media(min-width:1800px){
    .accueil-bouton{
        margin-left: -180px ;
    }
}

@media(min-width: 1400px) and (min-height:900px){
   
    .container-bouton-swiper{
        width:90vw;
    }
    .swiper-slide img, .video{
        width:880px;
        height:500px;
    }
   
}

@media(min-width:2000px) and(min-height:1000px){
    .swiper-slide img, .video {
        max-width:100%;
        max-height:100%;
        width:1300px;
        height:1000px;

    }

}

@media(min-width:1900px) and (min-height:1050px){
    .swiper-slide img, .video {
        max-width:100%;
        max-height:100%;
        width:1200px;
        height:650px;

    }
}

/*
@media(min-width:1400px) and(max-width:1500px){
    .vengeance-titre .titre{
        background-color: aqua;
    }
}
*/

/*-----------------------------------------section projets personnels----------------------------------------*/


.swiper-slide .image-art1{
    width: 330px;
    height:400px;
}
.swiper-slide .image-art2{
    width: 390px;
    height:250px;
}

.swiper-slide .image-art3{
    width: 290px;
    height:430px;
}
.swiper-slide .image-art4{
    width: 310px;
    height:420px;
}
.swiper-slide .image-art5{
    width: 310px;
    height:420px;
}

@media(min-width:1400px){
    .swiper-slide .image-art1{
        width: 500px;
        height:600px;
    }
    .swiper-slide .image-art2{
        width: 800px;
        height:450px;
    }
    .swiper-slide .image-art3{
        width: 410px;
        height:630px;
    }
    .swiper-slide .image-art4{
        width: 460px;
        height:620px;
    }
    .swiper-slide .image-art5{
        width: 460px;
        height:620px;
    }
}


/*-----------------------------------------section page à propos ----------------------------------------*/

.presentation {
    font-family: "Inria Serif";
    font-weight: bold;
    font-size:20px;
    color:var(--huitre-pale);
    text-align: left;
    margin-bottom:50px;
    margin-left: 10px ;
    margin-right:10px;
    text-align: center;
}

.info-personnel{
    font-family: "Inria Serif";
    font-weight: bold;
    font-size:20px;
    color:var(--huitre-pale);
    text-align: left;
    margin-left: 10px ;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;


}

.icon{
    
    width:200px;
    background-color: #A8A08C;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    
}
.icon-info{
    width:50vw;
    max-width: 100%;
    display:flex;
    align-items: center;
    justify-content: center;

}

.icon-info i {
    font-size: 30px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}




.icon img {
    margin: 25px;
    width:80%;
}
.css{
    width:59% !important;
}
.Csharp{
    width: 100% !important;
}



.container-icons-competence{
    
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px;
    justify-content: center;
    
    /*
    display:flex;
    flex-wrap: wrap;
    margin: 0;
    justify-content: center;
    align-items: center;
    */
}

.photo{
    width:100vw;
    max-width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:20px;
    margin-bottom:50px;
    
}

.icon-info a{
    color: var(--huitre-pale);
    /*
    text-decoration: none !important;
    */
}

.photo img {
    border-radius: 10px;
    width:300px;
}

@media(min-width:600px){
    .presentation{
        text-align: center;
    }
    .info-personnel{
        text-align: center;
    }
}

@media(min-width:800px){
    .container-icons-competence{
        grid-template-columns: auto auto auto auto;
        gap:20px;
    }
    .icon{
        width:150px;
    }
}

@media(min-width:1300px) and (max-width:1500px){
    .icon{
        width:50px;
        height:50px;
        
    }

}

@media(min-width:1100px){
    .container-icons-competence{
        /*
        display:flex;
        flex-direction: row;
        */
        /*
        grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
        overflow: hidden;
        */
        grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
        
        gap:20px;
        margin-bottom: 20px;
    }
    
    
    .photo img {
        width:240px;
    }
    .figma {
        width:50% !important;
    }
    

}
@media(min-width:1500px){
    .icon {
        width:60px;
        height:60px;
    }

}

@media(min-width:1900px) and (min-height: 900px){
    .photo img {
        width:400px;
    }
    .icon{
        width:80px;
        height:80px;
        
    }

}