html {
    width: 100vw;
    height: 100vh;
}

.container

* {
    font-family: 'Spartan', Helvetica, Verdana, sans-serif, open-sans;
}

body {
    background-color: #ffffff;
    /*background-image: linear-gradient(180deg,#ffffff,#769fbf);*/
}

header {
    display: block;
    padding: 50px;
}

/*header .h1 {
    display: block;
    text-align: center;
}*/

header #logo {
    width: 20%;
    height: 20%;
}

/*.container {
    flex-direction: column;
    
}*/

.form-container {
    width: 350px;
    min-height: 350px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #b1b1b1;
    border-radius: 5px;
    background-color: #ffffff;
    align-self: center;
    border-top-right-radius: 60px 60px;
    border-bottom-left-radius: 60px 60px;
    border-bottom-right-radius: 60px 60px;
    box-shadow: 3px 3px 5px 0px #7d848c;
}

form h2 {
    text-align: center;
}

form {
    color: black;
}

input[type="text"],
input[type="password"],
input[type="submit"] {
    border-radius: 6px;
}

input[type="text"],
input[type="password"] {
    background: #f3f3f3 !important;
}

form input[type="submit"] {
    display: block;
    margin: 0 auto;
    margin-top: 35px;
}

@media screen and (max-width: 359.98px) {
    header {
        margin-top: 15%;
    }
    
    header #logo {
        width: 40vw;
    }
    
    .form-container {
        width: 80vw;
    }
    
    label,
    input[type="text"],
    input[type="password"],
    input[type="submit"],    
    .btn {
        font-size: 0.82em !important;
        font-weight: bold !important;
    }
}

@media screen and (min-width: 360px) and (max-width: 467.98px) {
    header {
        margin-top: 5%;
    }
    
    header #logo {
        width: 40vw;
    }
    
    .form-container {
        width: 80vw;
    }
    
    label,
    input[type="text"],
    input[type="password"],
    input[type="submit"],    
    .btn {
        font-size: 0.82em !important;
        font-weight: bold !important;
    }
}

@media screen and (min-width: 468px) and (max-width: 575.98px) {
    header {
        margin-top: 5%;
    }
    
    header #logo {
        width: 43vw;
    }
    
    .form-container {
        width: 60vw;
    }
    
    label,
    input[type="text"],
    input[type="password"],
    input[type="submit"],    
    .btn {
        font-size: 0.82em !important;
        font-weight: bold !important;
    }
}

@media screen and (min-width: 576px) and (max-width: 767.98px) {
    header {
        margin-top: 5%;
    }
    
    header #logo {
        width: 35vw;
    }
    
    .form-container {
        width: 50vw;
    }
    
    label,
    input[type="text"],
    input[type="password"],
    input[type="submit"],    
    .btn {
        font-size: 0.82em !important;
        font-weight: bold !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
    header {
        margin-top: 6%;
    }
    
    header #logo {
        width: 35vw;
    }
    
    .form-container {
        width: 50vw;
    }
    
    label,
    input[type="text"],
    input[type="password"],
    input[type="submit"],    
    .btn {
        font-size: 0.86em !important;
        font-weight: bold !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
    header {
        margin-top: 2%;
    }
    
    header #logo {
        width: 30vw;
    }
    
    .form-container {
        width: 40vw;
    }
    
    label,
    input[type="text"],
    input[type="password"],
    input[type="submit"],    
    .btn {
        font-size: 0.86em !important;
        font-weight: bold !important;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199.98px) and (orientation: landscape) {
    header {
        margin-top: 4%;
    }
    
    header #logo {
        width: 25vw;
    }
    
    .form-container {
        width: 35vw;
    }
    
    label,
    input[type="text"],
    input[type="password"],
    input[type="submit"],    
    .btn {
        font-size: 0.86em !important;
        font-weight: bold !important;
    }
}

@media screen and (min-width: 1200px) and (orientation: landscape) {
    header {
        margin-top: 2%;
    }
    
    header #logo {
        width: 20vw;
    }
    
    .form-container {
        width: 25vw;
    }
    
    label,
    input[type="text"],
    input[type="password"],
    input[type="submit"],    
    .btn {
        font-size: 0.86em !important;
        font-weight: bold !important;
    }
}