::selection {
    background-color: #F18F2B;
    color: #FFFFFF;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local(''), 
        url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/open-sans-v34-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
html {
    background-image: url('../images/Wasserzaehler_Background.svg');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
}
body {
    /* background-color: #D1D1D1; */
    padding: 0;
    margin: 0;
    color: #314494;
    font-family: 'Open Sans';

}

@media (min-width: 400px) {
    div#login-container {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 350px;
        height: 530px;
        background-color: #FFFFFF;
        border: 1px solid #E1E1E1;
        border-radius: 10px;
        margin-left: -195px;
        margin-top: -285px;
        text-align: center;
        padding: 20px;
    }
    div#logo-container {
        width: 100%;
    }
    img#img-logo {
        width: 250px;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 10px;
        display: block;
        transition: transform 1s ease;
    }
    img#img-logo:hover {
        transform: scale(0.8);
    }
    div#login-container h1 {
        font-size: 1.5em;
    }
    div#text-container {
        height: 330px;
    }
    input#input-username, input#input-password {
        width: 280px;
        margin-bottom: 20px;
        height: 2.3em;
        outline: 1px solid #B7B7B7;
        border-radius: 7px;
        border: none;
        font-size: 1em;
        padding: 0.3em;
        color: #314494;
    }
    input#input-username:focus, input#input-password:focus {
        outline: 2px solid #314494;
    }
    button#button-submit {
        width: 290px;
        background-color: #314494;
        border-color: #314494;
        color: #FFFFFF;
        font-weight: bold;
        margin-bottom: 20px;
        height: 2.6em;
        border-style: solid;
        border-width: 3px;
        border-radius: 7px;
        font-size: 1em;
        padding: 0.3em;
        transition: border-color 0.5s ease-in-out, background-color 0.5s ease-in-out;
    }
    button#button-submit:hover {
        background-color: #F18F2B;
        border-color: #F18F2B;
        cursor: pointer;
    }
    button#button-cancel {
        width: 290px;
        background-color: #C80815;
        border-color: #C80815;
        color: #FFFFFF;
        font-weight: bold;
        margin-bottom: 20px;
        height: 2.6em;
        border-style: solid;
        border-width: 3px;
        border-radius: 7px;
        font-size: 1em;
        padding: 0.3em;
        transition: border-color 0.5s ease-in-out, background-color 0.5s ease-in-out;
    }
    button#button-cancel:hover {
        background-color: #800000;
        border-color: #800000;
        cursor: pointer;
    }
    hr#footer-separator {
        color: #314494;
        background-color: #314494;
        margin-left: -20px;
        margin-right: -20px;
        height: 2px;
    }
    div#footer-container {
        text-align: left;
        padding-top: 7px;
    }
    div#footer-container a {
        color: #F18F2B;
    }
    div#copyright-container {
        position: fixed;
        bottom: 10px;
        right: -4px;
        background-color: #F18F2B;
        width: 220px;
        height: 40px;
        font-size: 0.9rem;
        font-weight: bold;
        color: #FFFFFF;
        padding-left: 7px;
        padding-right: 7px;
        padding-bottom: 5px;
        border-radius: 5px;
    }
    code#code-snippet {
        font-size: 1.1rem;
        background-color: #D1D1D1;
        border-radius: 3px;
        padding-left: 3px;
        padding-right: 3px;
    }
    div#text-container a {
        color: #F18F2B;
    }
}