:root {
    --body-bg-color: #202020;
    --thumbnail-border-radius: 1mm;
    --box-shadow: 1mm 1mm 2mm rgba(0, 0, 0, 25%);
}

.bg-body {
    background-color: var(--body-bg-color);
}

a:link {
    color: #9ab8db;
}

a:visited {
    color: #b0a4cf;
}

header .container {
    background: linear-gradient( 0deg, var(--body-bg-color) 0%, rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.6) 100%);
}

a.navigation {
    color: rgb(185, 185, 185);
    text-decoration: none;
}

a.navigation.active {
    font-weight: bold;
    color: white;
}

footer a:link,
footer a:visited {
    color: #808080;
    text-decoration: none;
    font-size: small;
}

.panorama-list h2 a {
    color: #242c33;
}

.panorama-list .summary {
    border-radius: 1mm;
    box-shadow: 1mm 1mm 2mm black;
}

.panorama-thumbnail {
    width: 128px;
    height: 128px;
    float: left;
    border: thin solid black;
    margin: 1mm;
    border-radius: 1mm;
    box-shadow: 1mm 1mm 2mm rgba(0, 0, 0, 25%);
}

@media screen and (min-width:30em) and (max-width:60em) {
    /* -m suffix */
    .panorama-thumbnail {
        width: 192px;
        height: 192px;
        margin: 2mm;
    }
}

@media screen and (min-width:60em) {
    /* -l suffix */
    .panorama-list .panorama-item {
        max-width: 10cm;
    }
    .panorama-thumbnail {
        width: 100%;
        height: auto;
        float: none;
        margin: 0;
        border-radius: 0;
        border: none;
    }
    .panorama-list .panorama-item {
        max-width: 100%;
    }
}

.panorama-footer {
    width: 100%;
}

.summary {
    position: relative;
    height: 100%;
}

.summary a.blocklink {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: -3000cm;
    overflow: hidden;
}

.summary .summary-contents {
    position: relative;
    z-index: 0;
}

.summary-date {
    font-size: small;
    float: right;
}