@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap');

body{
    background-color:#F2F2F2;
    font-family:'Roboto', sans-serif;
}

h1,h2,h3,h4,h5{
    font-weight:500;
}

.box {
    background-color:white;
    width:calc(100% - 3rem);
    max-width:24rem;
    display:block;
    margin:auto;
    border-radius:.5rem;
    box-shadow: 0 .25rem .5rem 0 rgba(0,0,0,0.15);
    position:relative;
    padding:1.5rem;
}

.login, .result{
    padding:6rem 1.5rem 1.5rem;
    margin-top:10rem;
}

.login .illustration, .result .illustration{
    position:absolute;
    width:10rem;
    height:auto;
    top:-6rem;
    display:block;
    margin:auto;
    left:50%;
    transform:translateX(-50%);
}

.table tbody tr td:first-child{
    padding-left:0;
}

.table tbody tr td:last-child{
    padding-right:0;
}

.table tbody tr:first-child td{
    border-top:none;
}

.font-weight-bold{
    font-weight:500 !important;
}

@media screen and (max-width:768px) {
    .box {
        width:calc(100% - 2rem);
    }

    .login, .result{
        padding: 6rem 1rem 1rem;
    }

    .login h4{
        font-size:1.25rem;
    }

    .login h5{
        font-size:1rem;
    }
}