body {
    background-color: #008081;
    display: flex;
    flex-direction: column;
    place-items: center;
    position: relative;
    font-family: serif;
    font-size: 18px;
}
.offerslab {
    width:700px;
    background-color: #c0c0c0;
    padding: 10px;
    color: #00a;
    border-color: #d0d0d0;
    border-style: outset;
    border-width: 8px;
    margin:4px auto;
    position: relative;
    z-index: 100;
}
.offerslab hr {
    border-color: #d0d0d0;
    border-style: inset;
    border-width: 2px;
    margin: 33px 0;
}
article > * {
    position: relative;
    z-index: 110;
}
.ridge {
    border-color: #d0d0d0;
    border-style: groove;
    border-width: 4px;
    padding:10px;
}
h1 {
    text-align:center;
    margin-top:0px;
    padding-top:0px;
}
h2 {
    margin-top:0px;
    padding-top:0px;
}

/* things that are recessed into the slab */
code, .image {
    margin:10px auto;
    padding:10px;
    border-style: inset;
    border-color: #d0d0d0;
    border-width: 4px;
    color: #404040;
    background-color: #b0b0b0;
}

/* ... and their particulars */
pre code {
    display: block;
    padding:10px;
    border-width: 4px;
}
code {
    font-size: 0.75rem;
    color: #000;
    overflow-x: auto;
    padding: 2px;
    border-width: 2px;
}
.image {
    display: table;
    text-align:center;
    width:fit-content;
}
.image img {
    max-width: 100%;
    display: block;
    margin:0 auto;
}
.image a {
    display: block;
    margin-bottom: 10px;
}

/* for footnotes */
.footnote-target-indicator {
    position: relative;
    z-index: 101;
}

/* Big white circle that appears when footnote elements are targeted */
.footnote-target-indicator::before {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: white;
    border-radius: 50%;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    z-index: -1; /* Behind the text content but above page background */
    opacity: 0;
    transition: opacity 1.3s linear;
    pointer-events: none;
}

/* Show the circle when the footnote reference paragraph is targeted */
p:target .footnote-target-indicator::before {
    opacity: 0.5;
}

/* Show the circle when the footnote definition is targeted */
li:target .footnote-target-indicator::before {
    opacity: 0.5;
}

/* Special positioning for footnote references (superscript numbers) */
sup .footnote-target-indicator::before {
    top: 0;
    left: -1rem;
    transform: translate(0, -25%);
}



a:link, a:visited {
    color: #00f;
    text-decoration: underline;
    background-color:#aaa;
}
a:hover, a:active {
    background-color:#0ff;
}
.blogstuf {
    width: 736px;
    margin: 1rem;
}

footer {
    color: #b0b0b0;
}

ul {
    list-style: none;
    padding-left: 1.2em;
}
ul li::before {
    content: "†";        /* Unicode dagger (U+2020) */
    margin-right: 0.5em;
    font-weight: bold;
}
ul li {
    margin-bottom:0.7em;
}

/* make nice for mobile phoneres */
@media (max-width: 730px) {
    .blogstuf, .offerslab {
        width: 100%;
        box-sizing: border-box;
    }
}

.footnote-backref {
    font-size: 0.89rem;
}