:root
{
    --orange: #fa795b;
    --blue: #1e3d4a;
    --brown: #8b7f68;
    --black: #272727;
    --white: #ffffff;
    --light-blue: #68d0eb;

}

@font-face {
    font-family: Montsserat;
    src: url( /files/fonts/Montserrat/static/Montserrat-Light.ttf);
}

body
{
    margin: 0px;
    font-family: Montsserat;
}

.background
{
    height: 100%;
    width: 100%;
    display: grid;
    justify-content: center;
    align-items: center;
    background-color: var(--black);
    color: var(--white);
}

#login
{
    width: max-content;
    padding: 10% 5%;
    background-color: var(--blue);
    border-radius: 15px;
    box-shadow: 3px 3px #193744, -3px -3px #234350;
}

#login > h1
{
    color: var(--light-blue);
    font-size: 27px;
}

#login > p
{
    font-size: 23px;
}

#login > form
{

}

form > label
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

form > label > *:first-child
{
    margin-right: 15px;
}

label > input
{
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 2px solid var(--brown);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 20px;
}

label > input:active , label > input:hover
{
    border: 2px var(--orange) solid;
    outline: none;
}


label > span
{
    font-size: 20px;

}

form > center > button
{
    background-color: var(--brown);
    border-radius: 5px;
    font-size: 25px;
    font-family: 'Montsserat';
    padding: 10px 25px;
    border: none;
    color: var(--white);
    box-shadow: 2px 2px #786c56, -2px -2px #968a73;
    margin-top: 25px;
}

form > center > button:hover , form > center > button:active
{
    box-shadow: 2px 2px #eb694b, -2px -2px #fb8469;
    background-color: var(--orange);
    cursor: pointer;
    
}


@media only screen and (max-width: 680px) 
{
    #login
    {
        padding: 5px;
        border-radius: 5px;
        width: -webkit-fill-available;
    }

    form > label
    {
        display: grid;
    }

    form > label > input
    {
        width: -webkit-fill-available;
    }
    /*
    #login
    {
        padding: 5px;
        border-radius: 5px;
        width: -webkit-fill-available;
    }

    #login > h1
    {
        font-size: 44px;
    }

    #login > p
    {
        font-size: 40px;
    }

    #login > form
    {

    }

    form > label
    {
        display: grid;
    }

    form > label > span
    {
        font-size: 35px;
    }

    form > label > input
    {
        font-size: 35px;
    }

    form > center > button
    {
        font-size: 37px;
    }
    */
}