/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
@import url('https://fonts.googleapis.com/css?family=Arvo:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

:root
{
	--mainColor: #199dd6;
	--mainDark: #333333;
}

.txtcentered
{
	text-align: center; margin: 0 auto;
}

.container
{
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
}

body
{
	background-color: var(--mainColor);
	font-family: 'Open Sans', sans-serif;
	background: #fff;
}

a, a:active, a:visited { color:var(--mainColor); }
header { background: var(--mainColor); width: 100%; padding: 4px 0; margin-bottom: 25px; }
.blogtoplogo { max-width: 180px; }
main { max-width: 710px; display: inline-block; vertical-align: text-top; }
#sidebar { margin-left: 20px; padding: 15px 10px; display: inline-block; max-width: 270px; vertical-align: text-top; background: var(--mainColor); color: #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }

#sidebar a, a:active, a:visited { color: #fff; }
#sidebar ul { list-style-type: none; padding: 5px; }

article h2 {
    font-size: 32px;
    color: var(--mainColor);
    font-weight: 900;
    letter-spacing: -1px;
    margin: 0;
    line-height: 1.2;
    margin: 0px;
}
article h2 a { color: var(--mainColor); text-decoration: none; }

.alignleft, img.alignleft {
	margin-right: .4em;
	display: inline;
	float: left;
	}
.alignright, img.alignright {
	margin-left: .4em;
	display: inline;
	float: right;
	}
.aligncenter, img.aligncenter {
	margin-right: auto;
	margin-left: auto;
	display: block;
	clear: both;
	}
.alignnone, img.alignnone {
	/* not sure about this one */
	}

  /* Blog list article card */
article.post {
    margin-bottom: 40px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e5e5e5;
}

article.post .post-thumb {
    display: block;
    margin-bottom: 15px;
}

article.post .post-thumb img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    transition: transform .2s ease;
}

article.post .post-thumb img:hover {
    transform: scale(1.02);
}

article.post h2 {
    font-size: 28px;
    margin: 10px 0 8px;
    font-weight: 700;
}

article.post h2 a {
    color: var(--mainDark);
    text-decoration: none;
}

article.post h2 a:hover {
    color: var(--mainColor);
}

article.post .entry-meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}

article.post .entry-meta .entry-date {
    margin-right: 8px;
}

article.post .entry-excerpt {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 12px;
}

article.post .read-more {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: var(--mainColor);
    text-decoration: none;
}

article.post .read-more:hover {
    text-decoration: underline;
}



.nav-links {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

.nav-links a,
.nav-links span.page-numbers {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  color: #333;
  background: #f5f5f5;
}

.nav-links a:hover {
  background: #199dd6;
  color: #fff;
}

.nav-links .current {
  background: #199dd6;
  color: #fff;
  font-weight: 600;
}

.nav-links .dots {
  background: transparent;
  color: #888;
  cursor: default;
}

.nav-links .next {
  font-weight: 600;
}