blog-of-pesto/web/style.css

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);
    min-height: 100vh;
}

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;
}

p {
    font-family: 'Times New Roman', Times, serif;
    text-align: justify;
}

.category-container {
    margin-top: -24px;
}

.category {
    background: rgba(128,128,128, 0.2);
    padding: 3px 6px;
    border-radius: 3px;
    margin: 0 4px;
}

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-rating {
    font-size: 2rem;
}

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

footer p {
    text-align: left;
}

footer p:last-child {
    text-align: right;
}

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);
}

.large-table-wrapper {
    width: 90vw;
    overflow: auto;
    margin-left: calc(512px - 45vw);
}
.large-table-wrapper table {
    width: 100%;
    min-width: 1524px;
}
  
@media (max-width: 1150px) {
    .large-table-wrapper {
        width: 100%;
        margin-left: 0;
    }
}

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;
}

.image-container {
    display: flex;
    flex-direction: row;
}

.image-item {
    flex-shrink: 1;
    flex-basis: 260px;
    margin: 8px;
    float: left;
}

.image-container img {
    width: 100%;
}

@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;
    }
}

@media (max-width: 600px) {
    table {
        width: 100%;
    }

    .final-rating {
        font-size: 1.5rem;
    }
}