:root {
  --logo-size-desktop: 180px;
  --logo-size-mobile: 110px;
  --header-min-height: 120px;
}

/* Reset and base styles */
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-image: url("/static/images/textured_paper.3c0f6fd66289.png");
  font-family: Georgia, serif;
  font-size: 18px;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p {
  margin-bottom: 25px;
  margin-top: 25px;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
pre {
  border-width:1px;
  border-radius:2px;
}
table{
  line-height:calc(1.5rem - 1px);
  width:100%;
  border-collapse:collapse
}
pre,table{
  overflow-x:auto
}
pre, code {
  font-family:Consolas,Liberation Mono,Menlo,Courier,monospace;
  font-size:.933rem;
  color:rgb(14, 13, 13);
  background-color:rgba(180, 176, 176, 0.932);
  border:none;
  border:rgba(211, 208, 208, 0.1) solid;
  white-space: pre;
}

ul, li {
  line-height:calc(1.5rem - 1px)
}
ul {
  margin-bottom: 25px;
}
.about {
  background-color:rgba(180, 176, 100, 0.832);
  padding: 32px;
} 
#root, #__next {
  isolation: isolate;
}

/* --- CSS Grid Header with Responsive Logo and Nav --- */
header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  background: linear-gradient(90deg, #5171A5 0%, #243B55 100%);
  min-height: var(--header-min-height);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  overflow: visible;
}

.logo {
  grid-column: 1;
  width: var(--logo-size-desktop);
  height: auto;
  margin-left: 24px;
  display: block;
  box-shadow: 0 12px 12px rgba(0,0,0,0.25);
  background: linear-gradient(90deg, #5171A5 0%, #243B55 100%);
  border-radius: 50%;
}

.header-nav {
  grid-column: 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 32px;
  gap: 28px;
}

.header-nav nav ul,
.header-nav nav ul.navig {
  display: flex;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
  background: none;
}

.header-nav nav ul li {
  margin: 0;
}

.header-nav nav ul li a {
  display: block;
  font-size: 1.08rem;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 20px;
  color: #f5f8fa;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.header-nav nav ul li a:hover,
.header-nav nav ul li a:focus {
  background: rgba(255,255,255,0.11);
  color: #fff;
  box-shadow: 0 2px 12px 0 rgba(81,113,165, 0.18);
}

.header-nav nav ul li a.active {
  background: rgba(255,255,255,0.22);
  color: #fff;
  font-weight: bold;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .logo {
    width: 130px;
    margin-left: 10px;
  }
  .header-nav {
    padding-right: 10px;
    gap: 14px;
  }
}

@media (max-width: 700px) {
  header {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: unset;
    padding: 16px 0;
  }
  .logo {
    grid-column: 1;
    grid-row: 1;
    margin: 0 auto 12px auto;
    width: var(--logo-size-mobile);
  }
  .header-nav {
    grid-column: 1;
    grid-row: 2;
    flex-direction: column;
    align-items: center;
    padding-right: 0;
    gap: 10px;
  }
  .header-nav nav ul,
  .header-nav nav ul.navig {
    gap: 10px;
  }
}

/* Main content should start after header */
.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(85ch, 100%)
    1fr;
  margin-top: var(--header-min-height);
}
.wrapper > * {
  grid-column: 2;
}

.linkList {
  margin: 10px;
}
a:link, a:visited { 
  color: rgb(88, 85, 139); 
}
a:hover {
  color: rgb(66, 45, 139);
  --shadow-color: rgba(42, 50, 56, 0.671);
  filter: drop-shadow(1px 2px 8px var(--shadow-color))
}

/* Modern blog post list styles */
.modern-blog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.modern-blog-card {
  background: linear-gradient(90deg,rgba(202, 202, 217, 1) 0%, rgba(138, 147, 166, 1) 53%, rgba(88, 104, 135, 1) 100%);
  border-radius: 18px;
  box-shadow: 0 4px 20px 0 rgba(81,113,165,0.07);
  padding: 18px 22px;
  transition: box-shadow 0.18s, transform 0.18s;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.modern-blog-card:hover {
  box-shadow: 0 8px 32px 0 rgba(81,113,165,0.15);
  transform: translateY(-2px) scale(1.01);
}

.post-headline {
  margin: 0;
  width: 100%;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: block;
}

.post-headline a {
  color: #243B55;
  text-decoration: none;
  padding: 8px 0;
  display: block;
  transition: color 0.16s;
  border-radius: 10px;
}

.post-headline a:hover,
.post-headline a:focus {
  color: #5171A5;
  background: rgba(81,113,165,0.07);
}