/* 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: 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);
}

*
{
    text-align: center;
}

    /* IMAGES */

    section {
        max-width: 45vw;
        margin: 50px auto auto 17vw;
        align-content: center;
        height: 100%;
        
        border-top: 1px solid #63C08E;

    }

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



        figcaption {
            font-size: 0.8em;
            font-family: Aileron;
            text-align: justify;
        }

img {
    max-width: 100px;
    max-height: 610px;
}

.portrait
{
    max-width: 40vw;
    max-height: 40vw;
}

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

    section p 
    {
        font-family: 'Aileron';
        text-align: justify;
    }

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

    h2 {
        color: #63C08E;
        text-align: left;
        font-family: 'Kobe';
        font-weight: 700;
        margin: 50px auto auto 17vw;
        font-size: 2rem;
        
    }

    h3 {
        color: #63C08E;
        text-align: left;
        font-family: 'Kobe';
        font-size: 1.1rem;
        font-weight: 700;
        
        
    }




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

    
        .flottant {
            height: 20vw;
        }
        
            section { font-size:1.8em; 
                margin: 5vw auto auto 26vw; }
        
           h2 {
            font-size:3em; 
            margin: 5vw auto auto 26vw;
           }

           h3 {
            font-size:0.7em; 
            font-family: 'Aileron';
           }
        }

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