/**
 *  thallos.de - Hugo Theme CSS
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #fff;
    color: #000;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
    font-size: 16px;
    text-align: center;
    line-height: 1.5;
    position: relative;
}

.socialicon {
    margin-left: 10px;
    margin-right: 10px;
}

.big-icon {
    font-size: 2rem;
}

.wrapper {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    text-align: left;
}

.content a {
    text-decoration: underline;
}

.page {
    font-size: 1.05em;
    text-align: left;
}

header {
    background: linear-gradient(to bottom right, #669D34, #659C33);
    background-color: #eee;
}

header .wrapper {
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
}

header .logo {
    width: 500px;
    max-width: 80%;
}

header .socialicon {
    color: #eee;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 1.5rem;
}

header a {
    text-decoration: none;
}

header .site-name {
    font-size: 1.5em;
    color: #eee;
    font-weight: bold;
}

header nav a {
    display: block;
    color: #659C33;
    padding: 0 10px;
    line-height: 30px;
}

header nav a:hover,
header nav li.selected a {
    color: #fff;
    background-color: #659C33;
}

header nav li a.selected {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.95em;
    font-weight: bold;
    text-decoration: none;
}

nav {
    display: inline-block;
    background-color: #fff;
    border-radius: 10px;
    margin-top: 18px;
    overflow: hidden;
}

nav li {
    display: inline-block;
    margin: 0 7px;
    line-height: 1.5em;
}

nav li a.selected {
    text-decoration: underline;
}

.h1-thallos,
.h2-thallos,
.h3-thallos,
.h4-thallos,
.h5-thallos,
.h6-thallos {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
}

h2 {
    margin-top: 40px;
    margin-bottom: 20px;
}

h3 {
    margin-top: 30px;
    margin-bottom: 20px;
}

p {
    margin-bottom: 20px;
    font-family: Vollkorn, Georgia, serif;
    font-size: 1.2em;
}

@media (prefers-color-scheme: light) {
    p code {
        background-color: #e2e2e2;
    }
}
@media (prefers-color-scheme: dark) {
    p code {
        background-color: #333;
    }
}

p code {
    color: #669D34;
    display: inline-block;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 0.85em;
    margin: 1px;
}

@media (prefers-color-scheme: light) {
    li code {
        background-color: #e2e2e2;
    }
}

@media (prefers-color-scheme: dark) {
    li code {
        background-color: #333;
    }
}

li code {
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     color: #669D34;
    display: inline-block;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 0.95em;
    margin: 1px;
}

.published {
    font-size: 0.85em;
    font-weight: bold;
    color: grey;
}

@media (prefers-color-scheme: dark) {
    blockquote {
      background: #333;
      border-left: 10px solid #669D34;
      margin: 1.5em 10px;
      padding: 0.5em 10px;
    }
}

@media (prefers-color-scheme: light) {
  blockquote {
    background: #f9f9f9;
    border-left: 10px solid #669D34;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
  }
}
blockquote p {
  display: inline;
}

a {
    text-decoration: none;
    color: inherit;
}

.description {
    margin-bottom: 40px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
}

.grid.compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid.verycompact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid.sidebar {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-gap: 15px;
}

.item-list.links > li {
    font-weight: bold;
}

.item-list > li {
    display: block;
    padding: 20px;
    border-radius: 20px;
    background-color: #eee;
    margin-bottom: 20px;
}

.item-list img {
    height: 1.5em;
    width: auto;
    margin-right: 0.5em;
    vertical-align: middle;
    border-radius: 5px;
}

.item-list h1 {
    margin-bottom: 5px;
    font-size: 1.3em;
}

.item-list p {
    margin-bottom: 0;
}

.tag-list {
    display: inline-block;
    margin-bottom: 5px;
}

.content li {
    font-family: Vollkorn, Georgia, serif;
    margin-left: 35px;
}

.ul-thallos {
    margin-bottom: 0;
    padding-left: 0;
}

.content ul {
    list-style-type: circle;
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

.content ol {
    list-style-type: circle;
}

.single-tag {
    font-size: 1em;
    font-weight: bold;
    display: inline-block;
    background-color: #270957;
    color: #eee;
    padding: 1px 5px;
    border-radius: 5px;
    margin-right: 5px;
}

.tag-list li,
.all-tags li,
.tag {
    font-size: 0.85em;
    font-weight: bold;
    display: inline-block;
    background-color: #270957;
    color: #eee;
    padding: 1px 5px;
    border-radius: 5px;
    margin-right: 5px;
}

span.tag-iOS,
li.tag-IOS {
    background-color: #669D34;
}

span.tag-MacOS,
li.tag-MacOS {
    background-color: #669D34;
}

span.tag-swift,
li.tag-Swift {
    background-color: #df5c43;
}

span.tag-swift,
li.tag-SwiftUI {
    background-color: #df5c43;
}

span.tag-Splash,
li.tag-Splash {
    background-color: #cb3018;
}

span.tag-Publish,
li.tag-Publish {
    background-color: #cb3018;
}

span.tag-AquaCalculator,
li.tag-AquaCalculator {
    background-color: #007bff;
}

.tag-list a,
.tag a {
    text-decoration: none;
}

.item-page .tag-list {
    display: inline-block;
}

.content {
    margin-bottom: 40px;
}

.browse-all {
    display: block;
    margin-bottom: 30px;
}

.all-tags li {
    font-size: 0.85em;
    margin-right: 10px;
    padding: 6px 10px;
}

footer {
    color: #8a8a8a;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #222;
    }

    body,
    header .site-name {
        color: #eee;
    }

    .item-list > li {
        background-color: #111;
    }

    header {
        background-color: #000;
    }
}

@media(max-width: 600px) {
    .wrapper {
        padding: 40px 20px;
    }
}

pre {
    margin-bottom: 1.5em;
    background-color: #1a1a1a;
    padding: 16px 0;
    border-radius: 16px;
}

.headersubtitle {
    font-size: .9em;
    color: white;
    margin-bottom: 1em;
}

pre code {
    font-family: monospace;
    display: block;
    padding: 0 20px;
    color: #a9bcbc;
    line-height: 1.4em;
    font-size: 0.85em;
    overflow-x: auto;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
}

pre code .keyword {
    color: #e73289;
}

pre code .type {
    color: #8281ca;
}

pre code .call {
    color: #348fe5;
}

pre code .property {
    color: #21ab9d;
}

pre code .number {
    color: #db6f57;
}

pre code .string {
    color: #fa641e;
}

pre code .comment {
    color: #6b8a94;
}

pre code .dotAccess {
    color: #92b300;
}

pre code .preprocessing {
    color: #b68a00;
}

@media (prefers-color-scheme: dark) {
    .thalloslogo {
        background-color: #eee;
        border-radius: 10px;
        padding: 10px;
    }
}

.language-switcher-container {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1000;
}

/* Avatar krams aus früheren Zeiten */

/* Basis-Avatar */
.avatar {
  display: inline-block;
  width: 100px;
  height: 100px;
  object-fit: cover;
}

/* Kreisförmiger Avatar */
.avatar-circle {
  border-radius: 50%;
}

/* Optional: Quadrat (falls vorhanden) */
.avatar-square {
  border-radius: 0;
}

/* Häufig kombiniert */
.avatar.avatar-circle {
  border-radius: 50%;
}

/* Optional Styling wie im Theme */
.avatar {
  box-shadow: 0 0 0 2px #fff;
}