:root {
    --shed_green: rgb(63, 97, 45);
    --white: rgba(255, 255, 255, 1);
    --black: rgba(0, 0, 0, 1);
    --near_black: rgb(51, 51, 51);
    --light_gray: rgba(200, 200, 200, 1);
    --gap: 0;
}

@media(prefers-color-scheme: dark) {
    :root {
        --white: rgba(0, 0, 0, 1);
        --black: rgba(255, 255, 255, 1);
        --near_black: rgba(204, 204, 204, 1);
        --light_gray: rgba(55, 55, 55, 1);
    }
}

body {
    display: flex;
    flex-direction: column;
    padding-right: var(--gap);
    padding-left: var(--gap);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Oxygen, Ubuntu, Cantarell, open sans, helvetica neue, sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--black);
    word-break: break-word;
    background:var(--white)
}

header.header {
    background-color: #243835;
    border-bottom: 8px solid var(--shed_green);
    color: var(--white);
    margin: 0;
    padding:0
}

header.header .container {
    margin: 0 auto;
    max-width: 900px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 2em;
    & h1 {
        padding-left: 4.5rem;
        font-size: 2.0rem;
        margin: 0;
        & a, & a:visited {
            color: var(--white);
            text-decoration: none;
        }
    }

    .menu {
        display: flex;
        padding: 0.5rem;
        margin: 0;
        align-items: flex-end;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 1rem;
        font-size: 1.1rem;
        & a, & a:visited {
            color: var(--black);
            text-decoration: none;
        }
    }
}

.logo {
    background-image: url("/uploads/2024/shed-iso2.png");
    background-repeat: no-repeat;
    background-size: auto 3.5rem;
    background-position: 0;
    padding-left:5rem
}

.logo::before {
    content: " "
}

.main {
    margin: 0 auto;
    max-width: 900px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 20px;
    nav.sidebar {
        flex-basis: 200px;
        background-color: #FAFAFA;
        flex-shrink: 0;
        & ul.site_main_sections {
            padding-left: 1rem;
            li {
                font-size: 0.95rem;
                list-style-type: none;
                margin-left: 0;
                padding-left: 0;
                a {
                    color: var(--black);
                    text-decoration: underline;
                }
            }
        }

        h2 {
            font-size: 1.0rem;
            margin: 0;
            padding-left: 1rem;
        }

        & ul.blogroll {
            margin-top: 0;
            padding-left: 1rem;
            li {
                font-size: 0.9rem;
                list-style-type: none;
                margin-left: 0;
                padding-left: 0;
                a {
                    text-decoration: underline;
                }
            }
        }
    }

    .content {
        flex-grow: 1;
        padding-top: 1rem;
    }
}

body.gallery .main {
    max-width:1600px
}

@media screen and (max-width: 768px) {
    .main {
        flex-direction: column;
        & nav.sidebar {
            width: 100%;
            flex-basis: 0;
            flex-grow: 0;
            .section_header {
                display: none;
            }

            & ul.site_main_sections {
                li {
                    display: inline;
                }

                li:after {
                    content: " | ";
                }

                li:last-of-type:after {
                    content: "";
                }
            }

            & ul.blogroll {
                display: none;
            }
        }

        .content {
            padding: 1rem;
        }
    }
}

body.fullwidth {
    display:flow
}

body.fullwidth .main {
    max-width: 100%;
    padding:0
}

article {
    margin-bottom: 4em;
    & blockquote {
        margin: 0;
        padding: 0;
        color: var(--near_black);
        border-left: 0.3rem solid var(--light_gray);
        padding-left: 1rem;
    }

    & header {
        line-height: 1.0;
        & a {
            color: var(--black);
            text-decoration: none;
        }

        & h1 {
            font-size: 1.5rem;
            margin: 0;
            padding: 0;
        }

        & time {
            margin: 0;
            padding: 0;
            font-size: 0.8rem;
            color: var(--light_gray);
        }
    }

    .old_post_disclaimer {
        font-size: 0.8rem;
        background-color: #ebf6da;
        margin-top: 1em;
        padding: 0.2rem 0.5rem;
        border-radius: 3px;
    }

    &.titleless header {
        margin-bottom: -0.4rem;
    }

    & figure {
        margin: 0;
        padding: 0;
        text-align: center;
        & img {
            max-width: 100%;
            margin-bottom: 0;
        }

        & figcaption {
            font-size: 0.9rem;
            color: var(--light_gray);
            margin-top: -0.5em;
        }
    }

    & img {
        max-width: 100%;
        margin-bottom: 0;
    }
}

