@media (orientation: landscape)
{
    #logo
    {
        width: 50%;
        margin-left: 25%;
    }

    #intro
    {
        width: 20%;
        margin-left: 40% ;
        text-align: center;
        font-size: 1.2vw;
    }
    #insta-icon
    {
        width: 8%;
        margin-left: 46%;
    }
    #form
    {
        width: 18%;
        margin-left: 39% ;
        padding: 2%;
        font-size: 0.9vw;
        border-radius: 5px;
        box-shadow: -4px 4px #944d4d28;        
    }

    #form input
    {
        font-size: 0.9vw;
    }

        #form button
    {
        font-size: 1vw;
        width: 60%;
        margin-left: 20%;
        border-radius: 2px;
        box-shadow: -1px 3px rgb(196, 196, 196) ;
    }

    .res
    {
        width: 18%;
        margin-left: 39% ;
        padding: 1% 2%;
        font-size: 1.1vw;
        border-radius: 5px;
        box-shadow: -4px 4px #944d4d28;
    }

    #mention{ bottom:-24%; }

    #load
    {
    width: 22%;
    margin-left: 39%;
    }
}

@media (orientation: portrait) 
{
    #logo
    {
        width: 90%;
        margin-left: 5%;
    }

    #intro
    {
        width: 70%;
        margin-left: 15% ;
        text-align: center;
        font-size: 4.5vw;
    }
    #insta-icon
    {
        width: 26%;
        margin-left: 37%;
    }
    #form
    {
        width: 66%;
        margin-left: 15% ;
        padding: 2%;
        padding-bottom: 7%;
        font-size: 4.2vw;
        border-radius: 8px;
        box-shadow: -8px 8px #944d4d28;        
    }
    .res
    {
        width: 66%;
        margin-left: 15% ;
        padding: 3% 2%;
        font-size: 3.4vw;
        border-radius: 8px;
        box-shadow: -8px 8px #944d4d28;
    }

    #mention{ bottom: 7%; }

    #load
    {
    width: 120%;
    margin-left: -10%;
    }

    #form input
    {
        font-size: 3vw;
    }

    #form button
    {
        font-size: 3.5vw;
        width: 60%;
        margin-left: 20%;
        border-radius: 5px;
        box-shadow: -3px 8px rgb(196, 196, 196) ;
    }
}


body
{
    background-color: #fff5f5 ;
    font-family: 'Montserrat', sans-serif;
}


#form
{
    background-color: #ffffff;
    align-content: center;
    border: thin solid #944d4d28;
    
}

#form input
{
    display: flex;
    margin: 10% auto;
}

#form p
{
    text-align: center;
}

#form button
{
    border: thin solid rgb(196, 196, 196);
    background-color: white;
}

#form button:active
{
    background-color: #fff5f5;
    transform: translate( -1px, 3px );
    box-shadow: 0px 0px rgb(196, 196, 196) ;
    
}

#nom2
{
    margin-top: 10%;
}

.res
{
    margin-top: 3%;
    margin-bottom: 20%;
    background-color: #ffffff;
    align-content: center;
    border: thin solid #944d4d28;
    text-align: center;
    overflow-wrap: break-word;
}

#mention p
{
    text-align: center;
}

#mention
{
    width: 30%;
    position: relative;
    left: 35%;
}