@media screen 
  and (min-device-width: 450px) /*tablette ou ordi*/
   { 
    #font
    {
        position: relative;
        width: 80%;
        height: 100%;
        overflow: hidden;
    }
    #logo {
        position: absolute;
        top: 16.5%;
        right: 22%;
        width: 20%;
    }
     
}

@media screen /*smartphone classique*/
  and (max-device-width: 449px) 
  and (max-device-height: 799px)
  { 
    #font
    {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    #font_picture
    {
        position: absolute;
        bottom: 3vh;
    }

    #logo {
        position: absolute;
        top: 12vh;
        right: 16vh;
        width: 15%;
    }
}


@media screen /*smartphone long*/
  and (max-device-width: 449px)
  and (min-device-height: 800px)   
  { 

    #font
    {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #logo {
        position: absolute;
        top: 14.5%;
        right: 22%;
        width: 20%;
    }
    
}

.button {
    border-top: none;
}

#font_picture
{
    object-fit: contain;
    max-height: 100%;
    max-width: 100%;
}