:root {
    --light-bg-0: #ffffff;
    --light-bg-1: #f1f1f1;
    --light-text: #000000;
    --light-accent: #000000;
    --light-shadow: #00000022;
    --dark-bg-0: #171717;
    --dark-bg-1: #222222;
    --dark-text: #ffffff;
    --dark-accent: #171d23;
    --dark-shadow: #ffffff1e;

    font-family: "sans-serif";
    color-scheme: light dark;
    background-color: light-dark(var(--light-bg-0), var(--dark-bg-0));
    color: light-dark(var(--light-text), var(--dark-text));
}

@media all and (max-width:719px) {
    html {
        font-size: 14px;
    }
}

@media all and (min-width:720px) {
    html {
        font-size: 15px;
    }
}

@media all and (min-width:900px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0px;
}

header {
    margin-top: 3em;
    text-align: center;
    padding-bottom: 0em;
}

header>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 2em;
    row-gap: 1em;
}

main {
    padding: 3em 1em;
    max-width: 900px;
    margin: auto;
    text-align: justify;
    min-height: 100vh;
}

footer {
    padding: 0.7em 1em;
    background-color: light-dark(var(--light-bg-1), var(--dark-bg-1));
    box-shadow: inset 0 2px 6px light-dark(var(--light-shadow), var(--dark-shadow));

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 1.5em;
}

pre {
    padding: 1em;
    border-radius: 10px;
    background-color: light-dark(var(--light-bg-1), var(--dark-bg-1));
    box-shadow: 0 3px 6px light-dark(var(--light-shadow), var(--dark-shadow));
}

td {
    padding: 1em 1em;
}

a {
    text-decoration: none;
}

img.drop_shadow {
    filter: drop-shadow(0 3px 6px light-dark(var(--light-shadow), var(--dark-shadow)));
}

div.gallery {
    gap: 10px;
    margin-top: 2em;
    margin-bottom: 2em;
    overflow-x: auto;
    white-space: nowrap;
    border-radius: 10px;
    background-color: light-dark(var(--light-bg-1), var(--dark-bg-1));
    box-shadow: inset 2px 2px 3px light-dark(var(--light-shadow), var(--dark-shadow));
}

div.gallery>img {
    height: 500px;
}

.columns {
    display: grid;
    grid-template-columns: [a] repeat(auto-fill, minmax(300px, 1fr)) [b];
    column-gap: 2em;
}