/* General */
body {
  background-color: #12121f;
  color: #c3c9e8;
  font-family: 'Share Tech Mono', monospace;
  margin: 0;
  padding: 20px;
}

.container {
  max-width: 800px;
  margin: auto;
  background: #1f1f2d;
  border-radius: 6px;
  padding: 25px 35px;
  box-shadow: 0 0 6px rgba(0, 128, 128, 0.15);
  border: 1px solid rgba(0, 128, 128, 0.1);
}

/* Header */
.logo-center {
  width: 100%;
  text-align: center;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
}

.header-logo-img {
  height: 74px;
  max-width: 220px;
  filter: drop-shadow(0 0 10px #2ffeff) brightness(1.12);
  transition: opacity 0.2s;
  opacity: 0.97;
  border-radius: 8px;
}

.header-logo-img:hover {
  opacity: 1;
  filter: drop-shadow(0 0 16px #fff900) brightness(1.2);
}

header h1 {
  text-align: center;
  font-size: 2.8rem;
  color: #00f6e4;
  font-weight: 700;
  text-shadow:
    0 0 1px #00f6e4,
    0 0 3px #00c4b8;
}

header .cursor {
  display: inline-block;
  width: 6px;
  height: 1.1em;
  background-color: #00f6e4;
  animation: blink 1.2s steps(2, start) infinite;
}

#metadata {
  text-align: center;
  margin: 0 auto;
  display: block;
  width: fit-content;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: 8px;
}

.container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 10px;
  border: 3px solid #00f6e4;
  box-shadow:
    0 0 8px #00f6e4,
    0 0 20px #00f6e4,
    inset 0 0 10px #00b89c;
  transition: box-shadow 0.3s ease;
}

.container img:hover {
  box-shadow:
    0 0 12px #00fbfc,
    0 0 30px #00f6e4,
    inset 0 0 15px #00cbb5;
  cursor: pointer;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

/* Links */
a, a:visited {
  color: #00e4c4;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #00fff7;
  text-shadow: 0 0 8px #00fff7;
}

/* Posts */
.posts a.post {
  display: block;
  background-color: rgba(0, 128, 128, 0.05);
  border-left: 3px solid #006666;
  padding: 12px 18px;
  margin-bottom: 14px;
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(0, 102, 102, 0.1);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.posts a.post:hover {
  background-color: rgba(0, 128, 128, 0.12);
  box-shadow: 0 0 8px rgba(0, 128, 128, 0.15);
}

/* Post titles */
.posts h3 {
  margin: 0 0 6px 0;
  font-weight: 500;
}

/* Post date */
.post-date {
  font-size: 0.85rem;
  color: #80d7c8;
}

/* Main Horizontal Navigation */
nav.main-nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 2em !important;
  justify-content: center !important;
}

nav.main-nav li {
  position: relative;
}

nav.main-nav a {
  text-decoration: none;
  color: #2ffeff;
  font-family: 'Share Tech Mono', monospace;
  padding: 0.5em 1.25em;
  display: block;
}

nav.main-nav .dropdown-menu {
  display: none !important;
  position: absolute;
  top: 100%;
  left: 0;
  background: #151718;
  box-shadow: 0 4px 12px rgba(0,0,0,0.7);
  border-radius: 0 0 8px 8px;
  min-width: 180px;
  z-index: 100;
  flex-direction: column;
}

nav.main-nav .dropdown-menu li {
  margin: 0;
  width: 100%;
}

nav.main-nav .dropdown:hover .dropdown-menu,
nav.main-nav .dropdown:focus-within .dropdown-menu,
nav.main-nav .dropdown.open .dropdown-menu {
  display: block !important;
}

nav.main-nav .dropdown-menu a {
  padding: 0.75em 1.25em;
  white-space: nowrap;
  color: #2ffeff;
}

nav.main-nav a:hover,
nav.main-nav .dropdown-menu a:hover {
  background: #2ffeff;
  color: #181818;
  transition: background 0.2s, color 0.2s;
}

@media (max-width: 700px) {
  nav.main-nav ul {
    justify-content: center;
    gap: 1em;
    font-size: 0.98rem;
  }
}

/* Footer */
.footer-logo {
  display: inline-block;
  vertical-align: middle;
  height: 28px;
  margin-left: 1em;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.footer-logo:hover {
  opacity: 1;
}

footer {
  text-align: center;
  width: 100%;
  margin: 40px auto 0 auto;
  margin-top: 40px;
  font-size: 0.9rem;
  color: #00f6e4;
  text-shadow: 0 0 5px rgba(0, 246, 228, 0.4);
}

/* Inline code styling */
code {
  background-color: rgba(0, 255, 231, 0.19);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.93rem;
  color: #06c2e9;
  white-space: pre-wrap;     /* Allows line wrapping for inline code too */
  word-break: break-word;
  border: none;
}

/* Code blocks and syntax highlighting */
pre, pre.codehilite {
  background: #181828;        /* Dark, subtle block background */
  border: 2px solid #17e9e9;
  border-radius: 9px;
  color: #d6fff8;
  font-family: 'Share Tech Mono', monospace;
  font-size: 1rem;
  overflow-x: auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 14px 24px;
  margin-bottom: 2rem;
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
  box-shadow: none;
}

pre.codehilite:hover, pre:hover {
  border: 2px solid #08fff9;
  box-shadow:
    0 0 14px #08fff9cc,
    inset 0 0 20px #20f4ff26;
  background-color: #191a3a;
  cursor: pointer;
}

/* Increased line height for content */
article#content,
article#content p,
article#content li,
article#content blockquote,
article#content dd {
  line-height: 1.65;
  margin-bottom: 1rem;
}

article#content h1,
article#content h2,
article#content h3,
article#content h4,
article#content h5,
article#content h6 {
  line-height: 1.4;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Subtle background for code tokens inside pre/code blocks */
pre span,
pre code span,
pre .tok,
pre .k,
pre .s, 
pre .err, 
pre .o, 
pre .n, 
pre .p, 
pre .m,
pre .c,
pre .cp,
pre .nt, 
pre .nb, 
pre .nf, 
pre .nv,
pre .nb,
pre .nn,
pre .bp {
  background: rgba(19,240,255, 0.10) !important;  /* very soft neon-cyan tint, 10% opacity */
  box-shadow: none !important;
  border-radius: 3px;
  transition: background 0.20s;
}

.archive-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2em 0;
  width: 100%;
}

.archive-nav .prev-archive {
  text-align: left;
}

.archive-nav .next-archive {
  text-align: right;
}