/* 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." */
   
/* --- Reset básico --- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --- Corpo da página --- */
body {
  background-color: #d5ebf2;/* Fallback color: rosa pastel suave */
  background-image: url('plaid-baby-blue.jpg');
  background-repeat: repeat; /* Faz a imagem se repetir */
  background-position: top left; /* Começa do canto superior esquerdo */
  background-size: auto; /* Mantém o tamanho original da imagem */
  font-family: 'IM Fell DW Pica', serif;
  cursor: url('ribboncursor.png'), auto;
  color: #4a5d73;
  line-height: 1.6;
}

/* --- Container principal --- */
#container {
  max-width: 900px;
  margin: 0 auto;
  border: 1px dashed #a6a0c5;
  background-color: rgba(255, 255, 255, 0.85); /* leve transparência para destacar o conteúdo */
}

/* --- Header --- */
#header {
  background-color: #c9d9f0; 
  height: 150px;
  width: 100%;
  border-bottom: 1px dashed #a6a0c5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  color: #4a5d73; /* tom lavanda mais escuro */
  font-weight: bold;
}

/* --- Navbar --- */
#navbar {
    background-color: #e3edf7; /* rosa clarinho/lavanda suave */
    border-bottom: 1px dashed #a6a0c5;
}

#navbar ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px; /* espaçamento horizontal */
  padding: 10px 0;
}

#navbar li a {
  text-decoration: none;
  color: #4a5d73; /* rosa mais escuro */
  font-weight: bold;
  font-size: 1.1em; /* um pouco maior */
  transition: color 0.3s;
}

#navbar li a:hover {
  color: #6c7ba1; /* rosa mais pink ao passar o mouse */
  text-decoration: underline;
}

/* --- Layout Flexível --- */
#flex {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
}

/* --- Sidebars --- */
aside {
  width: 200px;
  background-color: #f1f6fb; /* lavanda clarinho */
  padding: 20px;
  border: 1px dashed #a6a0c5;
  border-radius: 0; /* retângulo normal */
  margin: 0; /* sem espaçamento extra */
  box-sizing: border-box; /* Inclui padding e border no tamanho total */
  overflow-y: auto; /* Permite rolagem se o conteúdo exceder a altura do container */
}

#leftSidebar {
  order: 1;
}

#rightSidebar {
  order: 3;
}

/* --- Ajustes nas listas nas colunas esquerda e direita --- */
#leftSidebar ul, #rightSidebar ul {
  list-style-position: inside; /* Faz com que as bolinhas fiquem dentro da área da caixa */
  margin-bottom: 0; /* Remove a margem extra */
  padding-left: 20px;  /* Garante que as bolinhas fiquem bem dentro da caixa */
}

/* --- Box (caixas informativas) --- */
.box {
  background-color: #f5f8ff; /* lavanda clarinho */
  padding: 10px 20px;
  margin-bottom: 15px;
  border: 1px dashed #a6a0c5;
  border-radius: 0;
}
  *, *::before, *::after {
  box-sizing: border-box; /* Isso já está bom para não afetar o layout */
}

#leftSidebar li, #rightSidebar li {
  margin-bottom: 10px; /* Espaçamento entre os itens */
}

#leftSidebar, #rightSidebar {
  overflow-y: auto; /* Garante que o conteúdo não ultrapasse os limites da caixa */
}

/* Grid para Pros & Cons (Likes & Dislikes) */
.grid-container-2 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* duas colunas iguais */
  gap: 20px;
  margin-top: 30px;
}

.grid-container-2 .box {
  background: #fffdfb;
  border: 1px solid #e7d9d3;
  border-radius: 8px;
  padding: 15px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.grid-container-2 ul {
  list-style: disc inside;
  padding-left: 0;
}

/* Opção cozy: cores sutis diferentes */
.grid-container-2 .box:nth-child(1) { background-color: #f0f9ff; } /* Likes azul clarinho */
.grid-container-2 .box:nth-child(2) { background-color: #fff0f0; } /* Dislikes rosa clarinho */



/* --- Conteúdo Principal --- */
main {
  flex: 1;
  padding: 20px;
  background-color: #f9fbfd; /* rosa muito claro */
  border: 1px dashed #a6a0c5;
  border-radius: 0; /* retângulo normal */
  order: 2;
}

/* --- Box (caixas informativas) --- */
.box {
  background-color: #f5f8ff; /* lavanda clarinho */
  padding: 10px;
  margin-bottom: 15px;
  border: 1px dashed #a6a0c5;
  border-radius: 0;
}

/* --- Rodapé --- */
footer {
  background: linear-gradient(90deg, #c9d9f0, #f4d7e8); /* azul bebê + rosa bebê */
  text-align: center;
  padding: 10px;
  border-top: 1px dashed #a6a0c5;
  color: #4a5d73;
  font-weight: bold;
  border-radius: 0;
}

/* --- Títulos e Destaques --- */
h1, h2, h3 {
  color: #a6a0c5;
}

strong {
  color: #a6a0c5;
}

/* --- Links Gerais --- */
a {
  color: #4a5d73;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #6c7ba1;
}

/* --- Layout Flexível --- */
#flex {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
  justify-content: space-between;  /* Garante que os elementos se alinhem corretamente */
}

/* --- Responsivo --- */
@media (max-width: 800px) {
  #flex {
    flex-direction: column; /* Coloca os itens em uma única coluna */
  }

  aside, main {
    width: 100%;
    border: 1px dashed #a6a0c5;
  }

  #navbar ul {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }
}

/* Header com imagem */
#header {
  background-image: url('SUA-IMAGEM-AQUI.jpg');
  background-size: cover;
  background-position: center;
  height: 180px;
}

/* Melhor equilíbrio das colunas */
aside {
  width: 180px;
}

main {
  margin: 0 10px;
}

/* Chatbox mais integrado */
.chatbox iframe {
  border: none;
}

/* Área principal em GRID */
#layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto auto;
  gap: 20px;
  padding: 20px;
}

/* Coluna esquerda – Site log */
.site-log {
  grid-row: 1 / span 3; /* ocupa toda a altura */
}

/* About (topo da coluna direita) */
.about {
  grid-column: 2;
  grid-row: 1;
}

/* Chatbox (meio da coluna direita) */
.chatbox-area {
  grid-column: 2;
  grid-row: 2;
}

.box {
  border: 1px dashed #a6a0c5;
  background: #f9fbfd;
  padding: 15px;
}

/* Header grande como no wireframe */
#header {
  height: 180px;
  background: #c9d9f0;
  border-bottom: 1px dashed #a6a0c5;
}

/* Divider decorativo */
.divider {
  height: 20px;
  background-image: url('https://dl.glitter-graphics.com/pub/1207/1207906t5ef8adzuh.gif');
  background-repeat: repeat-x;
}

/* Música (embaixo da coluna direita) */
.music {
  grid-column: 2;
  grid-row: 3;
}

/* Divisor decorativo */
.divider {
  height: 20px;
  background-image: url('https://dl.glitter-graphics.com/pub/1207/1207906t5ef8adzuh.gif');
  background-repeat: repeat-x;
  margin: 20px 0;
}