html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    align-items: center;
    background: url(MainBackground.png);
    font-family: sans-serif;
    background-size: cover;
    padding-bottom: 70px;
}

div.main {
    margin: 50px auto;
    background: url(FinestraLogin.png);
    width: 480px;
    height: 450px;
    padding: 30px 55px 40px 55px;
    box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 5px 0px;
    border-radius: 10px;
    border: 1px solid rgb(117, 157, 192);
}

#responseText {
    display: none;
}

#loading, #errorText, #logoutText {
    font-weight: bold;
    text-align: center;
    color: rgb(0, 103, 177);
}

@media screen and (min-width: 1000px) {

    body:after {
        content: 'screen';
        display: none;
    }

}

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

    body:after {
        content: 'smallscreen';
        display: none;
    }
}

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

    div.main {
        background: none;
        background-size: contain;
        width: 280px;
    }

    #login-button {
        width: 100%;
    }

    body:after {
        content: 'smartphone';
        display: none;
    }

}