/* FONTS */
@font-face {
    font-family: 'Kobe';
    src: url('fonts/Kobe.otf');  
}

@font-face {
    font-family: 'Aileron', sans-serif;;
    src: url('fonts/Aileron-Regular.otf');  
}

/* PAGE */
body
{
    background-color: white;
    cursor: url('images/cursor-triangle.svg'), auto;
    /* cursor: crosshair;*/
    
     }

     a {
        cursor: url('images/cursoor.svg'), pointer;
    }

/* EN TÊTE */
    /* MENU STICKY */
    .menu-sticky {
        position: fixed;
        top: 0%;
        width: 100%;
        max-width: 16vw;
        height:100%;
        border-right: 1px solid red;
        color: #ff0000;
        background-color:rgb(248, 248, 248);
    }


            #menu {
                padding:0;
                margin:0;
                list-style:none;
                text-align: center;
                font-size: 1.2em;
                font-family: Aileron;
                
            }
            #menu ul {
                padding:0;
                margin:0;
                list-style:none;
                text-align: center;
            }

            #menu a {
                
                text-decoration: none;
                color: #ff0000;
                padding: 10px 0;
                font-family: Aileron;            
            }

            #menu ul li a, #menu li:hover li a {
                padding: 1px 0;
            }
            
            #menu a:hover  {
                text-shadow: 1px 1px 2px rgb(255, 255, 255), 0 0 1em rgb(255, 0, 217), 0 0 0.2em rgb(255, 122, 253);
            }

            #menu li li:hover a {
               
                
                font-size:1.2em;
                text-shadow: 1px 1px 2px rgb(255, 255, 255), 0 0 1em rgb(255, 0, 217), 0 0 0.2em rgb(255, 122, 253);
            }

            .logo {
    margin: 2vw auto auto auto ;
}

  h1 
{
    padding: 0px;
    font-family: 'Kobe';
    font-size: 2rem;
    color: rgb(255, 34, 0);
    
}
.menu2 {
    font-size: 0.7em;
    font-style: oblique;
}

footer {
    font-family: 'Aileron';
    font-size: 0.6em;
    color: rgb(255, 34, 0);
    padding: 5px;
    text-align: center;
}



a {
    color: rgb(255, 34, 0);

}



/* IMAGES */
.projet
{
max-height: 20vw;
max-width: 20vw;
margin: 20px auto 1px auto;
padding: 3px;
border: 1px solid #63C08E;
}


h5 {
margin: 20px auto auto 270px;
font-family: Kobe;
font-size: 20px;
}

.box {
    margin: 1vw 2vw 1vw 2vw ;
  }

  .conteneur {
    display: flex;
    flex-wrap: wrap;
    margin-left: 18vw;
    margin-bottom: 2vw;
}

.conteneur a {
    font-family: Aileron;
    font-size: 15px;
}
.conteneur a:hover  {
    text-shadow: 1px 1px 2px rgb(255, 255, 255), 0 0 1em rgb(255, 0, 217), 0 0 0.2em rgb(255, 122, 253);
    font-size: 16px;
    text-decoration: none;
}
/* RESPONSIVE */
@media screen and (max-width: 1000px) {
/* propriétés responsive */

.menu-sticky {
  
    max-width: 30vw;
}
    
        #menu { 
            font-size: 2.2em;
            word-break: break-word;
        }
    
        h1 { font-size: 2em; }
    
        .projet {
            max-height: 50vw;
            max-width: 50vw;
    
        }

    .conteneur {
  
        flex-direction: column;
        margin-left: 34vw;
    }

    .conteneur a {
        font-family: Aileron;
        font-size: 2em;
    }


    .flottant {
        height: 20vw;
    }

    .conteneur a:hover  {
        
        font-size: 2.3em;
       
    }
}