/* Custom Styles */

:root {
  --color-primary: #FE204D;
  --color-primaryLight: #fce5ea;  
  --color-secondary: #6c757d;
  --color-accent: #f39c12;
  --color-dark: #212529;
  --color-light: #f8f9fa;
  --color-white: #ffffff;

  --color-bg: #ffffff;
  --color-heading: #333333;
  --color-text: #555555;
  --color-muted: #999999;
}



a {
  text-decoration: none;
  transition: all .2s ease-in-out;
  color: var(--color-heading);
}

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

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-weight: 400;
  font-family: "Hind", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Teko", sans-serif;
  word-spacing: 2px;
  letter-spacing: 1px;
  font-weight: 600;
  color: var(--color-heading);
}

article .category {
  padding: 4px 8px;
  border-radius: 0;
  background-color: var(--color-primaryLight);
}

article .category a {
  color: var(--color-primary);
}

.article-post .card-title a {
  color: var(--color-heading);
}

.article-post .card-title a:hover {
  color: var(--color-primary);
}

.article-post .post-meta span {
  display: inline-block;
  font-size: 12px;
}

.article-post .post-meta span::after {
  content: '▪';
  margin: 0 5px;
  color: var(--color-muted);
}

.article-post .post-meta span:last-child::after {
  display: none;
}

.article-post .post-meta a {
  padding: 2px 6px;
  border-radius: 0;
  font-weight: 600;
  color: var(--color-primary);
  background-color: var(--color-primaryLight);
}

.article-post .post-meta span {
  color: var(--color-muted);
}

.pagination-wrapper .page-numbers {
  display: inline-block;
  margin: 0 5px;
  padding: 6px 12px;
  background-color: var(--color-white);
  border: 1px solid var(--color-light);
  color: var(--color-muted);
  font-weight: 500;
}

/*.pagination-wrapper .page-numbers:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}*/

.pagination-wrapper .current {
  background-color: var(--color-primary);
  color: #fff;
}


#reading-progress-bar {
  height: 5px;
  background-color: #007bff;
  width: 0%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transition: width 0.2s ease-out;
}