/* Login */

*, a, span, p, input, select, li, button{
    font-family: 'Montserrat', sans-serif;
}

.logo {
    text-align: center;
}

.logo img {
    width: 50%;
}

.form{
    max-width: 25%;
    margin: auto;
}
.form form{
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 35px;
}
.form input{
    height:50px;
    font-size: 1rem;
}
.form button{
    display: inline-block;
    color: #f6f6f6;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.4s ease all;
    opacity: 1;
    background: #005593;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    padding: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    box-sizing: border-box;
}
.button-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
.button-container a{
    color: black;
    padding: 10px 30px;
    text-decoration: underline;
    text-align: center;
}

/* login responsive */

@media screen and (max-width: 800px){

    .logo img {
        width: 60%;
    }

    .form{
        max-width: 35%;
    }
}

@media screen and (max-width: 650px){

    .logo img {
        width: 70%;
    }

    .form{
        max-width: 45%;
    }
}

@media screen and (max-width: 450px){

    .logo img {
        width: 100%;
    }

    .form{
        max-width: 65%;
    }
}

@media screen and (max-width: 300px){

    .form{
        max-width: 85%;
    }
}