:root {
    color-scheme: light dark;
}

body {
    background-image: url("images/ocean2.png");
    background-size: cover;
    background-attachment: fixed;
}

.body2 {
    background-color: light-dark(#fdfeba,#0b572d);
    display: block;
    padding: 20px;
    max-width: 550px;
    margin: -15px auto;
    font-family: 'Public Sans', Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    color: light-dark(#0b572d, #fdfeba)
}

p.direct {
    font-size: 75%;
    font-style: italic;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

a {
    color: #eb923a;
}

a[href^="http"]:not(img, :has(img))::after {
    content: " 🔗";
    vertical-align: super;
    font-size: 50%;
}

section {
    margin-bottom: 50px;
}

h1 {
    font-size: 100%;
    margin: 0;
}

details {
    margin-bottom: 20px;
    padding: 10px;
}

details:hover {
    background-color: light-dark(#f1f39f,#17663b);
}

summary {
    cursor: pointer;
}

blockquote {
    font-style: italic;
    text-align: center;
    font-family: 'Nimbus Mono PS', 'Courier New', monospace; 
}

cite {
    display: block;
    text-align: right;
}

sup {
    font-size: 60%;
}

nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%;
    text-align: center;
}

time {
    font-size: 85%;
    font-style: italic;
}

time::before {
    content: "Published on ";
}

img:not(.button) {
    width: 100%;
}

.button:hover {
    transform: scale(1.2);
}

figure {
    max-width: 100%;
    margin: 0 auto;
}

figcaption {
    font-size: 80%;
    color: light-dark(#b3b3b3, #b9b9b9);
    text-align: center;
}

audio {
    position: fixed;
    display: block;
    height: 40px;
    bottom: 1em;
    left: 1em;   
}

.radio {
    position: fixed;
    bottom: 3em;
    cursor: help;
    left: 1em;
    color: black;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 
}

.visible-on-focus {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

.visible-on-focus:active,
.visible-on-focus:focus {
position: relative;
width: auto;
height: auto;
left: auto;
}