body{

    margin:0;

    padding:0;

    font-family:Arial, Helvetica, sans-serif;

    background:#f4f6f9;
}

.main-container{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    background:
    linear-gradient(
        135deg,
        #0d6efd,
        #002f6c
    );
}

.card-app{

    width:100%;

    max-width:600px;

    border-radius:20px;

    overflow:hidden;
}

.header-app{

    background:#0d6efd;

    color:white;

    text-align:center;

    padding:30px;
}

.body-app{

    background:white;

    padding:30px;
}

.form-control{

    border-radius:12px;

    padding:15px;
}

.btn-consultar{

    padding:15px;

    border-radius:12px;

    font-size:18px;
}

.json-box{

    background:#111;

    color:#00ff99;

    padding:20px;

    border-radius:12px;

    overflow:auto;

    max-height:600px;

    font-size:14px;
}

@media(max-width:768px){

    .body-app{

        padding:20px;
    }

    .header-app h1{

        font-size:24px;
    }
}