/*
 * Definition of variables (for colors)
 * */
:root {
    --accent-dark: #285700;
    --accent-light: #b8c8a5;
    --accent-1: var(--accent-light);
    --accent-2: var(--accent-dark); }
[data-theme="dark"] {
    --accent-1: var(--accent-dark);
    --accent-2: var(--accent-light); }

/*
 * Header background
 * */
header.header {
    background-color: var(--accent-1); }

/*
 * Background color for the 'list'-layout
 * */
.list {
    background: var(--theme); }

/*
 * Links
 * */
main a {
    color: var(--accent-2); }
a:hover {
    text-decoration: underline !important; }
h2 a {
    text-decoration: none !important; }
/* external links in posts */
.post-content a[href^="http"]::after {
    content: " ↗";
    font-size: 0.8em; }

/*
 * Search
 * */
.searchbox input {
    font-weight: normal; }

/*
 * Figures and captions
 * */
figure {
  margin: 2rem 0; }
figure img {
  border-radius: 6px;
  max-width: 100%; }
figcaption {
  text-align: center !important;
  font-size: 0.85rem !important;
  color: #888 !important;
  margin-top: 0.5rem !important; }

/*
 * Move "top-link" to better show the monster
 * */
.top-link {
    bottom: 6rem !important;
    right: 6rem; }

/*
 * Group of tag on /posts
 * */
.tag-groups-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem 2rem; }
@media (min-width: 768px) {
    .tag-groups-grid {
        grid-template-columns: repeat(2, 1fr); } }
.tag-group {
    break-inside: avoid; }
.tag-group-list {
    margin: 0.25rem 0 0 1rem;
    padding: 0; }
.tag-group-list li {
    margin: 0.2rem 0; }

/*
 * Sidebar
 * */
.sidebar {
    position: absolute;
    top: calc(var(--header-height) + var(--gap));
    left: calc(50% + var(--main-width) / 2 + var(--gap) * 3);
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--gap); }
@media (max-width: 1200px) {
    .sidebar {
        display: none; } }
.sidebar-widget {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    font-size: 0.875rem; }
.sidebar a {
    color: var(--accent-2); }
.sidebar-widget-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-2);
    margin-bottom: 0.6rem;
    padding: 0.3rem;
    background-color: var(--accent-1); }
.sidebar-recent {
    list-style: none;
    margin: 0;
    padding: 0; }
.sidebar-recent li {
    margin-bottom: 0.6rem;
    line-height: 1.3; }
.sidebar-post-age {
    font-size: 0.75rem;
    margin-left: 1em;
    color: var(--secondary); }
.sidebar-tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    line-height: 1.5; }

/*
 * Monster
 * */
div.monster {
    position: fixed;
    bottom: -7px;
    right: 0;
    z-index: +30;
}

/*
 * Mail form
 * */
.mailform-wrap {
    margin: 1.5rem 0; }
.mailform {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem; }
.mailform-notice {
    display: none;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius);
    font-size: 0.9rem; }
.mailform-notice--ok {
    background: #dff0d8;
    color: #3c763d; }
.mailform-notice--err {
    background: #f2dede;
    color: #a94442; }
[data-theme="dark"] .mailform-notice--ok {
    background: #1e3a1e;
    color: #7ec87e; }
[data-theme="dark"] .mailform-notice--err {
    background: #3a1e1e;
    color: #e08080; }
.mailform-field {
    margin-bottom: 1.1rem; }
.mailform-field label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.3rem; }
.mailform-req {
    color: #c00;
    margin-left: 0.15em; }
.mailform-field input[type="text"],
.mailform-field input[type="email"],
.mailform-field select,
.mailform-field textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--entry);
    color: var(--primary);
    box-sizing: border-box; }
.mailform-field select {
    cursor: pointer; }
.mailform-field textarea {
    resize: vertical;
    min-height: 6rem; }
.mailform-hint {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--secondary); }
.mailform-wrap noscript p {
    padding: 0.75rem 1rem;
    border-left: 4px solid #c00;
    background: #f2dede;
    color: #a94442;
    border-radius: var(--radius); }
[data-theme="dark"] .mailform-wrap noscript p {
    background: #3a1e1e;
    color: #e08080;
    border-left-color: #e08080; }
.mailform-error {
    display: block;
    min-height: 1.1em;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #c00; }
[data-theme="dark"] .mailform-error {
    color: #e08080; }
.mailform-field--error input,
.mailform-field--error select,
.mailform-field--error textarea {
    border-color: #c00;
    outline-color: #c00; }
[data-theme="dark"] .mailform-field--error input,
[data-theme="dark"] .mailform-field--error select,
[data-theme="dark"] .mailform-field--error textarea {
    border-color: #e08080; }
.mailform-submit {
    margin-top: 1.4rem; }
.mailform-submit button {
    padding: 0.5rem 1.4rem;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 600;
    background: var(--accent-2);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer; }
.mailform-submit button:hover {
    opacity: 0.85; }

/*
 * Print
 * */
@media print {
    header.header,
    details.toc,
    aside.sidebar,
    div.monster {
        display: none !important;
    }
}