/* RESET */ * { margin: 0; padding: 0; box-sizing: border-box; } /* FUNDO GERAL */ body { background: rgb(156, 45, 17); color: rgb(216, 173, 31); font-family: "Comic Sans MS", "Comic Sans", cursive; } /* CONTAINER CENTRAL */ .container { width: 1578px; margin: 0 auto; background: rgb(71, 7, 3); border: 2px solid rgb(216, 173, 31); padding: 20px; text-align: center; } /* HEADER */ header h1 { font-size: 32px; } header p { font-size: 14px; color: #dfdc29; } /* MENU */ nav { margin: 20px 0; } nav a img { width: 150px; /* tamanho do botão */ margin: 0 5px; transition: 0.2s; } /* efeito hover estilo antigo */ nav a img:hover { transform: scale(1.1); } /* CONTEÚDO */ main { text-align: center; } main h2 { margin-top: 20px; border-bottom: 1px solid rgb(216, 173, 31); } /* FOOTER */ footer { margin-top: 20px; font-size: 12px; color: #888; } /* LADOS (GIFS) */ .side { position: fixed; top: 0; width: 150px; height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 20px; } .side img { width: 120px; border: 2px solid white; } /* 👉 SEU GIF AQUI */ .left { left: 0; background: url("gifpaizao.gif") repeat-y; background-size: 1020px; background-position: top; } .right { right: 0; background: url("gifpaizao.gif") repeat-y; background-size: 1020px; background-position: top; } .side { position: fixed; top: 0; width: 150px; height: 100vh; image-rendering: pixelated; } .card { position: center; /* base pro texto */ width: 300px; } .card img { width: 100%; display: center; } .texto { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* centraliza */ color: white; font-size: 20px; text-align: center; opacity: 0.3; /* 👈 semi transparente */ } /* RESPONSIVO */ @media (max-width: 900px) { .side { display: none; } .container { width: 90%; } }
/* GLITCH */
.glitch {
  position: relative;
  cursor: pointer;
}

.glitch::before,
.glitch::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("help.png");
  background-size: cover;
  opacity: 0;
}

.glitch.active::before,
.glitch.active::after {
  opacity: 1;
  animation: glitch 0.3s infinite;
}

@keyframes glitch {
  0% { transform: translate(0); }
  50% { transform: translate(-3px, 2px); }
  100% { transform: translate(3px, -2px); }
}

/* JOGO */
/* GRID DENTRO DO CARD */
#jogo.card {
  width: 300px; /* mesmo tamanho do card */
}

/* GRID */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

/* BURACO */
.hole {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1; /* mantém quadrado */
}

/* IMAGEM DO BURACO */
.holeImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
/* BURACO (fica na frente) */
.holeImg {
  position: relative;
  z-index: 2;
}

/* MARMOTA */
.mole {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 60%;
  object-fit: contain;
  opacity: 0;
  image-rendering: pixelated;
}
/* MARMOTA (fica atrás) */
.mole {
  position: absolute;
  top: -15%;


  z-index: 1; /* 👈 menor que o buraco */

  opacity: 0;
}

/* APARECE */
.hole.active .mole {
  opacity: 1;
}