/* Base Styles */
body {
    font-family: "Chakra Petch", sans-serif;
    background: #111;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Z1lEzJUcuhTT0HwU8_-EFo7ChUm3xo_d4CiQL785f40JpXOtQZzCJusb32SegKlEWwg-PWdwV4fHpDAoL4RxpCBc2rNqmCpAfBtJMvovIo8Cv_4ALj1PrkcCM1rgEhJ0Pi7_NCjx9GWiAGFvvj6dV7jtl4Lk81F3eH92nkaAxkQjGRan0pVjP-0JNvzX/s16000/background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
}

.container {
    padding: 0.5rem;
}

/* Main Content */
.main-content {
    margin-top: 6.5rem;
    width: 100%;
    padding: 3rem;
    border: 2px solid #F9EBA6;
    border-radius: 1rem;
    box-shadow: inset 10px 5px 50px rgb(0, 0, 0);
    background: #B90907;
}

.main-content.data-table {
    margin: 5rem 0 0 0;
    width: 100%;
    max-height: 780px;
    padding: 1rem;
    border: 2px solid #F9EBA6;
    border-radius: 1rem;
    transform: skew();
    background: #B90907;
    box-shadow: inset 10px 5px 50px rgb(0, 0, 0);
}

.main-content.data-table .col-md-8 {
    max-height: 700px;
    overflow: auto;
}

@media screen and (max-width: 480px) {
    .main-content {
        margin-top: 5rem;
        width: 100%;
        padding: .5rem 1rem;
        border: 2px solid #F9EBA6;
        border-radius: 1rem;
        background: #B90907;
        font-family: "Chakra Petch", sans-serif;
    }

    .main-content.data-table {
        margin: 5rem 0;
        width: 100%;
        padding: 1rem;
        background: #B90907;
        border: 2px solid #F9EBA6;
        border-radius: 1rem;
        font-family: "Chakra Petch", sans-serif;
    }

}