@media screen and (min-height:56.25vw){
    .corp{
        margin-top: calc((100vh - 56.25vw) / 2) ;
        height: 56.25vw;
    }

    /*Accueil */
    #myVideo {
        bottom: calc((100% - 56.25vw) / 2);
    }
    #boutonsAccueil button {
        width: 40%;
        margin-left: 30%;
        margin-bottom: 1%;
        font-size: 0.8em;
        padding: 1%;
    }
    #logoTeam{
        bottom: calc((100vh - 56.25vw) / 2 + 5px) ;
    }
    #logoPSM{
        bottom: calc((100vh - 56.25vw) / 2 + 5px) ;
    }

    #imgSon{
        width: 5vw;
        height: 5vw;
        top: calc((100vh - 56.25vw) / 2 + 5px) ;
    }
    #imgFull{
        width: 5vw;
        height: 5vw;
        top: calc((100vh - 56.25vw) / 2 + 5px) ;
        left: 6vw;
    }

    #tutoClose, #creditClose{
        top: calc((100vh - 56.25vw) / 2 + 7%);
    }
    #imgTuto , #imgCredit{
        top: calc((100vh - 56.25vw) / 2 + 5%);
    }


    #nomPerso {
        bottom: calc((100vh - 56.25vw) / 2 + 19.1vw);
    }

    .btn {
        padding: 0.3vh 0.5vh;
    }

    .btn-grid {
        margin-top: 1vh;
        margin-bottom: -0.9vh;
    }




}

@media screen and (min-width:177vh){
    .corp{
        margin-left: calc((100vw - 177vh) / 2) ;
        width: 177vh;
    }


    #stickers{
        width: 15vh;
    }



    /*Accueil*/
    #myVideo {

        width: 177vh;
        height: 100vh;
        left: calc((100% - 177vh) / 2);
    }

    #logoTeam{
        right: calc((100vw - 177vh) / 2 + 5px) ;
    }

    #logoPSM{
        left: calc((100vw - 177vh) / 2 + 5px) ;
    }

    #logoAccueil{
        width: 60vh;
        padding-left: 58vh;
        padding-top: 1vh;
    }


    #imgSon{
        left: calc((100vw - 177vh) / 2 + 5px) ;
    }
    #imgFull{
        left: calc((100vw - 177vh) / 2 + 10px + 10vh) ;
    }
    #imgTuto , #imgCredit{
        width: 150vh;
        right: calc((100vw - 177vh) / 2 + 15vh) ;
    }
    #tutoClose, #creditClose{
        width: 10vh;
        right: calc((100vw - 177vh) / 2 + 17vh) ;
    }


    .container{
        display: flex;
        width: 100vw;
        max-width: 100%;
        height: 20vw;
        background-color: white;
        padding: 10px;
        border-radius: 5px;
        position: absolute;
        display: none;
        border-width: 5px;
        margin-left: 0vw;
    }


    #nomPerso {
        left: calc((100vw - 177vh) / 2) ;
    }


    #tropheWorld{
        position: absolute;
        top: 70%;
        left: 55%;
    }
    #tropheWorld>img{
        width: 12vh;
    }

    #f18>img,
    #fg16>img,
    #fd16>img,
    #f16>img,
    #f15>img,
    #cabine>img,
    #goP>img,
    #toilette>img,
    #fg15>img,
    #fg14>img,
    #fg13>img,
    #fg11>img,
    #fg8>img,
    #fg7>img,
    #f6>img,
    #fg6>img,
    #fg4>img,
    #f>img,
    #fg3>img{
        width: 15vh;
    }


    #passDetecteur{
        top: 52vh;
        width: 10vh;
        height: 10vh;
        left: 24vh;
    }


    #listeInventaire{
        z-index: 998;
        position: absolute;
        top: 10%;
        right: 1%;
        width: 5%;
        height: 0;
        background-color: #4B7E03;
        transition: 1s;
        border-radius: 10px ;
        overflow: hidden;
    }

    #listeInventaire img:first-child{
        margin-top: 4vh;
    }
    #listeInventaire img{
        padding-left: 2vh;
        height: 7vh;
        width: 7vh;
    }

    #nbrPièces {
        font-family: 'Bungee', cursive;
        position: absolute;
        margin-top: -6vh;
        margin-left: 6.5vh;
        color: white;
        font-size: 3vh;
    }

}