/* Base Styles */
body {
    font-family: "Chakra Petch", sans-serif;
    background: #111;
    background-image: url("/img/background.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
}

.container {
    padding: 0.5rem;
}

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

.main-content.data-table {
    margin: 5rem 0 0 0;
    width: 100%;
    max-height: 780px;
    padding: 1rem;
    border: 2px solid #ffc64b;
    border-radius: 1rem;
    transform: skew();
    background: #006565;
    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 #ffc64b;
        border-radius: 1rem;
        background: #006565;
        font-family: "Chakra Petch", sans-serif;
    }

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

}