/* Estilos Gerais para o Blog */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
}

h1 {
  font-size: 2rem;
  text-align: center;
  margin-top: 20px;
  color: #444;
}

article {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
}

/* Estilo específico para a imagem com a classe img-blog */
.img-blog {
  width: 70%; /* A imagem vai ocupar 100% da largura disponível */
  height: auto; /* A altura será ajustada automaticamente para manter a proporção */
  margin: 20px auto; /* Adiciona espaço acima e abaixo da imagem, e centraliza */
  display: block; /* Garante que a imagem seja exibida como um bloco e não tenha o espaçamento abaixo */
}

/* Para dispositivos com telas pequenas (menos de 600px) */
@media screen and (max-width: 600px) {
  .img-blog {
    width: 80%; /* A imagem ocupará 80% da largura da tela */
    max-width: 400px; /* Limita a largura da imagem para no máximo 400px */
  }
}

/* Para dispositivos com telas médias (menos de 900px) */
@media screen and (max-width: 900px) {
  .img-blog {
    width: 90%; /* A imagem ocupará 90% da largura da tela */
    max-width: 600px; /* Limita a largura da imagem para no máximo 600px */
  }
}

/* Estilo para o container (div) da imagem */
#bannerImage {
  width: 100%; /* Define a largura para 100% do contêiner pai */
  max-width: 1200px; /* Define a largura máxima para evitar que a imagem ultrapasse o limite */
  margin: 0 auto; /* Centraliza o container horizontalmente */
  padding: 20px; /* Espaçamento interno, caso necessário */
  text-align: center; /* Centraliza a imagem dentro do container */
}

/* Estilo para a imagem dentro do container */
#bannerImage img {
  width: 100%; /* Faz a imagem ocupar toda a largura do container */
  height: auto; /* Mantém a proporção da imagem (evita distorção) */
  display: block; /* Remove o espaço em branco abaixo da imagem */
}


/* Estilos para o container */
div[itemscope] {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Estilos para o título */
h1[itemprop="headline"] {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Estilos para a imagem */
img[itemprop="image"] {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* Estilos para o texto */
p[itemprop="description"],
p[itemprop="articleBody"] {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 20px;
}



.boxblog {border:1px solid #ddd; padding:5px 10px;margin-bottom:20px;}
.date {border-bottom:1px dashed #ddd;padding-bottom:10px;font-family:BitterItalic;}
.continue {font-family:DroidSansBold;margin-top:-5px;display:inline;}
.avatar{ margin-right:15px; float: left; background: #fff; width: 50px; height: 50px; padding: 5px; border: 1px solid #999; border-radius: 50%; box-shadow: 0px 1px 1px 1px #bbb;}
.avatar img{ display: block; width: 100%; border: 0; margin: 0; border-radius: 50%;}
.tags {color:#fff; padding:2px 10px 3px; border-radius:10px;display:inline; float:left; margin:0 10px 15px 0;font-size:12px;font-family:BitterItalic;}
a.tags, .tags a {color:#fff;}
.tags:hover {background:#444;}
.sidebartitle {
	margin-bottom: 20px;
	border-bottom: 1px dashed #ccc;
	padding-bottom: 10px;
	color: #000000;
}
.thumb {width:80px; height:70px;border:1px solid #ccc; padding:2px;float:left;margin-right:10px; margin-bottom:1px; margin-top:1px;}
.circledate {color:#fff;background: url(theme-x/images/blackcircle.png) no-repeat; width:100px; height:100px; padding:2px;float:left;margin-right:10px; margin-bottom:1px; margin-top:1px;}
.textcircle {margin-left:-6px;margin-top:20px;text-align:center;font-family:BitterItalic;color:#ddd;font-size:13px;}
.day {margin-bottom:10px;}
.saymore {font-weight:bold;}
.comments {float:right;font-family:BitterItalic;font-size:11px;font-weight:normal;color:#888;margin-top:10px;}
.authortext {padding-top:10px;}
.gravatar {margin-right:20px;float:left;}
.commentdate {margin-bottom:7px;color:#aaa;font-size:13px;}
#subheader {padding:22px 50px 23px 50px !important;}




Aqui está uma descrição detalhada de cada linha do CSS:

.boxblog

- border: 1px solid #ddd;: Adiciona uma borda de 1 pixel de largura, com cor #ddd (cinza claro), ao redor do elemento.
- padding: 5px 10px;: Adiciona um espaçamento interno de 5 pixels na parte superior e inferior, e 10 pixels nas laterais.
- margin-bottom: 20px;: Adiciona um espaçamento externo de 20 pixels na parte inferior.

.date

- border-bottom: 1px dashed #ddd;: Adiciona uma borda de 1 pixel de largura, com cor #ddd (cinza claro), na parte inferior do elemento, com estilo tracejado.
- padding-bottom: 10px;: Adiciona um espaçamento interno de 10 pixels na parte inferior.
- font-family: BitterItalic;: Define a fonte do texto como BitterItalic.

.continue

- font-family: DroidSansBold;: Define a fonte do texto como DroidSansBold.
- margin-top: -5px;: Adiciona um espaçamento externo de -5 pixels na parte superior (ou seja, move o elemento 5 pixels para cima).
- display: inline;: Define o elemento como um elemento inline (ou seja, não ocupa uma linha inteira).

.avatar

- margin-right: 15px;: Adiciona um espaçamento externo de 15 pixels na lateral direita.
- float: left;: Faz com que o elemento flutue para a esquerda.
- background: #fff;: Define o fundo do elemento como branco (#fff).
- width: 50px;: Define a largura do elemento como 50 pixels.
- height: 50px;: Define a altura do elemento como 50 pixels.
- padding: 5px;: Adiciona um espaçamento interno de 5 pixels.
- border: 1px solid #999;: Adiciona uma borda de 1 pixel de largura, com cor #999 (cinza escuro), ao redor do elemento.
- border-radius: 50%;: Define a borda do elemento como um círculo (50% de border-radius).
- box-shadow: 0px 1px 1px 1px #bbb;: Adiciona uma sombra ao elemento.

.avatar img

- display: block;: Define o elemento como um elemento block (ou seja, ocupa uma linha inteira).
- width: 100%;: Define a largura do elemento como 100% da largura do pai.
- border: 0;: Remove a borda do elemento.
- margin: 0;: Remove o espaçamento externo do elemento.
- border-radius: 50%;: Define a borda do elemento como um círculo (50% de border-radius).

.tags

- color: #fff;: Define a cor do texto como branca (#fff).
- padding: 2px 10px 3px;: Adiciona um espaçamento interno de 2 pixels na parte superior, 10 pixels nas laterais e 3 pixels na parte inferior.
- border-radius: 10px;: Define a borda do elemento como um arco (10 pixels de border-radius).
- display: inline;: Define o elemento como um elemento inline (ou seja, não ocupa uma linha inteira).
- float: left;: Faz com que o elemento flutue para a esquerda.
- margin: 0 10px 15px 0;: Adiciona um espaçamento externo de 0 pixels na parte superior, 10 pixels na lateral direita, 15 pixels na parte inferior e 0 pixels na lateral esquerda.
- font-size: 12px;: Define o tamanho da fonte como 12 pixels.
- font-family: BitterItalic;: Define a fonte do texto como BitterItalic.

a.tags, .tags a

- color: #fff;: Define a cor do texto como branca (#fff).

.tags:hover

- background: #444;: Define o fundo do elemento como cinza escuro (#444) quando o usuário passa o mouse sobre ele.

.sidebartitle

- `margin-bottom: 20px