:root {
    color-scheme: light dark;
}

/*
body {
    background-color: light-dark(#ccc, #333);
}
*/

html {
    font-size: 100%;
}

h1 {
    font-size: 1.4rem;
}
h2 {
    font-size: 1.3rem;
}
h3 {
    font-size: 1.2rem;
}
small {
    font-size: 0.8rem;
}

body {
    font-family:
        Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
        source-sans-pro, sans-serif;
    font-weight: normal;
    margin: 0;
    font-size: 1.1em;
    background-color: light-dark(#fff, #343841);
}

main {
    padding: 3rem;
}

header h1 {
    box-shadow: 1px 1px 5px light-dark(#d2d2d2, #070707);
    padding-bottom: 1rem;
    font-size: 2.3rem;
    margin: 0;
    padding: 1.5rem 3rem;
    background-color: light-dark(#f9f9f9, #232529);
}

.gallery-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 3rem;
    margin-bottom: 2rem;
}

.gallery-section a img {
    vertical-align: bottom;
}

.gallery-item a {
    display: block;
    padding: 1rem;
}

.gallery-section h2 {
    grid-column: 1/-1;
    margin-bottom: 0;
}

.gallery-item {
    text-align: center;
    border-radius: 1rem;
    box-shadow: 1px 1px 5px light-dark(#d2d2d2, #181717);
    overflow: hidden;
}

.gallery-item p {
    background-color: light-dark(#f9f9f9, #232529);
    padding: 1rem;
    margin: 0;
    font-size: 1rem;
}