/* 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: rgb(241, 241, 241);
    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: 250px;
        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 {
                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;
            }

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

*
{
    text-align: center;
}

    /* IMAGES */

    section {
        max-width: 100vw;
        margin: 2vw auto auto 17vw;
        padding: auto;
        align-content: center;
        height: 100%;

    }

    .container {
        display: flex;
        flex-wrap: wrap;
        margin: auto auto auto 100px;
        }

        .box {
            margin-left:0.5vw;
            margin-bottom:0.5vw;
        }

        figcaption {
            font-size: 0.8em;
            font-family: Aileron;
            text-align: center;
        }
        .container1 {
            display: flex;
            flex-wrap: wrap;
            justify-content:center;
            align-items: flex-end;
        }

        
.trombi
{
max-width: 13VW;

}


.projet10
{

width: 67vw;

}

img:hover{
    opacity: 0.5;
}

/* TEXTE */  
    *
    {
        text-align: center;
    }

    p 
    {
        font-family: 'Aileron';
    }

    .introduction
    {
        color: rgb(35, 55, 6); 
        font-weight: 400;
        font-style: italic;
        text-decoration: underline;
    }



   /* RESPONSIVE */
   @media screen and (max-width: 1000px) {
    /* propriétés responsive */
    
    .menu-sticky {
      
        max-width: 25vw;
    }
        
            #menu { 
                font-size: 2.2em;
                word-break: break-word;
            }
        
            h1 { font-size: 2em; }

    
        .flottant {
            height: 20vw;
        }

        .trombi
        {
            max-height: 60vw;
            max-width: 60vw;
            min-height: 60vw;
            min-width: 60vw;
           
        }

        figcaption {
            font-size: 2em;

        }

        .projet10
        {
            max-height: 60vw;
            max-width: 60vw;
            margin: 2vw auto auto 10vw;
            
        }
    }