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


body {
    font-family: DMSans;
}

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

a {
    text-decoration: none;
}


#content {
    height: 100vh;
    display: flex;
    align-content: center;
    background-color: gainsboro;  
}

.container {
    background-color:white;  
    display: flex;
    border-style: solid;
    border-width: 8px;
    border-color:white;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 22px 70px 4px;
    border-radius: 4px; 
    margin:auto;
    position:relative; 
}

.demo {
    position:absolute;  
    background-color:black;
    color:white; 
    top:-8px;
    right:-8px;
    padding:10px 30px 10px 30px;
    border-top-right-radius: 4px;  
    border-bottom-left-radius: 4px; 
}

.images {
    width: 46%;
    background-color:white;
    display:flex;

}

    .images img {
       width:100%; 
    }


.logger {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 54%; 
    background-color:white;  

}

.login {
    border-style: none;
    border-width: 1px;
    border-color: gray;
    border-radius: 10px;
    padding: 30px;
    width:50%; 
}

    .login .header {
        text-align:center;  
        margin-bottom:40px;
    }

    .login .logo {

    }
    .login img {
        height:200px; 
    }

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

    .login .label {
        padding:6px;
        color:gray;
        font-size: 20px; 
    }

    .login input {
        width:94%; 
        padding:8px;
        font-size:20px;
        border-style:none;
        border-color:gainsboro;
        border-radius:6px; 
        background-color:#f6f6f6;
    }

    .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; 
        width:200px; 
    }

    .login .button {
        width: 100px;
        background-color: #2141CC;
        color: white;
        font-size: 20px;
        padding: 12px 20px 12px 20px;
        border-radius: 4px;
        text-align: center;
    }

        .login .button:hover {
            padding: 10px 20px 10px 20px;
            background-color: #3CA6F4;
            font-size: 22px;
        }

@keyframes Appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

    .container {
        width: 100%;
        display: block;
        margin-left: 40px;
        margin-right: 40px;
        border-radius: 10px;
    }

    .demo {
        font-size: 30px;
        padding: 20px;
        width: 200px;
        border-bottom-left-radius: 10px;
        border-top-right-radius:10px; 
        text-align: center;
    }

    .images {
        display: none;
    }


    .logger {
        display: block;
        padding: 60px 30px 0px 30px;
        width: auto;
        border-radius: 10px;
    }

    .login {
        margin: 0px;
        padding: 60px 40px 60px 40px;
        width: auto;
    }

        .login .header {
        }

        .login .logo {
        }

        .login img {
            height: auto;
            width: 400px;
        }

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

        .login .label {
            padding: 20px;
            font-size: 40px;
        }

        .login input {
            font-size: 40px;
            padding: 20px;
        }

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

        .login .message {
            padding-top:20px;
            padding-bottom:20px;
            font-size:30px;
            width: unset;  
        }

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

            .login .button:hover {
                width: 220px;
                font-size: 40px;
                padding: 30px;
                border-radius: 10px;
            }
}