/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
	border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #8292a2;
}

.token.punctuation {
	color: #f8f8f2;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #f92672;
}

.token.boolean,
.token.number {
	color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: #e6db74;
}

.token.keyword {
	color: #66d9ef;
}

.token.regex,
.token.important {
	color: #fd971f;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}
/*
 * New diff- syntax
 */

pre[class*="language-diff-"] {
    --eleventy-code-padding: 1.25em;
    padding-left: var(--eleventy-code-padding);
    padding-right: var(--eleventy-code-padding);
    border-radius: var(--radius-md);
}
.token.deleted {
    background-color: hsla(0, 60%, 40%, 0.55);
    color: inherit;
}
.token.inserted {
    background-color: hsla(126, 40%, 40%, 0.55);
    color: inherit;
}

/* Make the + and - characters unselectable for copy/paste */
.token.prefix.unchanged,
.token.prefix.inserted,
.token.prefix.deleted {
    -webkit-user-select: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
    padding-bottom: 2px;
}
.token.prefix.inserted,
.token.prefix.deleted {
    width: var(--eleventy-code-padding);
    background-color: rgba(0,0,0,.25);
}

/* Optional: full-width background color */
.token.inserted:not(.prefix),
.token.deleted:not(.prefix) {
    display: block;
    margin-left: calc(-1 * var(--eleventy-code-padding));
    margin-right: calc(-1 * var(--eleventy-code-padding));
    text-decoration: none; /* override del, ins, mark defaults */
    color: inherit; /* override del, ins, mark defaults */
}
* { box-sizing: border-box; }
/* Bold, Modern Blog Theme with Tile Layout */

/* Font variables */
:root {
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-heading: 'IBM Plex Serif', Georgia, serif;
  --font-family-monospace: 'JetBrains Mono', 'SF Mono', 'Fira Code', Menlo, monospace;
  --font-size-base: 1.125rem;
  --line-height-base: 1.75;
}

/* Color variables - Light theme - SOPHISTICATED MINIMALIST */
:root {
  /* Core colors - elegant and restrained palette */
  --color-primary: #2D3748;       /* Slate gray */
  --color-primary-light: #4A5568;
  --color-primary-dark: #1A202C;
  --color-primary-bg: rgba(45, 55, 72, 0.05);
  --color-secondary: #718096;     /* Cool gray */
  --color-secondary-light: #A0AEC0;
  --color-accent: #805AD5;        /* Subtle purple for accents */
  --color-accent-bg: rgba(128, 90, 213, 0.1);
  
  /* UI colors - clean white with subtle texture */
  --color-background: #FFFFFF;    /* White background */
  --color-card: #FFFFFF;          /* White card */
  --color-card-alt: #F7FAFC;      /* Very light gray alt card */
  --color-surface: #EDF2F7;       /* Light gray surface */
  --color-surface-alt: #E2E8F0;   /* Light gray alt */
  
  /* Text colors - sophisticated grayscale */
  --color-text: #1A202C;
  --color-text-secondary: #2D3748;
  --color-text-tertiary: #4A5568;
  --color-text-muted: #718096;
  --color-text-on-primary: #ffffff;
  
  /* Border colors */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-light: rgba(0, 0, 0, 0.05);
  
  /* Syntax highlighting and code */
  --color-code-bg: #1e293b;
  --color-code-text: #e5e7eb;
  --color-code-comment: #94a3b8;
  --color-code-keyword: #7C4DFF; 
  --color-code-function: #40C4FF;
  --color-code-string: #00E676;
  --color-code-number: #FFAB40;
  --color-code-tag: #FF4081;
  --color-code-attribute: #7C4DFF;
  --color-inline-code-bg: #f1f5f9;
  --color-inline-code-text: #0f172a;
  
  /* Spacing system */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  
  /* Border radius - sharper edges, more modern */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius-full: 0;
  
  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
  /* Container widths */
  --container-width: 90rem; /* 1440px */
  --content-width: 70rem;   /* 1120px */
  
  /* Animation speed */
  --transition-fast: 150ms;
  --transition-normal: 250ms;
  --transition-slow: 500ms;
  
  /* Z-index layers */
  --z-lowest: -1;
  --z-low: 1;
  --z-mid: 5;
  --z-high: 10;
  --z-highest: 100;
}

/* Dark mode colors - ELEGANT DARK */
@media (prefers-color-scheme: dark) {
  :root {
    /* Core colors */
    --color-primary: #805AD5;     /* Subtle purple */
    --color-primary-light: #9F7AEA;
    --color-primary-dark: #6B46C1;
    --color-primary-bg: rgba(128, 90, 213, 0.1);
    --color-accent-bg: rgba(213, 63, 140, 0.1);
    --color-secondary: #A0AEC0;   /* Cool gray */
    --color-secondary-light: #CBD5E0;
    --color-accent: #D53F8C;      /* Muted pink accent */
    
    /* UI colors - Sophisticated dark theme */
    --color-background: #1A202C;  /* Deep blue-gray */
    --color-card: #2D3748;        /* Slate gray card */
    --color-card-alt: #353f53;    /* Slightly lighter slate */
    --color-surface: #4A5568;     /* Medium gray surface */
    --color-surface-alt: #4a5568; /* Medium gray alt */
    
    /* Text colors */
    --color-text: #F7FAFC;
    --color-text-secondary: #EDF2F7;
    --color-text-tertiary: #E2E8F0;
    --color-text-muted: #A0AEC0;
    
    /* Border colors */
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-light: rgba(255, 255, 255, 0.04);
    
    /* Syntax highlighting and code */
    --color-code-bg: #2D3748;
    --color-code-text: #E2E8F0;
    --color-inline-code-bg: #4A5568;
    --color-inline-code-text: #EDF2F7;
  }
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--color-background);
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-6);
  font-family: var(--font-family-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
  letter-spacing: -0.015em;
}

