html,
body {
    margin: 0;
    height: 100%;
    background-color: #0e0e18;
    color: #ffffff;
    font-family: var(--font-poppins);

    --border: lab(21.6079% 7.48067 -21.1332);
    --width: calc(min(90ch, 100vw - 50px));
}

body>* {
    border-color: var(--border);
}

header {
    height: 60px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

footer {
    height: 60px;
    border-top-width: 1px;
    border-top-style: solid;
}

header>div,
footer>div {
    border-color: inherit;
    height: inherit;
}

header>div,
footer>div,
main {
    border-right-width: 1px;
    border-right-style: solid;
    border-left-width: 1px;
    border-left-style: solid;
    width: var(--width);
    margin-inline: auto;
}

main>div {
    padding: 20px;
}

table {
    --table-border: solid 1px var(--border);
    border: var(--table-border);
    border-collapse: collapse;
}

th,
td {
    --table-border: solid 1px var(--border);
    border: var(--table-border);
    padding: 5px;
}

tr:nth-child(odd) {
    background-color: #171725;
}