* {
    margin: 0px;
    padding:0px;
}

@font-face {
    font-family: "Roboto";
    src: url(resources/fonts/Roboto-Regular.ttf);
}


body {
    font-family: Roboto, Arial; 
    font-size: 14px; 
}

.container {
    background-color:black; 
}

.logger {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    height: 100vh;
    width: 100%;
    background-color: #f7f7f7;
}

.login {
    margin-top:-10%;
    background-color: white;
    border-style: none;
    border-width: 1px;
    border-color: gray;
    border-radius: 6px;
    width: 400px;
    padding: 30px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

    .login .header {
        text-align:center; 
        padding: 0px 20px 0px 20px;
    }

    .login .logo {
        width:60%;
        height: auto;  
    }

    .login .field {
        margin-bottom:10px; 
    }

    .login .label {
        padding:6px;
        color:gray;
    }

    .login input {
        width:94%; 
        padding:8px;
        font-size:16px;
        border-style:solid;
        border-width:1px; 
        border-color:gainsboro;
        border-radius:6px; 
    }

        .login input:focus {
            outline: none;  
            border-color: gray;
        }

    .login .buttons {
        display:flex;
        justify-content:flex-end;  
        padding: 20px 0px 0px 0px;
        text-align:right;  
    }

    .login .message {
        margin-right:20px;
        color:red;
        display:inline-block; 
    }

    .login .button {
        background-color: #e2e2e2;
        color: white;
        font-size: 16px;
        padding: 10px;
        border-radius: 6px;
        color: gray;
    }

    .login a {
        text-decoration:none; 
    }

        .login .button:hover {
            background-color: gainsboro ;
            color:black; 

        }

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

    .login {
        margin-top: -20%;
        width: 80%;
        padding: 60px;
      
    }

        .login .logo {

        }


        .login .field {
            margin-bottom: 20px;
        }

        .login .label {
            padding: 10px;
            color: gray;
            font-size:30px; 
        }
        .login input {
            padding: 20px;
            font-size: 40px;
            border-radius: 10px;
            border-width:4px; 
        }

        .login .message {
            font-size:30px; 
        }

        .login .buttons {
            padding: 60px 0px 0px 0px;
        }

        .login .button {
            font-size: 50px;
            padding: 30px;
            border-radius: 40px;
        }
}