body { 
    margin: 0; padding: 0; 
    font-family: 'Roboto', sans-serif;
}
.topbar{
    margin-top: -1.2em;
    width: 100%;
    background-color: #0099ff;
    margin-bottom: -1.2em;
    color: white;
    font-size: 1.5em;
}

.text-topbar{
    padding: 1.3em;
}

form {
    display: inline-grid;
}

.card-login {
    box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
    -webkit-box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
    -moz-box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
    width: 27%;
    background: white;
    padding: 1em;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* height: 55%; */
    height: 70%;
}

.card-header {
    text-align: center;
    font-size: 25px;
    border-bottom: 1px solid #0099ff;
    padding: 0.5em;
    color: #0099ff;
}

.card-body {
    margin-top: 3em;
    padding: 0.5em;
}

form.form-login {
    width: 100%;
}

input.form-input {
    padding: 1em;
    border-radius: 50px;
    /* border: none; */
    border: 1px solid #0099ff;
}

label.form-label {
    color: #0099ff;
    padding: 0.5em;
    margin-top: 0.5em;
}

button.btn.btn-login {
    width: 100%;
    background-color: #0099ff;
    border: none;
    padding: 1em;
    border-radius: 50px;
    margin-top: 2em;
    color: white;
    font-size: 14px;
}

@media(max-width: 360px){
    .card-login {
        box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        -webkit-box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        -moz-box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        width: 80%;
        background: white;
        padding: 1em;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* height: 55%; */
        height: 70%;
    }
}

@media(max-width: 411px){
    .card-login {
        box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        -webkit-box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        -moz-box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        width: 80%;
        background: white;
        padding: 1em;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* height: 55%; */
        height: 70%;
    }
}

@media(max-width: 414px){
    .card-login {
        box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        -webkit-box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        -moz-box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        width: 80%;
        background: white;
        padding: 1em;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* height: 55%; */
        height: 70%;
    }
}
@media(max-width: 768px){
    .card-login {
        box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        -webkit-box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        -moz-box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        width: 80%;
        background: white;
        padding: 1em;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* height: 55%; */
        height: 70%;
    }
}
@media(max-width: 1024px){
    .card-login {
        box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        -webkit-box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        -moz-box-shadow: -3px -7px 31px 13px rgba(0,0,0,0.07);
        width: 80%;
        background: white;
        padding: 1em;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* height: 55%; */
        height: 50%;
    }
}