/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Corpo geral */
body {
  font-family: 'Verdana', sans-serif;
  font-size: 14px;
  color: #000;
  background-color: #bcd8f1;
  image-rendering: pixelated;
  cursor: url('/cursor.cur'), auto;
}

/* Wrapper central com layout flexível */
#wrapper, .wrapper {
  margin: auto;
  padding: 20px;
  max-width: 1200px;
}

#flex {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* Caixa geral */
.box {
  border: 2px dotted #000;
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 2px 2px #aaa;
}

.content {
  font-size: 14px;
  line-height: 1.6;
}

/* Navegação lateral */
.left, .right {
  width: 20%;
}

.left a, .right a {
  text-decoration: none;
  color: #004488;
}

.left a:hover, .right a:hover {
  text-decoration: underline;
}

.left button,
.right button,
.upd button {
  display: block;
  background-color: #bde0fe;
  border: 1px solid #222;
  width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
  padding: 5px;
  font-family: 'Courier New', monospace;
}

/* Conteúdo principal */
main {
  width: 60%;
}

.top-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
}

.main-logo {
  max-width: 500px;
  width: 100%;
  height: auto;
  display: inline-block;
  image-rendering: pixelated;
  margin: 0 80px; /* espaçamento só nos lados da logo */
}

.side-gif {
  width: 88px;
  height: auto;
  image-rendering: pixelated;
}

/* Cabeçalho no topo do conteúdo */
.header .ht {
  background-color: #000;
  color: #fff;
  text-align: center;
  font-family: 'Courier New', monospace;
  padding: 8px;
  font-size: 18px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

/* Scroll em caixas como TO DO e Updates */
.scroll {
  overflow-y: auto;
  scrollbar-color: #88a #ddd;
  padding-right: 5px;
}

/* Estilização especial para imagem de Julia */
.content img {
  border: 3px solid #ff88b3;
  image-rendering: pixelated;
}

/* Links */
a {
  color: #003388;
  font-weight: bold;
}

a:hover {
  color: #ff0099;
}

/* Estilo das “blinkies” ou botões pixelados */
.button-img img {
  image-rendering: pixelated;
  margin: 3px;
  border: 1px solid #000;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Estilo responsivo simples */
@media (max-width: 768px) {
  #flex {
    flex-direction: column;
  }
  .left, .right, main {
    width: 100%;
  }
}
/* Estilo fofo para botão de votação */
.vote-button {
  background-color: white;
  border: 2px dashed #ff69b4;
  font-family: 'Comic Sans MS', cursive;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  color: #ff69b4;
  box-shadow: 0 0 0 transparent;
}

.vote-button:hover {
  background-color: #ffd6f2;
  transform: scale(1.1) rotate(-2deg);
  box-shadow: 0 0 8px #ffbde8, 0 0 16px #ffbde8;
  animation: bounce 0.3s ease;
}

@keyframes bounce {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.12) rotate(-1deg); }
  100% { transform: scale(1.1) rotate(-2deg); }
}

.floating-pet {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 12px;
  border: 3px solid #ff88b3;
  image-rendering: pixelated;
  cursor: pointer;
  animation: float 10s ease-in-out infinite alternate;
  z-index: 5;
}
.floating-pet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Posições personalizadas */
.pet1 { top: 10%; left: 5%; animation-delay: 0s; }
.pet2 { top: 40%; right: 10%; animation-delay: 2s; }

/* Descrições escondidas inicialmente */
.pet-desc {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.95);
  color: black;
  padding: 10px;
  border-radius: 12px;
  max-width: 200px;
  font-family: 'Comic Sans MS', cursive;
  border: 2px dashed #ff88b3;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.4);
  display: none;
  z-index: 20;
}

.desc1 { top: 22%; left: 5%; }
.desc2 { top: 52%; right: 10%; }

/* Mostrar descrição quando checkbox estiver marcado */
#pet1-toggle:checked ~ .desc1,
#pet2-toggle:checked ~ .desc2 {
  display: block;
}

/* Animação de flutuação */
@keyframes float {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-20px) rotate(1deg); }
  100% { transform: translateY(0) rotate(-1deg); }
}