details {
    padding: 0;
    background: none;
}

summary {
    background: var(--b-bg-2);
}

summary:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--b-focus);
    border-radius: .25rem;
}

details[open] > summary:focus {
    border-radius: .25rem .25rem 0 0;
}

details:focus-within {
    outline: none;
    box-shadow: none;
}

summary,
.pd-05-1,
.alert-danger {
    padding: .5rem 1rem;
}

:root {
    --b-error: #bf616a;
    --b-link: #3fb6bc;
    --b-success: #28a745;
}

html.dark body {
    --b-txt: #eceff4;
    --b-bg-1: #2e3440;
    --b-bg-2: #3b4252;
    --b-line: #3b4252
}

html.dark select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23eceff4'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7 2-1z'/%3E%3C/svg%3E")
}

html.light body {
    --b-txt: #2e3440;
    --b-bg-1: #fff;
    --b-bg-2: #eceff4;
    --b-line: #eceff4;
}

html.light select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%232e3440'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7 2-1z'/%3E%3C/svg%3E")
}

a:has(img) {
    line-height: 0;
    display: inline-block;
}

[type=search] {
    width: initial;
}

#site-title {
    font-weight: bold;
    margin: 0 0 1.5rem;
    line-height: 1.25;
    margin-top: 2rem;
    text-wrap: balance;
    font-size: 2rem;
}

time {
    font-family: monospace;
    font-style: normal;
    font-size: 1.05em;
}

.blog-posts li,
.blog-blocks li,
nav li {
    list-style-type: none;
}

nav li {
    display: inline-block;
    white-space: nowrap;
}

.blog-posts li {
    display: flex;
}

.blog-posts .time {
    flex: 0 0 120px;
}

.blog-posts .link {
    display: inline;
}

@media (max-width: 600px) {
    .blog-posts {
        padding-left: .5rem;
    }
}

.pagination,
nav ul {
    padding-left: 0;
}

/* body > footer,
.pagination {
    text-align: center;
} */

footer form span,
footer small > span {
    display: inline-block;
}

footer form input {
    margin: 0 0 .5rem;
}

footer form p {
    margin: 0 0 1rem;
}

.alert-danger {
    background-color: var(--b-error);
    text-align: center;
}

.selected {
    opacity:.75;
}

/* Keep <footer> at the bottom of the page */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Move pagination to the bottom of <main> */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 2rem;
}

nav[aria-label="Page navigation"] {
  margin-top: auto;
}