:root {
    --bg: #f6f6f6;
    --bg-hover: #ececec;
    --text: #777;
    --muted: #aaa;
    --link: #666;
    --maxw: 800px;
    --pad: 16px;
    --gap: 12px;
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 'Lora', serif;
    overflow-x: hidden
}

main {
    max-width: var(--maxw);
    margin: 40px auto;
    padding: 0 var(--pad)
}

header p {
    color: var(--muted);
}

/* posts */
details {
    padding: 2px 0;
}

details:last-of-type {
    border-bottom: none
}

summary {
    list-style: none;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: baseline;
    gap: 10px
}

summary::-webkit-details-marker {
    display: none
}

.perma {
    position: relative;
    left: -22px;
    text-decoration: none;
    color: var(--muted);
    opacity: .6;
    font: 600 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace
}

.perma:hover {
    opacity: 1
}

.title {
    font: 500 32px/1.2 'Barlow Condensed', serif;
    color: var(--text);
    flex: 1 1 auto
}

h1 {
    font: 500 32px/1.2 'Barlow Condensed', serif;
    color: var(--text);
    flex: 1 1 auto
}

.date {
    font: 300 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--muted);
    flex: none;
    white-space: nowrap
}

.content {
    margin: 10px 0 0
}

.content p {
    margin: 0 0 12px
}

a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

a:hover {
    background: var(--bg-hover)
}

pre,
code {
    font: 14px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
}

pre {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    padding: 10px;
    overflow: auto;
    margin: 10px 0
}

code {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: .1em .3em
}

figure.images {
    margin: 12px 0
}

.images img {
    display: block;
    max-width: 100%;
    height: auto;
    /*border-radius: 6px;*/
    border: none;
    /*1px solid #e5e5e5;*/
    background: #fff
}

.images.single img {
    width: 100%
}

/* carousel: full-bleed breakout scroller */
.carousel-scroller {
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;

    /* These rules make the container break out of the content column */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;

    /* Padding aligns the first image with the content column */
    --main-margin: calc((100vw - var(--maxw)) / 2);
    padding: 0 calc(var(--main-margin) + var(--pad));

    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-padding: 0 calc(var(--main-margin) + var(--pad));

}

.carousel-scroller::-webkit-scrollbar {
    display: none
}

.carousel-scroller img {
    /* Set width to match the main content width */
    width: calc(var(--maxw) - 2 * var(--pad));
    flex: 0 0 auto;
    /* prevent image from shrinking */
    max-height: 60vh;
    scroll-snap-align: start;
    /* snap to the start of the image */
}

figcaption {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
    margin-bottom: 20px;

}

.shadertoy {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border: 1px solid #222;
    /*border-radius: 6px;*/
    overflow: hidden;
    margin-bottom: 20px;
}

.youtube {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border: 1px solid #222;
    /*border-radius: 6px;*/
    overflow: hidden margin-bottom: 20px;
}

.shadertoy iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.youtube iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width:640px) {
    .title {
        font-size: 24px
    }

    summary {
        flex-wrap: wrap;
        row-gap: 0
    }

    .title {
        flex-basis: 100%
    }

    /* On mobile, make the image width closer to screen width */
    .carousel-scroller img {
        width: calc(100vw - 2 * var(--pad));
    }
}