/* 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: #574242; 
  background-image: url('/zonelets/rose_background.png');
    background-position: top;
  font-size: 18px;
  font-family: Georgia, "Times New Roman", serif;
  margin: 0;
}

p {
  line-height: 1.6em;
}

hr {
  border: solid #9c7e7e;
  border-width: 2px 0 0 0;
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Adição para centralizar imagens dentro de parágrafos */
p > img { /* Aplica a centralização apenas em imagens dentro de parágrafos */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

/* Regra de hover genérica removida para dar lugar a estilos mais específicos */

h1, h2, h3, h4, h5 {
  font-family: Tahoma, Geneva, sans-serif;
  color: #633b3b;
}

/*#CONTAINER is the rectangle that contains everything but the background!*/
#container {
  margin: 3em auto;
  width: 90%;
    max-width: 700px;
    background-color: #faedcd;
  color: #151515; 
  outline-color: #780000;
  outline-style: ridge;
  outline-width: 4px;
  outline-offset: 0;
}

#content {
  padding: 10px 5% 20px 5%;
}

/* NOVO: ESTILOS DE LINK PARA O CONTEÚDO PRINCIPAL */
#content a {
  color: #bf0603; /* Vermelho vivo para links */
  font-weight: bold;
  text-decoration: underline;
}
#content a:visited {
  color: #8d0801; /* Vermelho escuro para links visitados */
}
#content a:hover {
  color: #e5383b; /* Vermelho um pouco mais claro ao passar o mouse */
}


/*HEADER STYLE*/
#header {
  background-color: #633b3b;
  padding: 0 5%;
  border-color: #780000;
  border-style: ridge;
  border-width: 0 0 4px 0;
}
#header ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0;
}
#header li {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 1.5em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header li a {
  color: white;
  text-decoration: none;
  background-color: inherit;
}
#header li a:hover {
  text-decoration: underline;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  padding: 0 5% 10px 5%;
}

/* ESTILO DA NOVA SPLASH SCREEN INTERATIVA */
#splashscreen {
  display: none; /* Começa escondida */
  position: fixed; /* Fica fixa na tela, mesmo com rolagem */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Fundo preto semi-transparente */
  z-index: 1000; /* Garante que ela fique na frente de tudo */
  cursor: pointer; /* Mostra uma "mãozinha" para indicar que é clicável */
}

#splashscreen img {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%); /* Truque para centralizar verticalmente */
  margin: 0 auto; /* Centraliza horizontalmente */
  max-width: 90%; /* Garante que a imagem não seja maior que a tela */
  height: auto;
  border: 3px solid white;
  border-radius: 5px;
}