@media screen and (min-aspect-ratio: 1/1) {   /* largeur est superieur ou égale à la hauteur (ordi) */
    body{
        display: none;
    }
}

@media screen and (max-aspect-ratio: 1/1) {    /* largeur est inférieure ou égale à la hauteur (mobiles) */

    body{
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #logo_container{
        position: absolute;
        top: 5%;
        width: 100%;
        height: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #logo_container, form{
        /*border: solid 1px;*/
    }

    #img_logo{
        height: 60%;
    }

    body > form{
        position: absolute;
        width: 100%;
        height: 50%;
        top: 25%;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
    }

    #key_input_container{
        width: 100%;
        height: 10%;
        display: flex; justify-content: center; align-items: center;
        /*border: solid 1px;*/
    }

    input[name="key"]{
        width: 80%;
        height: 100%;
        border: solid rgba(217, 217, 217, 1) 3px;
        border-radius: 5px;
        font-size: 100%;
    }

    input[name="submit_key"]{
        height: 50px;
        margin-top: 5%;
        width: 45%;
        background: rgba(128, 193, 255, 1);
        border: solid rgba(181, 219, 255, 1) 3px;
        border-radius: 5px;
        color: white;
        font-size: 100%;
        margin-top: 50px;
    }

    form > svg{
        width: 8%;
        margin-bottom: 5%;
    }

}