body, html {
    margin: 0px;
    font-size: 18px;
    line-height: 1.8;
}

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

    --table-border-color: #aaa;
    --table-background-color: #eee;
    --text-color: #111;

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

body > main {
    flex-grow: 1;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    width: 90vw;

}

h1, h2, h3, h4, h5 {
    font-family: "Roboto", "Open Sans", Arial, Helvetica, sans-serif;
}

header {

    text-align: center;
}

header h1 {
    font-size: 1.8em;
    color: rgb(0, 135, 0);
}

header h1 span {
    color: var(--text-color);
}

.thin {
    font-weight: 300;
} 
.final-raiting {
    font-size: 2rem;
}

footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
}

table, tr, td, th {
    border-collapse: collapse;
}

table th, table td {
    padding: 8px 16px;

    border-left: 1px solid var(--table-border-color);
    border-right: 1px solid var(--table-border-color);
}

table td:first-child,
table th:first-child {
    border-left: none;
}
table td:last-child,
table th:last-child {
    border-right: none;
}

table th {
    font-weight: bold;
    text-align: left;
}

table tr:nth-child(2n+1) td {
    background-color: var(--table-background-color);
}

body.dark-theme {
    --table-border-color: #222;
    --table-background-color: #333;
    --text-color: #eee;
    background-color: #111;
}

body.dark-theme a:visited {
    color: blueviolet;
}

body.dark-theme a {
    color: darkturquoise;
}

@media (prefers-color-scheme: dark) {
    body {
        --table-border-color: #222;
        --table-background-color: #333;
        --text-color: #eee;
        background-color: #111;
    }

    body a:visited {
        color: blueviolet;
    }

    body a {
        color: darkturquoise;
    }
}