/* 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;*/
    height:100%;
     }

     #bloc_page
     {
         width: auto;

     }

     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.2rem;
            font-family: Aileron;
            
        }
        #menu ul {
            padding:0;
            margin:0;
            list-style:none;
            text-align: center;
        }

        #menu a {
            display:block;
            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.6rem;
color: rgb(255, 34, 0);
padding: 5px;
text-align: center;
}



/* IMAGES */

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    align-items: flex-end;
    
}
.container1 {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    align-items: flex-end;
    
}
.projet1
{
max-height: 30vw;
max-width: 30vw;
margin: 2vw 1vw 0vw 0vw;

}

.projet2
{
max-height: 75vw;
max-width: 75vw;
margin: 0vw 1vw 1vw 0vw;
}

.projet3
{
max-height: 34vw;
max-width: 35vw;
margin: 1vw 1vw 1vw 0vw;
}

.projet4
{
max-height: 15vw;
max-width: 15vw;
margin: 2vw 1vw 0vw 0vw;
}

.projet5
{
max-height: 20vw;
max-width: 20vw;
margin: 2vw 1vw 0vw 0vw;
}

.projet6
{
max-height: 55vw;
max-width: 55vw;
margin: 2vw 1vw 0vw 0vw;
}

.projet8
{
max-height: 45vw;
max-width: 35vw;
margin: 1vw 1vw 1vw 0vw;
}

.projet7
{
max-height: 38vw;
max-width: 43vw;
margin: 1vw 0vw 0vw 0vw;
}

.projet10
{

width: 65vw;
margin: 0vw 1vw 1vw 0vw;
}

a
{
   text-decoration: none; 
   color: rgb(255, 34, 0);
}
/* 
.container {
    display: grid;
    grid-template-columns: 250px 250px 250px 250px 250px;
    gap: 20px;
}
*/

/* TEXTE */  
#contenu {
    margin-left:17vw;
    height:100%;
    }

.conteneur {
display: flex;
flex-wrap: wrap;
align-content: center;

}

section p {
    font-size: 1em;
    font-family: Aileron;
    align-content: center;
    line-height: 1.5;
}

.texte { padding: 2vw 15vw 2vw 15vw;}

figcaption {
    font-size: 0.7em;
    font-family: Aileron;
    text-align: center;
}

.container1 figcaption {
    text-align: left;
    font-size: 0.9em;
    font-weight: 600;
}

#col {
    column-count: 2;
    padding: 2vw;
    text-align: center;
    text-align: left;
  }

h3 {
    
    font-family: Kobe;
    font-size: 2em;
    text-align: center;
}

h4 {
    
    font-family: Kobe;
    font-size: 1.5em;
    text-align: center;
   
}




@media screen and (max-width: 1000px) {
    /* propriétés responsive */

    .menu-sticky {
display: flex;
flex-direction: column;
width: 300px;
    }

    #menu { 
        font-size: 2em;
        word-break: break-word;
    }

    h1 { font-size: 1em; }

    section { font-size:2em;  }

    .texte { padding: 2vw 2vw 2vw 2vw; }


  

    .projet1
{
max-height: 75vw;
max-width: 75vw;
margin: 2vw 1vw 0vw 0vw;

}

.projet2
{
max-height: 75vw;
max-width: 75vw;
margin: 1vw 1vw 1vw 0vw;
}

.projet3
{
max-height: 35vw;
max-width: 35vw;
margin: 1vw 1vw 1vw 0vw;
}

.projet4
{
max-height: 15vw;
max-width: 15vw;
margin: 2vw 1vw 0vw 0vw;
}

.projet5
{
max-height: 20vw;
max-width: 20vw;
margin: 2vw 1vw 4vw 0vw;
}

.projet6
{
    max-height: 75vw;
    max-width: 75vw;
    margin: 2vw 1vw 0vw 0vw;
}

.projet7
{
    max-height: 75vw;
    max-width: 75vw;
    margin: 2vw 1vw 0vw 0vw;
}

    }