* {
    font-size: 20px;

    color: var(--color-text);
}

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    margin: 0px;
    padding: var(--panel-gap);
    padding-top: 0px;

    font-family: 'Trebuchet MS';

    background-color: var(--color-bg);
}

#table {
    display: flex;

    margin: 20px;

    flex-flow: column wrap;

    font-family: monospace;
    font-size: 48px;

    border: 5px solid var(--color-bg);
    border-bottom-width: 0px;
}

.value-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;

    padding-left: 10rem;
    padding-right: 10rem;

    font-family: inherit;
    font-size: inherit;

    background-color: var(--color-panel);

    border: 0px solid var(--color-bg);
    border-bottom-width: 5px;
}

.value-container p {
    flex-grow: 0;
    flex-shrink: 0;

    margin: 0px;
    padding: 0px;

    margin-top: 0.25rem;
    margin-bottom: 0.25rem;

    font-family: inherit;
    font-size: inherit;

    white-space: pre;

    filter: invert(1) grayscale(1) contrast(10);
}

.value-container p::selection {
    background-color: transparent;
}

.shadow {
    box-shadow: 0px 0px 5px 5px #222222;
}
/* Phone friendly */

@media screen and (max-width: 800px) {
    .value-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media screen and (max-width: 543px) {
    .main-container h1:first-of-type {
        margin-top: 73px;
    }
}