/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body {
  background-color: #0f0f0f;
  color: #e0e0e0;
  font-family: 'Fira Code', monospace;
  margin: 0;
  padding: 0;

  display: flex;
  justify-content: center;
  align-items: flex-start; /* Центрировать по вертикали не всегда нужно — лучше scroll */
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: 1000px;
  background-color: #0f0f0f;
  padding: 30px;
  box-sizing: border-box;
}

.site-header {
  text-align: center;
  padding: 48px 16px 24px;
  background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%);
}

.logo {
  font-size: 2.5em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.logo span {
  text-shadow: 0 0 4px #0ff, 0 0 8px #0ff;
}

.logo .highlight {
  color: #f0f;
  text-shadow: 0 0 4px #f0f, 0 0 8px #f0f;
}

.logo-gif {
  width: 70px;
  height: 40px;
  vertical-align: middle;
  border-radius: 50%;
}

.tagline {
  font-size: 1.1em;
  color: #aaa;
  margin-top: 8px;
  text-shadow: 0 0 4px #00ffff55;
}

.divider {
  border: none;
  height: 1px;
  margin: 24px auto;
  width: 80%;
  background: linear-gradient(to right, #0ff, #f0f);
  opacity: 0.3;
}


img.post {
  width: 760px;
  cursor: pointer; /* Чтобы знали, что кликабельно */
}

img:active {
  opacity: 0.8; /* Небольшой эффект при нажатии, чтобы не казалось мертвым */
}


body > div { /* Предполагаем, что контент обернут в div */
  width: 60%; /* Контент занимает две трети ширины */
  max-width: 800px; /* Ограничиваем максимальную ширину, чтобы не растягивалось */
  background-color: #524e31;
  padding: 30px;
}

.blog-post {
  width: 760px;
  margin: 40px auto;
  padding: 24px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  font-family: system-ui, sans-serif;
  color: #333;
  line-height: 1.6;
}

.post-title {
  margin-top: 0;
  font-size: 28px;
  color: #111;
}

.post-date {
  font-size: 14px;
  color: #888;
  margin-bottom: 16px;
}

.post-content {
  margin-bottom: 20px;
}

.post-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  display: block;
}

.post-image:hover {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5),
              0 0 10px rgba(100, 200, 255, 0.4);
  transform: scale(1.02);
  cursor: zoom-in;
}


pre, code {
  white-space: pre;
  background-color: #1e1e1e;
  color: #d4d4d4;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.4;
}