/* Russo One (WOFF2) */
@font-face {
  font-family: 'Russo One';
  src: url('/fonts/russo-one-v18-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Vend Sans (WOFF2) - Body text */
@font-face {
  font-family: 'Vend Sans';
  src: url('/fonts/vend-sans-v1-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono (WOFF2) - Code */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Colors from The Shell theme */
:root {
  --text: #B2B6BD;
  --background: #2b303b;
  --header-bg: #1c212b;
  --link-hover: #a3be8c;
  --heading: #739a99;
  --border: #424650;
  --contessa: #bf6165;
  --comet: #4f586b;
  --river-bed: #424a5a;
  --meta: #846d8f;
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Vend Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 2.0rem;
  line-height: 1.75em;
  color: var(--text);
  background: var(--background);
  margin: 0;
  padding: 0;
}

::selection {
  color: var(--header-bg);
  background: var(--link-hover);
}

a {
  color: var(--contessa);
  text-decoration: none;
  transition: color ease 0.3s;
}

a:hover {
  color: var(--link-hover);
}

h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeLegibility;
  line-height: 1;
  margin-top: 20px;
  letter-spacing: 2px;
  font-weight: normal;
}

h1 { font-size: 5rem; line-height: 1.2em; }
h2 { font-size: 4rem; line-height: 1.2em; }
h3 { font-size: 3.5rem; }
h4 { font-size: 3rem; }

h1 a, h2 a, h3 a { color: var(--heading); }
h1 a:hover, h2 a:hover, h3 a:hover { color: #9ab8b7; }

/* Site Header */
#site-head {
  position: relative;
  display: table;
  width: 100%;
  height: 60vh;
  min-height: 300px;
  text-align: center;
  color: #a0add5;
  background: var(--header-bg) no-repeat center center;
  background-size: cover;
  margin-bottom: 0;
}

/* Gradient fade at bottom of header */
#site-head::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent 0%, var(--background) 100%);
  pointer-events: none;
}

.vertical {
  display: table-cell;
  vertical-align: middle;
}

#site-head-content {
  position: relative;
  width: 80%;
  max-width: 700px;
  margin: 0 auto;
}

#blog-logo img {
  display: block;
  max-height: 100px;
  width: auto;
  margin: 0 auto;
  border-radius: 50%;
}

.blog-title {
  margin: 10px 0;
  font-family: 'Russo One', sans-serif;
  font-size: 5rem;
  letter-spacing: -1px;
  color: #fff;
  text-shadow: 3px 3px 2px black;
}

.blog-description {
  margin: 0;
  font-family: 'Russo One', sans-serif;
  font-size: 1.8rem;
  line-height: 1.5em;
  font-weight: 300;
  color: #fff;
  text-shadow: 3px 3px 2px black;
}

/* Navigation */
.site-nav {
  margin-top: 2rem;
  color: var(--contessa);
}

.site-nav ul {
  padding: 0;
  margin: 0;
}

.site-nav li {
  display: inline-block;
  list-style: none;
  margin: 0 1rem;

}

.site-nav a {
  color: var(--contessa);
  text-shadow: 2px 2px 1px black;
}

.site-nav a:hover {
  color: var(--link-hover);
}

/* Main Content */
.content {
  width: 80%;
  max-width: 700px;
  margin: 0 auto;
  padding-top: 3rem;
}

/* Post Article */
article.post {
  position: relative;
  margin: 5rem auto;
  padding-bottom: 4rem;
  border-bottom: var(--border) 1px solid;
  word-break: break-word;
}

.post-meta {
  display: block;
  margin: 0 0 5px 0;
  font-size: 1.5rem;
  color: var(--meta);
}

.post-meta a {
  color: var(--contessa);
}

.post-meta a:hover {
  text-decoration: underline;
  color: var(--link-hover);
}

.post-title {
  font-family: 'Russo One', sans-serif;
  color: var(--heading);
  margin: 0;
}

.post-title a {
  color: var(--heading) !important;
}

.post-title a:hover {
  color: #9ab8b7 !important;
}

.post-excerpt p {
  margin: 2.0rem 0 0 0;
  font-size: 1.0em;
  line-height: 1.75em;
}

/* Single Post */
.post-content {
  margin-top: 2rem;
}

.post-content img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.post-content p, .post-content ul, .post-content ol {
  margin: 1.6em 0;
}

