@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
    font-size: 9px;
    height: 100%;
    width: 100%;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

body {
    width: 100%;
    margin: 0;
    /* background-color:#F7F7F7; */
}

p {
    font-size: 1rem;
}
.wrapper {
    padding:20px 165px;
    background-color:#f7f7f7;
}
.signin-form {
    width: 100%;
    height:100%;
    /* max-width: 350px; */
    margin: auto;
    display: grid;
    grid-template:
        'input'
        'submit'
        'info';
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
    row-gap: 1.35rem;
    justify-items: center;
    align-content: center;

    background-image: url('/static/img/login-back-nostroke.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.signin-form .input {
    display: flex;
    gap: 10px;
    align-items: center;
}

.signin-form label {
    font-size: 1.6rem;
    grid-area: label;
}

.signin-form input[type='password'] {
    padding: .5rem;
    height: 1.75rem;
    font-size: 1rem;
    grid-area: password
}

.signin-form div.submit {
    width: min-content;
    grid-area: submit;
}

.signin-form .invalid-message {
    color: #ff0000;
}

.signin-form button[type='submit'] {
    border-width: 0;
    border-radius: 0;
    background-color: #f09a3e;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 600;
    width: min-content;
    padding: .5rem 4rem;
    letter-spacing: 1px;
}

.signin-form p {
    text-align: center;
    font-size: 1.1rem;
    grid-area: info;
    margin: 0;
}

@media screen and (min-width: 576px) {
    html {
        font-size: 11px;
    }
}

@media screen and (min-width: 768px) {
    html {
        font-size: 12px;
    }
}

@media screen and (min-width: 992px) {
    html {
        font-size: 14px;
    }
}