root {
    --gray-000: #f8f9fa;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #868e96;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --red: #fa5252;
    --pink: #e64980;
    --grape: #be4bdb;
    --purple: #7950f2;
    --indigo: #4c6ef5;
    --blue: #228be6;
    --cyan: #15aabf;
    --teal: #12b886;
    --green: #40c057;
    --dark-green: rgb(0, 73, 0);
    --dark-plum: rgb(83, 0, 67);
    --yellow: #fab005;
    --orange: #fd7e14;
    --blue-300: #74c0fc;
    --blue-400: #4dabf7;
    --yellow-100: #fff3bf;
    --body-font-size: 16px;
    --body-line-height: 1.5;
    --body-color: var(--gray-700);
    --body-bg: #fff;
    --link-color: var(--dark-green);
    --link-hover-color: var(--green);
    --heading-color: var(--gray-900);
    --border-color: var(--gray-300);
    --border-radius: .25rem;
    --code-font: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --code-color: var(--grape);
    --code-bg: var(--gray-000);
    --spacer: 1rem;
    --spacer-2: calc(var(--spacer) * 1.5);
    --spacer-3: calc(var(--spacer) * 3)
}

body {
    font-family: "Arial";
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    color: var(--body-color);
    background-color: var(--body-bg);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

a {
    color: var(--link-color)
}

a:hover,
a:focus {
    color: var(--link-hover-color)
}

a strong {
    color: inherit
}

#loading-message {
    display: none;
    animation: fadeInOut 1s infinite alternate;
    /* Add animation here */
}

.data {
    border-collapse: collapse;
    width: 100%;
}

.data td,
th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

.data tr:nth-child(even) {
    background-color: #f2f2f2;
}

.data th {
    background-color: #dddddd;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    color: black;
}

/* Define the animation keyframes */
@keyframes fadeInOut {
    0% {
        opacity: 0.5;
        transform: translateY(0);
    }

    100% {
        opacity: 1;
        transform: translateY(-5px);
    }
}

div.the-body {
    margin-left: 3%;
}

h2 {
    color: darkorange;
}

#drop-area {
    width: 300px;
    height: 115px;
    border: 2px dashed #ccc;
    text-align: center;
    line-height: 115px;
}

.attribution {
    font-size: 85%;
    margin-top: 1.5em;
}