/* RESET BÁSICO */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #ffe6e0;
  background-image: url("https://sillyandholy.neocities.org/tumblr_a8418b91881a5deb3e21636d1461e1bc_a27c12c2_75.webp");
  color: #ffaca6;
}

/* CENTRALIZA O SITE */
.layout {
  width: 1000px;
  margin: 0 auto;
}

/* HEADER */
header {
  background: #230c0c;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 10px;
}

.banner img {
  width: 100%;
  display: block;
}

.gif-bar img {
  height: 50px;
}

/* ÁREA PRINCIPAL (FLEX) */
.conteudo-area {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* LADO ESQUERDO */
.lado-esquerdo {
  width: 220px;
  flex-shrink: 0;
}

/* FOTO (SEM CAIXA) */
.perfil {
  width: 260px;
  display: block;
  margin-bottom: 20px;
}

/* MENU (CAIXA SEPARADA) */
.menu {
  background: #230c0c;
  padding: 15px;
  border-radius: 10px;
}

/* MENU ESTILO */
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  margin-bottom: 10px;
}

.menu a {
  color: #ffaca6;
  text-decoration: none;
}

/* MAIN (CAIXA DA DIREITA) */
main {
  flex: 1;
  background: #230c0c;
  padding: 20px;
  border-radius: 10px;
}

/* FOOTER */
footer {
  background: #230c0c;
  margin-top: 20px;
  padding: 15px;
  border-radius: 10px;
}

/* IMPORTANTE: permite posicionar os gifs */
header {
  position: relative;
  overflow: visible; /* ESSENCIAL */
}

/* gifs base */
.gif-header {
  position: absolute;
  top: 20px;
  width: 120px;
  z-index: 999;
  pointer-events: none;
}

/* esquerda */
.gif-esquerdo {
  left: -130px;
}

/* direita */
.gif-direito {
  right: -130px;
}

/* texto inicial */
.intro {
  margin-bottom: 30px;
}

/* área do diário */
.diario {
  margin-top: 20px;
}