/* Code Blocks - Prism.js customization */
code, tt {
  padding: 1px 3px;
  font-family: 'JetBrains Mono', "Courier New", Courier, monospace;
  font-size: 0.65em;
  white-space: pre;
  border: 1px solid var(--river-bed);
  background: var(--comet);
  border-radius: 2px;
}

pre {
  box-sizing: border-box;
  margin: 1.6em 0;
  border: 1px solid var(--river-bed);
  width: 100%;
  padding: 10px;
  font-family: 'JetBrains Mono', "Courier New", Courier, monospace;
  font-size: 0.7em;
  white-space: pre;
  overflow: auto;
  background: var(--comet);
  border-radius: 3px;
  position: relative;
}

pre.line-numbers {
  padding-left: 3.8em;
}

pre code {
  font-size: inherit;
  white-space: pre-wrap;
  background: transparent;
  border: none;
  padding: 0;
  font-family: 'JetBrains Mono', monospace;
}

/* Prism.js theme overrides for dark theme consistency */
div.code-toolbar {
  position: relative;
  margin: 1.6em 0;
}

div.code-toolbar > .toolbar {
  position: absolute;
  top: 0.3em;
  right: 0.2em;
  opacity: 0.8;
}

div.code-toolbar > .toolbar a {
  display: inline-block;
  padding: 0.4em 0.6em;
  background: var(--contessa);
  color: var(--background);
  border-radius: 2px;
  font-size: 0.8em;
  margin-left: 0.5em;
}

div.code-toolbar > .toolbar a:hover {
  background: var(--link-hover);
}

/* Blockquote */
blockquote {
  box-sizing: border-box;
  margin: 1.6em 0 1.6em -2.2em;
  padding: 0 0 0 1.6em;
  border-left: var(--comet) 0.4em solid;
}

blockquote p {
  margin: 0.8em 0;
  font-style: italic;
}

/* Footer */
.site-footer {
  position: relative;
  margin: 8rem 0 0 0;
  padding: 4rem 0;
  border-top: var(--header-bg) 1px solid;
  font-size: 1.3rem;
  line-height: 1.7em;
  color: #BBC7CC;
  text-align: center;
  background: var(--header-bg);
}

.site-footer a {
  color: #BBC7CC;
  text-decoration: underline;
}

.site-footer a:hover {
  color: var(--link-hover);
}

/* Pagination */
.pagination {
  position: relative;
  width: 80%;
  max-width: 700px;
  margin: 4rem auto;
  font-size: 1.3rem;
  color: #9EABB3;
  text-align: center;
}

.pagination a {
  display: inline-block;
  padding: 0 15px;
  border: var(--border) 1px solid;
  border-radius: 5px;
  background: #363c4a;
  color: #9EABB3;
}

.pagination a:hover {
  border-color: #9EABB3;
  color: #BBC7CC;
}

/* Animation */
.animated {
  animation-fill-mode: both;
  animation-duration: 1s;
}

@keyframes bounceInDown {
  0% { opacity: 0; transform: translateY(-2000px); }
  60% { opacity: 1; transform: translateY(30px); }
  80% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.bounceInDown {
  animation-name: bounceInDown;
}

/* Responsive */
@media only screen and (max-width: 900px) {
  #site-head {
    height: auto;
    min-height: 240px;
    padding: 15% 0;
  }
  .blog-title { font-size: 4rem; }
  .blog-description { font-size: 1.7rem; }
  .post { font-size: 0.9em; }
  h1 { font-size: 4.8rem; }
  h2 { font-size: 3.8rem; }
}

@media only screen and (max-width: 500px) {
  .content, .pagination {
    width: auto;
    margin-left: 16px;
    margin-right: 16px;
  }
  .post { font-size: 0.8em; }
  #site-head { padding: 10% 0; }
  .blog-title { font-size: 3rem; }
  h1, h2 { font-size: 3rem; }
}

/* Override Prism.js font sizes */
code[class*="language-"],
pre[class*="language-"] {
  font-size: 0.85em !important;
}

:not(pre) > code[class*="language-"] {
  font-size: 0.8em !important;
}

/* Use JetBrains Mono for code blocks */
code[class*="language-"],
pre[class*="language-"] {
  font-family: 'JetBrains Mono', monospace !important;
}

:not(pre) > code[class*="language-"] {
  font-family: 'JetBrains Mono', monospace !important;
}