a picture, a picture img, a picture source {
    cursor:pointer
}

.exif dl dt {
    font-size: 1.2rem;
    text-transform: uppercase;
    color:#ccc
}

.exif dl dd {
    font-weight: 700;
    margin-left:1em
}

.highlight {
    font-size:1rem
}

footer.footer {
    display: flow;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
    border-top: 1px solid var(--light_gray);
    font-size: .9rem;
    color: #555;
    & a, & a:visited {
        color: var(--black);
        text-decoration: none;
    }
}

.container-main-with-sidebar {
    margin: auto;
    width: 80%;
    display: grid;
    grid-template-columns: 85% 15%;
    .main {
    }

    .sidebar {
        .photo_shoots {
            h2 {
                font-size: 1.0rem;
                margin: 0;
                padding: 0;
            }

            ul {
                margin: 0;
                padding: 0em 1em;
                & li {
                    list-style-type: none;
                    margin: 0;
                    padding: 0;
                    font-size: 0.8rem;
                    font-weight: 300;
                    a {
                        color: var(--black);
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}

@media (max-width: 600px) {
    .container-main-with-sidebar {
        width: 95%;
        grid-template-columns: 100%;
        .sidebar {
            order: -1;
            .photo_shoots {
                ul {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    & li {
                        margin: 0.5em;
                    }
                }
            }
        }
    }
}

.photo_set {
    h1 {
        color: var(--black);
        margin: 0;
    }

    .meta {
        font-size: 0.8rem;
        color: var(--light_gray);
    }

    .photo-strip {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        white-space: nowrap;
        scroll-behavior: smooth;
        & a {
            display: block;
            flex-shrink: 0;
            text-decoration: none;
        }

        & picture {
            display: block;
        }

        & img {
            height: 200px;
            width: auto;
            object-fit: cover;
            display: block;
        }
    }
}

.photo-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    justify-content: center;
    align-items: start;
    width: 100%;
    margin:0 auto
}

.photo {
    display: block;
    overflow:hidden
}

.photo picture {
    display: block;
    width:100%
}

.photo img {
    display: block;
    width: 100%;
    height:auto
}

.lightbox {
    background-color: #333;
    width: 100%;
    .photo {
        width: 90%;
        margin: auto;
        padding: 2em 0;
        & img {
            width: 100%;
            max-height: 90vh;
            object-fit: contain;
        }
    }

    .description {
        font-weight: 300;
        color: var(--white);
        font-size: 0.8rem;
        background-color: rgba(0, 0, 0, 0.2);
        h1.title {
            margin-top: 0;
            font-size: 0.8rem;
            font-weight: 600;
        }

        width: 70%;
        margin: 0 auto 2em auto;
        padding: 1em;
        border-radius: 5px;
    }

    .exif {
        & table {
            margin: auto;
            border-top: 1px solid #AAA;
            padding: 1em 3em;
            th {
                text-align: right;
                padding-right: 0.5em;
                font-weight: 600;
                color: #FFF;
                font-size: 0.8rem;
                text-transform: uppercase;
                line-height: 1.1;
            }

            td {
                text-align: left;
                font-weight: 300;
                color: #FFF;
                font-size: 0.8rem;
                line-height: 1.1;
                a, a:visited {
                    color: #FFF;
                    text-decoration: underline;
                }
            }
        }
    }

    .download_full_size_link {
        text-align: center;
        margin-top: 1em;
        margin-bottom: 2em;
        padding-bottom: 2em;
        & a {
            color: #FFF;
            font-size: 0.8rem;
            text-decoration: none;
            text-transform: uppercase;
            font-weight: 600;
            padding: 0.5em 1em;
            background-color: #555;
            border-radius: 0.5em;
        }
    }

    .terms {
        font-weight: 200;
        color: var(--white);
        text-align: center;
        margin-top: 1em;
        margin-bottom: 2em;
        padding-bottom: 2em;
        a {
            color: var(--white);
            text-decoration: underline;
        }
    }
}

@media (min-width: 1400px) {
    .lightbox .description {
        width:50%
    }
}

body.aqua {
    background: repeating-linear-gradient(#F8F8F8, #F8F8F8 4px, #FFFFFF 4px, #FFFFFF 8px);
    nav.post-nav {
        display: grid;
        place-content: center center;
        column-gap: 2rem;
    }

    .aqua_button {
        grid-row: 1;
        font-size: 1rem;
    // change me to adjust the scale of the buttons font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
        height: 1.75em;
        padding: 0 2em;
        min-width: 6em;
        border-radius: 1000px;
        position: relative;
        overflow: hidden;
        cursor: default;
        outline: none;
        text-decoration: none;
        color: #000;
    }

    .aqua_button.primary {
        background: linear-gradient(rgba(0, 65, 184, 0.625), rgba(45, 115, 199, 0.625), rgba(33, 160, 196, 0.625));
        box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.3), 0 0.125em 0.125em rgba(0, 78, 187, 0.5), inset 0 0.25em 0.5em rgba(0, 17, 49, 0.8), inset 0 0.375em 0.5em 0.25em rgba(0, 78, 187, 0.75)
    }

    .aqua_button.primary:focus, .aqua_button.primary:active {
        box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.3), 0 0.125em 0.125em rgba(0, 78, 187, 0.5), inset 0 0.25em 0.5em rgba(0, 17, 49, 0.8), inset 0 0.375em 0.5em 0.25em rgba(0, 78, 187, 0.75), 0 0 0.5em rgba(52, 106, 227, 0.5);
    }

    .aqua_button.secondary {
        background: linear-gradient(rgba(160, 160, 160, 0.625), rgba(255, 255, 255, 0.625));
        box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.2), 0 0.125em 0.125em rgba(0, 0, 0, 0.3), inset 0 0.25em 0.25em rgba(0, 0, 0, 0.4), inset 0 0.375em 0.5em 0.25em #BBBBBB;
    }

    .aqua_button.secondary:focus, .aqua_button.secondary:active {
        box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.2), 0 0.125em 0.125em rgba(0, 0, 0, 0.3), inset 0 0.25em 0.25em rgba(0, 0, 0, 0.4), inset 0 0.375em 0.5em 0.25em #BBBBBB, 0 0 0.5em rgba(0, 0, 0, 0.25);
    }

// top shine .aqua_button:before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 33%;
    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3));
    width: calc(100% - 0.875em);
    border-radius: 2em 2em 0.5em 0.5em;
    top: 5%;
    filter: blur(1px);
    z-index: 2;
}

// bottom glow .aqua_button:after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 33%;
    background: linear-gradient(rgba(255, 255, 255, 0.2), rgb(255, 255, 255, 0.5));
    width: calc(100% - 1.25em);
    border-radius: 0.75em;
    bottom: 10%;
    filter: blur(3px);
}

// text .aqua_button span {
    color: #000;
    text-decoration: none;
    position: relative;
    top: -1px;
    z-index: 1;
    letter-spacing: 0.0375em;
    -webkit-text-stroke-width: 0.025em;
    -webkit-text-stroke-color: #000000;
}

    .aqua_button.primary span {
        text-shadow: 0 0.15em 0.1em rgba(30, 77, 161, 0.5);
    }

    .aqua_button.secondary span {
        text-shadow: 0 0.15em 0.1em rgba(0, 0, 0, 0.25);
    }
}