h1 {
  font-size: 2.75rem;
  line-height: 1.1;
}

h2 {
  font-size: 2.25rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1.125rem;
}

p {
  margin-bottom: var(--space-6);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

a:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

small {
  font-size: 0.875rem;
}

strong {
  font-weight: 600;
}

mark {
  background-color: var(--color-primary-bg);
  color: var(--color-text);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
}

hr {
  border: 0;
  height: 2px;
  background-color: var(--color-border);
  margin: var(--space-12) 0;
}

blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-6);
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
  font-family: var(--font-family);
  color: var(--color-text-secondary);
  position: relative;
}

blockquote::before {
  content: """;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 0;
  position: absolute;
  top: var(--space-8);
  left: var(--space-4);
  color: var(--color-primary-light);
  opacity: 0.2;
}

blockquote p {
  margin-left: var(--space-6);
  position: relative;
}

blockquote cite {
  display: block;
  margin-top: var(--space-4);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  color: var(--color-text-tertiary);
}

ul, ol {
  margin-bottom: var(--space-6);
  padding-left: var(--space-8);
}

li {
  margin-bottom: var(--space-2);
}

li:last-child {
  margin-bottom: 0;
}

/* Accessibility */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Header */
.site-header {
  width: 100%;
  padding: var(--space-6) var(--space-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  background-color: var(--color-background);
  position: sticky;
  top: 0;
  z-index: var(--z-highest);
  border-bottom: 1px solid var(--color-border);
}

.home-link {
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  letter-spacing: -0.025em;
}

.home-link:hover {
  color: var(--color-accent);
}

/* Navigation */
nav {
  display: flex;
  align-items: center;
}

.nav {
  display: flex;
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: var(--space-2) 0;
  position: relative;
  transition: all var(--transition-normal);
}

.nav-item a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-normal) ease;
}

.nav-item a:hover {
  color: var(--color-primary);
}

.nav-item a:hover::after {
  transform: scaleX(1);
}

.nav a[aria-current="page"] {
  color: var(--color-primary);
}

.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Main content */
main {
  flex: 1;
  padding: var(--space-8);
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  background-color: var(--color-background);
  overflow-x: hidden;
  position: relative;
}

/* Hero section */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) 0;
  margin-bottom: var(--space-16);
  background-color: var(--color-card);
}

.hero-content {
  width: 100%;
  max-width: 1000px;
}

.hero-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.hero-text {
  text-align: left;
  flex: 1;
}

.hero-image {
  width: 300px;
  height: auto;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
  margin-left: var(--space-8);
}

.hero-title {
  font-size: 3.5rem;
  line-height: 1.1;
  margin-bottom: var(--space-6);
  color: var(--color-primary);
  text-align: left;
}

.hero-subtitle {
  font-size: 1.75rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  margin: 0 0 var(--space-10) 0;
  text-align: left;
}

/* Full-width container layout */
.container-full {
  width: 100%;
  margin: 0 auto;
  max-width: var(--content-width);
}

/* Content main area */
.content-main {
  background-color: var(--color-card);
  padding: var(--space-10);
  position: relative;
  overflow: hidden;
}

/* Remove content-main top bar */

/* Posts grid layout (new tile layout) */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-10);
  margin: var(--space-12) 0;
}

.post-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-card);
  overflow: hidden;
  position: relative;
  height: 100%;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.post-card-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  cursor: pointer;
  background: transparent;
}

/* Remove this - we're using border-left instead */

.post-card-image {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface);
  display: block;
  z-index: 10;
}

.post-card-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  z-index: 2;
  position: relative;
  transition: transform 0.5s ease;
}

.post-card:hover .post-card-image img {
  transform: scale(1.05);
}

/* Subtle image overlay gradient */
.post-card-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.15) 100%);
  z-index: 3;
}

/* Remove hover animation as requested */

.post-card-content {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-6) var(--space-8);
  flex-grow: 1;
  color: var(--color-text);
  position: relative;
  z-index: 5;
  background-color: var(--color-card);
}

.post-card-header {
  margin-bottom: var(--space-4);
}

.post-card-meta-top {
  margin-bottom: var(--space-2);
}

.post-card-date {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--color-accent);
  font-weight: 500;
  margin-bottom: var(--space-2);
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-accent-bg);
  padding-bottom: 2px;
}

.post-card-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: var(--space-2) 0 var(--space-3) 0;
  line-height: 1.25;
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  letter-spacing: -0.01em;
}

.post-title-link {
  color: var(--color-primary);
  text-decoration: none;
  position: relative;
  z-index: 10;
  transition: color var(--transition-normal);
}

.post-title-link:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.post-card a {
  position: relative;
  z-index: 10;
}

.post-card-excerpt {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  margin: var(--space-3) 0 var(--space-6);
  line-height: 1.7;
  flex-grow: 1;
  position: relative;
  z-index: 5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.post-card-meta {
  margin-top: auto;
}

.post-card-tags {
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Tags */
.post-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: 0.7rem;
  background-color: var(--color-surface);
  color: var(--color-text-tertiary);
  transition: all var(--transition-normal);
  font-weight: 500;
  letter-spacing: 0.03em;
  margin-right: var(--space-2);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 10;
  border-radius: 12px;
}

.post-tag:hover {
  background-color: var(--color-accent-bg);
  color: var(--color-accent);
  transform: translateY(-1px);
}

/* Featured section header */
.section-title {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-12);
  font-size: 2.5rem;
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  border-bottom: none;
  padding-bottom: 0;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 60px;
  height: 4px;
  background-color: var(--color-accent);
  border-radius: 2px;
}

/* Message box */
.message-box {
  padding: var(--space-6);
  margin: 0 0 var(--space-10);
  background-color: var(--color-primary-bg);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  position: relative;
  box-shadow: var(--shadow-md);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
}

.message-box::before {
  content: '!';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--color-primary);
  color: white;
  border-radius: var(--radius-full);
  margin-right: var(--space-4);
  font-weight: bold;
  flex-shrink: 0;
}

/* Article styling for blog posts */
.post {
  background-color: var(--color-card);
  padding: var(--space-10);
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  max-width: 46rem;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.post-header {
  margin-bottom: var(--space-10);
  position: relative;
  display: block;
}

.post-header-date {
  display: block;
  font-size: 1rem;
  color: var(--color-primary-light);
  font-weight: 700;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.post-header h1 {
  margin-top: 0;
  margin-bottom: var(--space-6);
  font-size: 2.75rem;
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-weight: 700;
  line-height: 1.15;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.post-content {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--color-text);
}


.post-content h2 {
  margin-top: var(--space-12);
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-weight: 600;
  font-size: 1.85rem;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-accent-bg);
}

.post-content h3 {
  margin-top: var(--space-10);
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-weight: 600;
  font-size: 1.5rem;
}

.post-content a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-bg);
  transition: all var(--transition-normal);
  padding-bottom: 1px;
}

.post-content a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin: var(--space-8) 0;
}

.post-content ul, 
.post-content ol {
  margin: var(--space-6) 0 var(--space-6) var(--space-6);
}

.post-content li {
  margin-bottom: var(--space-3);
}

/* Post metadata */
.post-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 var(--space-8) 0;
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

.post-metadata time {
  white-space: nowrap;
  font-weight: 500;
}

/* Improved Post Navigation */
.post-navigation {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 2px solid var(--color-border);
}

.post-nav-grid {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: var(--space-16);
  width: 100%;
}

.post-nav-prev-container {
  flex: 1;
}

.post-nav-next-container {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.post-nav-prev,
.post-nav-next {
  display: flex;
  flex-direction:column;
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  max-width: 90%;
  color: var(--color-text);
  border-radius: 6px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
  transition: all var(--transition-normal);
}

.post-nav-prev {
  text-align: left;
  padding: var(--space-6);
}

.post-nav-next {
  text-align: right;
  padding: var(--space-6);
}

.post-nav-prev:hover,
.post-nav-next:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.post-nav-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
  position: relative;
  padding-bottom: 4px;
}

.post-nav-label::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 1px;
  transition: width 0.3s ease;
}

.post-nav-prev .post-nav-label::after {
  left: 0;
  width: 30px;
}

.post-nav-next .post-nav-label::after {
  right: 0;
  width: 30px;
}

.post-nav-prev:hover .post-nav-label::after,
.post-nav-next:hover .post-nav-label::after {
  width: 100%;
}

.post-nav-link {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  transition: color var(--transition-normal);
}

.post-nav-link:hover {
  color: var(--color-primary);
}

.post-nav-prev::before {
  left: 0;
}

.post-nav-next::before {
  right: 0;
}

.post-nav-prev:hover::before,
.post-nav-next:hover::before {
  opacity: 1;
}

/* Footer Widgets - Bold design */
.footer-widgets {
  background-color: var(--color-card);
  padding: var(--space-16) var(--space-8);
  margin-top: var(--space-20);
  border-top: 4px solid var(--color-primary);
}

.footer-widget-container {
  max-width: var(--container-width);
  margin: 0 auto;
}

.footer-widgets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-12);
}

.footer-widget {
  display: flex;
  flex-direction: column;
}

.footer-widget-title {
  position: relative;
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: var(--space-6);
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-weight: 600;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-accent-bg);
}

.footer-widget-content {
  font-size: 0.95rem;
  margin-bottom: var(--space-8);
  color: var(--color-text);
}

.footer-widget-group {
  margin-bottom: var(--space-6);
}

.footer-widget-group h3 {
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: var(--space-3);
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-weight: 600;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-surface-alt);
  padding-bottom: var(--space-3);
}

.footer-links li:last-child {
  border-bottom: none;
}

.footer-links a {
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-primary);
}

.footer-archive {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--space-3);
}

.footer-archive li a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-2);
  background-color: var(--color-surface);
  font-weight: 600;
  transition: all var(--transition-normal);
  font-size: 0.85rem;
  color: var(--color-text);
}

.footer-archive li a:hover {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  transform: translateY(-2px);
}

.footer-archive .post-count {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  margin-left: var(--space-1);
}

.footer-archive li a:hover .post-count {
  color: var(--color-text-on-primary);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-surface);
  font-weight: 600;
  transition: all var(--transition-normal);
  font-size: 0.85rem;
  color: var(--color-text);
}

.social-link:hover {
  transform: translateY(-2px);
  color: var(--color-text-on-primary);
  background-color: var(--color-primary);
}

/* Footer */
footer {
  padding: var(--space-10) var(--space-8);
  background-color: var(--color-surface);
  color: var(--color-text-tertiary);
  text-align: center;
  margin-top: var(--space-16);
  border-top: 1px solid var(--color-border);
}

footer p {
  margin-bottom: 0;
  font-size: 0.875rem;
}

/* Button styles */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-primary);
  color: white;
  font-weight: 700;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.5;
  box-shadow: var(--shadow-md);
}

.button:hover {
  background-color: var(--color-primary-dark);
  color: white;
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Home archive link */
.home-archive-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
  padding: var(--space-4) var(--space-8);
  background-color: var(--color-primary);
  color: white;
  font-weight: 700; /* Bolder */
  font-size: 1.125rem; /* Larger */
  border-radius: var(--radius-full);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-md);
}

.home-archive-link:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  color: white;
}

.home-archive-link::after {
  content: '→';
  margin-left: var(--space-2);
  transition: transform var(--transition-normal);
}

.home-archive-link:hover::after {
  transform: translateX(var(--space-4));
}

/* Code blocks */
pre,
code {
  font-family: var(--font-family-monospace);
}

/* Inline code */
:not(pre) > code {
  padding: 0.2em 0.4em;
  font-size: 0.85em;
  background-color: var(--color-surface);
  color: var(--color-text);
  border-radius: 3px;
  white-space: normal;
  font-family: var(--font-family-monospace);
}

/* Code blocks */
pre {
  position: relative;
  padding: var(--space-6);
  margin: var(--space-8) 0;
  overflow-x: visible;
  background-color: var(--color-code-bg);
  font-size: 0.9em;
  line-height: 1.7;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
}

pre code {
  display: block;
  padding: 0;
  background-color: transparent;
  color: var(--color-code-text);
  overflow-x: visible;
  font-size: 0.95em;
  max-width: 100%;
  font-family: var(--font-family-monospace);
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Language label */
pre::before {
  content: attr(class);
  position: absolute;
  top: 0;
  right: 0;
  color: var(--color-text-tertiary);
  background: var(--color-surface);
  padding: 0 var(--space-3);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 0 4px 0 4px;
  border-left: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Syntax highlighting enhancements */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--color-code-comment);
}

.token.punctuation {
  color: var(--color-code-text);
}

.token.namespace {
  opacity: 0.7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: var(--color-code-number);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: var(--color-code-string);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: var(--color-code-function);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: var(--color-code-keyword);
}

.token.function,
.token.class-name {
  color: var(--color-code-function);
}

.token.regex,
.token.important,
.token.variable {
  color: var(--color-code-tag);
}

.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

/* Diff highlighting enhancements */
.token.deleted {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  display: block;
}

.token.inserted {
  background-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
  display: block;
}

/* Tables */
table {
  width: 100%;
  margin: var(--space-8) 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

thead {
  background-color: var(--color-primary-bg);
}

th {
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
}

th, td {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

th:first-child {
  border-top-left-radius: var(--radius-md);
}

th:last-child {
  border-top-right-radius: var(--radius-md);
}

tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-md);
}

tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-md);
}

tr:last-child td {
  border-bottom: none;
}

tbody tr {
  transition: background-color var(--transition-fast);
}

tbody tr:hover {
  background-color: var(--color-primary-bg);
}

/* Header anchor links - only visible on hover */
.header-anchor {
  opacity: 0;
  text-decoration: none;
  color: var(--color-text-muted);
  margin-left: var(--space-2);
  transition: opacity var(--transition-normal);
  font-weight: normal;
}

h1:hover .header-anchor,
h2:hover .header-anchor,
h3:hover .header-anchor,
h4:hover .header-anchor,
h5:hover .header-anchor,
h6:hover .header-anchor,
.header-anchor:focus {
  opacity: 1;
}

.header-anchor:hover {
  color: var(--color-primary);
}

/* Utilities */
.text-center {
  text-align: center;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-4 {
  margin-bottom: var(--space-4) !important;
}

.mb-8 {
  margin-bottom: var(--space-8) !important;
}

.mb-16 {
  margin-bottom: var(--space-16) !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-4 {
  margin-top: var(--space-4) !important;
}

.mt-8 {
  margin-top: var(--space-8) !important;
}

.mt-16 {
  margin-top: var(--space-16) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  :root {
    --font-size-base: 1rem;
  }
  
  .hero {
    padding: var(--space-10) var(--space-4);
  }
  
  .hero-flex {
    flex-direction: column-reverse;
    gap: var(--space-6);
  }
  
  .hero-image {
    width: 100%;
    max-width: 300px;
    margin-bottom: var(--space-6);
  }
  
  .hero-title {
    font-size: 2.75rem;
    text-align: center;
  }
  
  .hero-subtitle {
    font-size: 1.5rem;
    text-align: center;
  }
  
  .hero-text {
    text-align: center;
  }
  
  .posts-grid {
    grid-template-columns: 1fr;
  }
  
  .post-card-image {
    height: 200px;
  }
  
  .post, .content-main {
    padding: var(--space-6);
  }

  main {
    padding: var(--space-4);
  }
  
  .site-header {
    padding: var(--space-4);
    position: static;
    top: auto;
    z-index: auto;
  }
  
  .nav {
    gap: var(--space-6);
  }
  
  .post-content {
    font-size: 1rem;
  }
  
  .post-header h1 {
    font-size: 2.25rem;
  }
  
  h1 {
    font-size: 2.25rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  .post-nav-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .post-nav-next {
    text-align: left;
  }
  
  .footer-widgets-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  
  .footer-archive {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  }
}

@media (max-width: 480px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1.125rem;
  }
  
  .post-card-title {
    font-size: 1.5rem;
  }
}

/* Dotfile viewer styles */
.dotfile-viewer {
  margin: var(--space-8) 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--color-card);
}

.dotfile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.dotfile-filename {
  font-family: var(--font-family-monospace);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.dotfile-download {
  font-size: 0.875rem;
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  border-radius: 4px;
  text-decoration: none;
  transition: all var(--transition-normal);
  font-weight: 500;
}

.dotfile-download:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-1px);
}

.dotfile-viewer pre {
  margin: 0;
  border-radius: 0;
  border: none;
  max-height: 500px;
  overflow: auto;
  padding: var(--space-4);
  background-color: var(--color-code-bg);
}

.dotfile-viewer pre code {
  font-size: 0.85em;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
  display: block;
}
/* Link Blog Styles */
.linkblog {
  margin-bottom: 2rem;
}

.linkblog-item {
  margin-bottom: 1.25rem;
}

.linkblog-title {
  font-weight: bold;
  font-size: 1rem;
  color: var(--color-primary);
  text-decoration: none;
  display: block;
  margin-bottom: 0.25rem;
}

.linkblog-title:hover {
  text-decoration: underline;
}

.linkblog-desc {
  font-size: 0.85rem;
  margin: 0.25rem 0;
  color: var(--color-text);
}

.linkblog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.linkblog-tag {
  font-size: 0.7rem;
  background-color: var(--color-light);
  color: var(--color-text-secondary);
  padding: 0.15rem 0.5rem;
  border-radius: 2rem;
  text-decoration: none;
}

.linkblog-more, .linkblog-rss {
  font-size: 0.85rem;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-block;
  margin-top: 0.5rem;
  margin-right: 1rem;
}

.linkblog-more:hover, .linkblog-rss:hover {
  text-decoration: underline;
}

/* Link Blog Full Page */
.linkblog-list .linkblog-item {
  border-bottom: 1px solid var(--color-light);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.linkblog-item-title {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.linkblog-date {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  display: block;
  margin-bottom: 0.5rem;
}
.glightbox-container{width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999!important;overflow:hidden;-ms-touch-action:none;touch-action:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;outline:0}.glightbox-container.inactive{display:none}.glightbox-container .gcontainer{position:relative;width:100%;height:100%;z-index:9999;overflow:hidden}.glightbox-container .gslider{-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;height:100%;left:0;top:0;width:100%;position:relative;overflow:hidden;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.glightbox-container .gslide{width:100%;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0}.glightbox-container .gslide.current{opacity:1;z-index:99999;position:relative}.glightbox-container .gslide.prev{opacity:1;z-index:9999}.glightbox-container .gslide-inner-content{width:100%}.glightbox-container .ginner-container{position:relative;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:100%;margin:auto;height:100vh}.glightbox-container .ginner-container.gvideo-container{width:100%}.glightbox-container .ginner-container.desc-bottom,.glightbox-container .ginner-container.desc-top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.glightbox-container .ginner-container.desc-left,.glightbox-container .ginner-container.desc-right{max-width:100%!important}.gslide iframe,.gslide video{outline:0!important;border:none;min-height:165px;-webkit-overflow-scrolling:touch;-ms-touch-action:auto;touch-action:auto}.gslide:not(.current){pointer-events:none}.gslide-image{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.gslide-image img{max-height:100vh;display:block;padding:0;float:none;outline:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100vw;width:auto;height:auto;-o-object-fit:cover;object-fit:cover;-ms-touch-action:none;touch-action:none;margin:auto;min-width:200px}.desc-bottom .gslide-image img,.desc-top .gslide-image img{width:auto}.desc-left .gslide-image img,.desc-right .gslide-image img{width:auto;max-width:100%}.gslide-image img.zoomable{position:relative}.gslide-image img.dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.gslide-video{position:relative;max-width:100vh;width:100%!important}.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster{display:none}.gslide-video .gvideo-wrapper{width:100%;margin:auto}.gslide-video::before{content:'';position:absolute;width:100%;height:100%;background:rgba(255,0,0,.34);display:none}.gslide-video.playing::before{display:none}.gslide-video.fullscreen{max-width:100%!important;min-width:100%;height:75vh}.gslide-video.fullscreen video{max-width:100%!important;width:100%!important}.gslide-inline{background:#fff;text-align:left;max-height:calc(100vh - 40px);overflow:auto;max-width:100%;margin:auto}.gslide-inline .ginlined-content{padding:20px;width:100%}.gslide-inline .dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.ginlined-content{overflow:auto;display:block!important;opacity:1}.gslide-external{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;min-width:100%;background:#fff;padding:0;overflow:auto;max-height:75vh;height:100%}.gslide-media{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto}.zoomed .gslide-media{-webkit-box-shadow:none!important;box-shadow:none!important}.desc-bottom .gslide-media,.desc-top .gslide-media{margin:0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gslide-description{position:relative;-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%}.gslide-description.description-left,.gslide-description.description-right{max-width:100%}.gslide-description.description-bottom,.gslide-description.description-top{margin:0 auto;width:100%}.gslide-description p{margin-bottom:12px}.gslide-description p:last-child{margin-bottom:0}.zoomed .gslide-description{display:none}.glightbox-button-hidden{display:none}.glightbox-mobile .glightbox-container .gslide-description{height:auto!important;width:100%;position:absolute;bottom:0;padding:19px 11px;max-width:100vw!important;-webkit-box-ordinal-group:3!important;-ms-flex-order:2!important;order:2!important;max-height:78vh;overflow:auto!important;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.75)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.75) 100%);-webkit-transition:opacity .3s linear;transition:opacity .3s linear;padding-bottom:50px}.glightbox-mobile .glightbox-container .gslide-title{color:#fff;font-size:1em}.glightbox-mobile .glightbox-container .gslide-desc{color:#a1a1a1}.glightbox-mobile .glightbox-container .gslide-desc a{color:#fff;font-weight:700}.glightbox-mobile .glightbox-container .gslide-desc *{color:inherit}.glightbox-mobile .glightbox-container .gslide-desc .desc-more{color:#fff;opacity:.4}.gdesc-open .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:.4}.gdesc-open .gdesc-inner{padding-bottom:30px}.gdesc-closed .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.greset{-webkit-transition:all .3s ease;transition:all .3s ease}.gabsolute{position:absolute}.grelative{position:relative}.glightbox-desc{display:none!important}.glightbox-open{overflow:hidden}.gloader{height:25px;width:25px;-webkit-animation:lightboxLoader .8s infinite linear;animation:lightboxLoader .8s infinite linear;border:2px solid #fff;border-right-color:transparent;border-radius:50%;position:absolute;display:block;z-index:9999;left:0;right:0;margin:0 auto;top:47%}.goverlay{width:100%;height:calc(100vh + 1px);position:fixed;top:-1px;left:0;background:#000;will-change:opacity}.glightbox-mobile .goverlay{background:#000}.gclose,.gnext,.gprev{z-index:99999;cursor:pointer;width:26px;height:44px;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gclose svg,.gnext svg,.gprev svg{display:block;width:25px;height:auto;margin:0;padding:0}.gclose.disabled,.gnext.disabled,.gprev.disabled{opacity:.1}.gclose .garrow,.gnext .garrow,.gprev .garrow{stroke:#fff}.gbtn.focused{outline:2px solid #0f3d81}iframe.wait-autoplay{opacity:0}.glightbox-closing .gclose,.glightbox-closing .gnext,.glightbox-closing .gprev{opacity:0!important}.glightbox-clean .gslide-description{background:#fff}.glightbox-clean .gdesc-inner{padding:22px 20px}.glightbox-clean .gslide-title{font-size:1em;font-weight:400;font-family:arial;color:#000;margin-bottom:19px;line-height:1.4em}.glightbox-clean .gslide-desc{font-size:.86em;margin-bottom:0;font-family:arial;line-height:1.4em}.glightbox-clean .gslide-video{background:#000}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.75);border-radius:4px}.glightbox-clean .gclose path,.glightbox-clean .gnext path,.glightbox-clean .gprev path{fill:#fff}.glightbox-clean .gprev{position:absolute;top:-100%;left:30px;width:40px;height:50px}.glightbox-clean .gnext{position:absolute;top:-100%;right:30px;width:40px;height:50px}.glightbox-clean .gclose{width:35px;height:35px;top:15px;right:10px;position:absolute}.glightbox-clean .gclose svg{width:18px;height:auto}.glightbox-clean .gclose:hover{opacity:1}.gfadeIn{-webkit-animation:gfadeIn .5s ease;animation:gfadeIn .5s ease}.gfadeOut{-webkit-animation:gfadeOut .5s ease;animation:gfadeOut .5s ease}.gslideOutLeft{-webkit-animation:gslideOutLeft .3s ease;animation:gslideOutLeft .3s ease}.gslideInLeft{-webkit-animation:gslideInLeft .3s ease;animation:gslideInLeft .3s ease}.gslideOutRight{-webkit-animation:gslideOutRight .3s ease;animation:gslideOutRight .3s ease}.gslideInRight{-webkit-animation:gslideInRight .3s ease;animation:gslideInRight .3s ease}.gzoomIn{-webkit-animation:gzoomIn .5s ease;animation:gzoomIn .5s ease}.gzoomOut{-webkit-animation:gzoomOut .5s ease;animation:gzoomOut .5s ease}@-webkit-keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes gfadeIn{from{opacity:0}to{opacity:1}}@keyframes gfadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes gfadeOut{from{opacity:1}to{opacity:0}}@keyframes gfadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@-webkit-keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@-webkit-keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@-webkit-keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@media (min-width:769px){.glightbox-container .ginner-container{width:auto;height:auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.glightbox-container .ginner-container.desc-top .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-top .gslide-image,.glightbox-container .ginner-container.desc-top .gslide-image img{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.glightbox-container .ginner-container.desc-left .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-left .gslide-image{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.gslide-image img{max-height:97vh;max-width:100%}.gslide-image img.zoomable{cursor:-webkit-zoom-in;cursor:zoom-in}.zoomed .gslide-image img.zoomable{cursor:-webkit-grab;cursor:grab}.gslide-inline{max-height:95vh}.gslide-external{max-height:100vh}.gslide-description.description-left,.gslide-description.description-right{max-width:275px}.glightbox-open{height:auto}.goverlay{background:rgba(0,0,0,.92)}.glightbox-clean .gslide-media{-webkit-box-shadow:1px 2px 9px 0 rgba(0,0,0,.65);box-shadow:1px 2px 9px 0 rgba(0,0,0,.65)}.glightbox-clean .description-left .gdesc-inner,.glightbox-clean .description-right .gdesc-inner{position:absolute;height:100%;overflow-y:auto}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.32)}.glightbox-clean .gclose:hover,.glightbox-clean .gnext:hover,.glightbox-clean .gprev:hover{background-color:rgba(0,0,0,.7)}.glightbox-clean .gprev{top:45%}.glightbox-clean .gnext{top:45%}}@media (min-width:992px){.glightbox-clean .gclose{opacity:.7;right:20px}}@media screen and (max-height:420px){.goverlay{background:#000}}