/* 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: #fdeef4;/* Fallback color: rosa pastel suave */
  background-image: url('baby-pink.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: #4a3f35;
  line-height: 1.6;
}

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

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

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

#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: #b35a6a; /* rosa mais escuro */
  font-weight: bold;
  font-size: 1.1em; /* um pouco maior */
  transition: color 0.3s;
}

#navbar li a:hover {
  color: #e64983; /* 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: #fff0f5; /* lavanda clarinho */
  padding: 20px;
  border: 1px dashed #b38481;
  border-radius: 0; /* retângulo normal */
  margin: 0; /* sem espaçamento extra */
}

#leftSidebar {
  order: 1;
}

#rightSidebar {
  order: 3;
}

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

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

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

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

strong {
  color: #b38481;
}

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

a:hover {
  text-decoration: underline;
}

/* --- Responsivo --- */
@media (max-width: 800px) {
  #flex {
    flex-direction: column;
  }

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

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