@import url('https://fonts.googleapis.com/css2?family=Finlandica:wght@700&family=Literata:ital,wght@0,400;1,400&display=swap');

body {
  font-family: 'Literata', serif !important;
  color: #4f5a6a !important;
  background-color: #fffdf0 !important;
  font-size: medium !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Finlandica', sans-serif !important;
  color: #3b4758 !important;
}

strong, b {
  font-weight: 700 !important;
  color: #3b4758 !important;
}

code {
  font-family: 'IBM Plex Mono', monospace;
  color: #aa424e; /* crimson for emphasis */
  font-weight: 500;
}

pre {
  font-family: 'IBM Plex Mono', monospace;
  color: #3b4758;
  background-color: #fffdf0;
  padding: 1em;
  border-left: 4px solid #008e80;
}

a {
  color: #008e80 !important;
  text-decoration: none !important;
}

a.action {
  font-family: "Finlandica", sans-serif !important;
  font-weight: 700 !important;
  font-size: larger !important;
}

/* Example blockquote styling */
blockquote {
  border-left: 4px solid #aa424e;
  padding: 0.5em 1em;
  margin: 1em 0;
  font-style: italic;
  color: #aa424e !important;
}

.site-header .logo-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.site-logo {
  max-height: 32px;
  vertical-align: middle;
  /* Optional: adjust alignment if needed */
  position: relative;
  bottom: 8px; /* tweak this value for perfect vertical centering */
}

.site-title {
  color: #3b4758 !important;
  font-size: 0.8em !important;
}

.description {
  text-align: center;
  margin: 0 auto;
  font-size: smaller !important;
  /* max-width: 600px; Optional: keeps it readable */
  /* font-size: 1.1em;  Optional: tweak as needed */
}

/* .site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
} */

/* .description {
  margin-top: 10px;
  margin-bottom: 10px;
} */

.profile {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  flex-wrap: wrap;
}

.profile img {
  max-width: 33%;
  height: auto;
  float: left;
}

@media (max-width: 768px) {
  .profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .profile img {
    max-width: 80%;
    float: none;
    margin: 0 auto 15px;
  }
}