/*Feuille de style pour les media queries*/

    @media screen and (max-width: 1000px) and (min-width: 800px) and (orientation: portrait){
        *{
            font-size: x-large;
        }
        body{
            flex-direction: column;
        }
        main {
            width: 85vw;
            margin: 0 7.5vw;
            margin-top: 8VH;
            padding-left: 2.5vw;
            padding-right: 2.5vw;
        }
        main > img{
            max-width: 85vw;
        }
        p{
            width: 90%;
            margin: 5% 5%;
        }
        nav{
            display: inline-block;
        }
        .main_img{
            width: 80vw;
        }
        #menu {
            position: absolute;
            margin-top: 5.5em;
        }
        #menu > ul{
            display: none;
            max-width: 2em;
        }
    
        #menu > ul > li.menu a{
            font-size: 1.5em;
            text-align: center;
        }
        input[type="checkbox"]:checked + label + #menu > ul{
            max-width: 2em;
            max-height: 38em;
            display: block;
        }
        #image_bouton{
            border: 10px solid #F7931A;
            width: 5em;
            height: 5em;
            border-radius: 15px;
            position: absolute;
        }
        main > img {
            margin-left: 10%;
            border: 1px solid black;
            margin-bottom: 4%;
            width: 75%;
        }
    }

    @media screen and (max-width: 800px) and (min-width: 300px) and (orientation: portrait){
        *{
            font-size:medium;
        }
        body{
            flex-direction: column;
        }
        main {
            width: 85vw;
            margin: 0 7.5vw;
            margin-top: 8VH;
            padding-left: 2.5vw;
            padding-right: 2.5vw;
        }
        main > img{
            max-width: 85vw;
        }
        p{
            width: 90%;
            margin: 5% 5%;
        }
        nav{
            display: inline-block;
        }
        .main_img{
            width: 80vw;
        }
        #menu {
            position: absolute;
            margin-top: 5.5em;
        }
        #menu > ul{
            display: none;
            max-width: 2em;
        }
    
        #menu > ul > li.menu a{
            font-size: 1.5em;
        }
        input[type="checkbox"]:checked + label + #menu > ul{
            max-width: 2em;
            max-height: 38em;
            display: block;
        }
        #image_bouton{
            border: 10px solid #F7931A;
            width: 5em;
            height: 5em;
            border-radius: 15px;
            position: absolute;
        }
        main > img {
            margin-left: 10%;
            border: 1px solid black;
            margin-bottom: 4%;
            width: 75%;
        }
    }
    @media screen and (max-width: 1000px) and (min-width: 500px) and (orientation : landscape){
        *{
            font-size: x-large;
        }
    }